dhbw inhalt: vorlesungsplan tabelle → cards-grid (4×3, milestones hervorgehoben), über-mich logos-collage, internet-101 erweitert (timeline + arpanet-bg + WWW-1989 + mosaic-bg + unterseekabel + heute + five-eyes), a11y/WCAG-block (~12 slides nach native html, vor css), direkt-install slide gesplittet (szenario / symptome), code-block-color → #f48fb1 (alle 8 files), section.invert h2 #f48fb1 für barrierefreiheit, ressourcen-slide auf 01-05 nach cover, alle emojis raus (✓✗⚠️🍞🥬🏆 + ↔), ESM statt CJS in 03/04, librete.ch domain, kleinere fixes (chromium statt chrome, CLI aufgelöst, JetBrains edu, hoppscotch, SOLID-abk., node 24 LTS, brew/winget/scoop/choco-links, vim/neovim/emacs editoren, herzlich willkommen)

dhbw assets: arpanet 1969 + arpanet 90er, mosaic-screenshot, unterseekabel-karte für internet-101 + 5 a11y-demos (kontrast, fokus, error, semantik, keyboard) für barrierefreiheit-block
dhbw assets: 13 logos (uni-stuttgart, dhbw, klett, pons, langenscheidt, nextmarkets, re-cinq, experience-one, becklyn, caesargustav) + collage.png für über-mich-slide, dark-varianten der weiß-auf-transparent-logos
2026-05-07 17:09:04 +02:00 · 2026-05-07 17:08:46 +02:00 · 2026-05-07 15:29:45 +02:00 · 2026-05-07 15:21:40 +02:00 · 2026-05-07 14:48:33 +02:00 · 2026-05-07 14:41:07 +02:00
53 changed files with 1681 additions and 518 deletions
@@ -188,18 +188,23 @@ SPEAKER NOTES:

 ---

-<!-- _class: glossar -->
+<!-- _class: glossar klausur -->
+<!-- _header: '' -->
+<!-- _footer: '' -->
+<!-- _backgroundColor: #e3f2fd -->

 # Glossar: Die Landkarte

+Das Web folgt dem **Client-Server-Modell**: Ein Client (Browser) sendet einen **Request**, ein Server liefert eine **Response** – nach den Regeln eines **Protokolls**.
+
 | Begriff | Was ist das? | Analogie |
 |---------|--------------|----------|
+| **Host** | Ein Rechner im Netz | Ein Haus mit Adresse |
 | **Client** | Der, der fragt (Browser) | Gast im Restaurant |
 | **Server** | Der, der antwortet | Küche im Restaurant |
 | **Request** | Die Anfrage | Bestellung |
 | **Response** | Die Antwort | Das Essen |
-| **Protokoll** | Regeln für Kommunikation | Speisekarte + Bestellablauf |
-| **Host** | Ein Rechner im Netz | Ein Haus mit Adresse |
+| **Protokoll** | Regeln für Kommunikation (z. B. TCP, HTTP) | Speisekarte + Bestellablauf |

 <!--
 SPEAKER NOTES:
@@ -219,6 +224,8 @@ SPEAKER NOTES:

 # Glossar: Adressen & Identitäten

+Jedes Gerät im Netz braucht Adressen: eine **IP** für das globale Routing, eine **MAC** für das lokale Netz und einen **Port** für das richtige Programm.
+
 | Begriff | Was ist das? | Beispiel |
 |---------|--------------|----------|
 | **IP-Adresse** | Globale Adresse im Internet | `212.132.79.37` |
@@ -244,6 +251,8 @@ SPEAKER NOTES:

 # Glossar: Daten unterwegs

+Daten werden Schicht für Schicht verpackt — jede Schicht fügt einen eigenen **Header** hinzu und erzeugt so eine neue Dateneinheit.
+
 | Begriff | Was ist das? | Schicht |
 |---------|--------------|---------|
 | **Paket** | Daten + IP-Header | Internet (Layer 3) |
@@ -268,6 +277,8 @@ SPEAKER NOTES:

 # Glossar: Netzwerk-Eigenschaften

+**Latenz** und **Bandbreite** bestimmen, wie schnell Daten ankommen — Latenz misst die Verzögerung, Bandbreite die Kapazität.
+
 | Begriff | Was ist das? | Einheit |
 |---------|--------------|---------|
 | **Latenz** | Verzögerung (hin + zurück) | Millisekunden |
@@ -296,6 +307,8 @@ SPEAKER NOTES:

 # Glossar: Protokolle

+Protokolle regeln die Kommunikation auf jeder Schicht — von der Anwendung (HTTP) über den Transport (TCP/UDP) bis zum Routing (IP).
+
 | Protokoll | Wofür? | Port | Schicht |
 |-----------|--------|------|---------|
 | **HTTP** | Webseiten übertragen | 80 | Anwendung |
@@ -396,7 +409,7 @@ SPEAKER NOTES:
 | **2** | Internet | Routing, globale Adressen | IP |
 | **1** | Netzzugang | Lokale Übertragung | Ethernet, WLAN |

-**4 Schichten. Das reicht, um das Internet zu verstehen.**
+Jede Schicht hat genau eine Aufgabe und nutzt nur die Schicht direkt darunter.

 <!--
 SPEAKER NOTES:
@@ -466,8 +479,7 @@ SPEAKER NOTES:
 | Internet | IP | **Paket** | IP-Adressen |
 | Netzzugang | Ethernet | **Frame** | MAC-Adressen, Prüfsumme |

-Merkhilfe: **D**aten → **S**egment → **P**aket → **F**rame
-(„**D**er **S**ache **P**raktischer **F**olgen")
+Beim Senden wandern Daten von oben nach unten — jede Schicht verpackt die darüberliegende Einheit mit einem eigenen Header.

 <!--
 SPEAKER NOTES:
@@ -535,9 +547,9 @@ SPEAKER NOTES:

 # Exkurs: OSI vs. TCP/IP

-![h:440 center](./assets/demos/osi-tcpip-diagram.png)
+![bg right:50% fit](./assets/demos/osi-tcpip-diagram.png)

-OSI = Theorie. TCP/IP = Realität.
+OSI (7 Schichten) ist ein theoretisches Referenzmodell — TCP/IP (4 Schichten) beschreibt das reale Internet.

 <!--
 SPEAKER NOTES:
@@ -615,18 +627,14 @@ SPEAKER NOTES:

 # Port: Das richtige Programm

-![bg right:38% fit](./assets/demos/port-highlight.png)
+![bg right:35% fit](./assets/demos/port-highlight.png)

- Identifiziert ein **Programm** auf einem Rechner
- Ein Rechner, viele Dienste
- Analogie: **Wohnungstür im Mehrfamilienhaus**
+Ein Port identifiziert ein **Programm** auf einem Rechner — wie eine **Wohnungstür im Mehrfamilienhaus**.

-| Port | Dienst |
-|------|--------|
-| 80 | HTTP |
-| 443 | HTTPS |
-| 22 | SSH |
-| 53 | DNS |
+- **80** → HTTP
+- **443** → HTTPS
+- **22** → SSH
+- **53** → DNS

 <!--
 SPEAKER NOTES:
@@ -645,6 +653,8 @@ SPEAKER NOTES:

 # IP vs. MAC vs. Port

+Drei Adresstypen arbeiten zusammen — nur die **MAC-Adresse** ändert sich unterwegs, IP und Port bleiben auf dem gesamten Weg gleich.
+
 | | IP-Adresse | MAC-Adresse | Port |
 |---|-----------|-------------|------|
 | **Frage** | Welcher Rechner? | Welches Gerät nebenan? | Welches Programm? |
@@ -1354,6 +1364,8 @@ SPEAKER NOTES:

 # TCP vs. UDP

+TCP und UDP sind beides Transport-Protokolle — TCP garantiert Vollständigkeit, UDP setzt auf Geschwindigkeit.
+
 | | TCP | UDP |
 |---|-----|-----|
 | **Verbindung** | Ja (Handshake) | Nein |
@@ -1455,6 +1467,8 @@ SPEAKER NOTES:

 # HTTP-Methoden

+HTTP-Methoden beschreiben, **was** der Client mit einer Ressource tun will.
+
 | Methode | Bedeutung | Beispiel |
 |---------|-----------|----------|
 | **GET** | Daten abrufen | Seite laden |
@@ -1516,6 +1530,8 @@ POST /users          → Neuen Benutzer erstellen

 # HTTP Status-Codes

+Jede HTTP-Response enthält einen dreistelligen Status-Code — die erste Ziffer verrät die Kategorie.
+
 ```http
 HTTP/1.1 200 OK
 HTTP/1.1 404 Not Found
@@ -1837,6 +1853,11 @@ Eine Klasse kann auf beliebig viele Elemente angewendet werden. Ein Element kann

 ---

+<!-- _class: klausur -->
+<!-- _header: '' -->
+<!-- _footer: '' -->
+<!-- _backgroundColor: #e3f2fd -->
+
 # Selektoren: ID

 ![bg right:35%](./assets/demos/css-selector-id.png)
@@ -2029,10 +2050,17 @@ Best Practice: Setzt das global für alle Elemente.

 ---

+<!-- _class: klausur -->
+<!-- _header: '' -->
+<!-- _footer: '' -->
+<!-- _backgroundColor: #e3f2fd -->
+
 # Farben

 ![bg right:35%](./assets/demos/css-colors.png)

+CSS kennt fünf Notationen für Farben: **Keyword**, **Hex**, **RGB**, **RGBA** (mit Transparenz) und **HSL**.
+
 ```css
 /* Keyword */
 color: red;
@@ -2050,6 +2078,8 @@ color: rgba(255, 0, 0, 0.5);
 color: hsl(0, 100%, 50%);
 ```

+MDN-Referenz: [CSS `<color>`](https://developer.mozilla.org/de/docs/Web/CSS/Reference/Values/color_value)
+
 <!--
 SPEAKER NOTES:

@@ -2070,6 +2100,8 @@ HSL: Hue, Saturation, Lightness. Manchmal intuitiver für Farbanpassungen.

 # Einheiten

+CSS-Einheiten bestimmen, ob Größen **absolut** (px) oder **relativ** zum Kontext (rem, %, vw) berechnet werden.
+
 | Einheit | Bedeutung |
 |---------|-----------|
 | `px` | Pixel (absolut) |
@@ -10,34 +10,40 @@ footer: "Michael Czechowski – SoSe 2026"
 <style>
 :root {
  --color-foreground: #1a1a2e;
-  --color-highlight: #005f8a;
-  --color-dimmed: #4a6a7a;
+  --color-highlight: #d63384;
+  --color-dimmed: #4a4a6a;
 }
 section.invert {
  --color-foreground: #fff;
 }
 section {
-  font-size: 1.7rem;
+  font-size: 1.4rem;
 }
 h1 {
-  color: #005f8a;
+  color: #a02060;
 }
 section.invert h1 {
  color: #fff;
 }
+h2 {
+  color: #1f2937;
+}
+section.invert h2 {
+  color: #f48fb1;
+}
 pre {
-  background: #0f1e2e;
-  color: #00b4d8;
+  background: #0f0f23;
+  color: #f48fb1;
  border-radius: 8px;
-  border-left: 3px solid #005f8a;
+  border-left: 3px solid #d63384;
 }
 pre code {
  background: transparent;
  color: inherit;
 }
 code {
-  background: #1a3a4a;
-  color: #00b4d8;
+  background: #1a1a2e;
+  color: #f48fb1;
  padding: 0.15em 0.4em;
  border-radius: 4px;
 }
@@ -48,28 +54,46 @@ a {

 <!-- _class: invert -->
 <!-- _header: '' -->
-<!-- _backgroundColor: #001520 -->
+<!-- _backgroundColor: #000 -->

-# CSS: Extended
+# Web Engineering
+
+**DHBW Stuttgart** · Informatik / Wirtschaftsinformatik
+
+**Sommersemester 2026** · Sitzung 2 — HTML & CSS (Frameworks)

 ---

-# CSS Selectors – Tag, Class, ID, Attribute
+# Ressourcen zum Selbstlernen

-```css
-/* Tag */
-p { color: #333; }
+- **CODE CRISPIES** — [codecrispi.es](https://codecrispi.es/)
+- **Online Code-Editor** — [codepen.io](https://codepen.io/pen/)
+- **MDN** (Mozilla Developer Network) — [developer.mozilla.org/de/](https://developer.mozilla.org/de/)
+- **Flexbox-Spiel** — [flexboxfroggy.com](https://flexboxfroggy.com/)
+- **Grid-Spiel** — [cssgridgarden.com](https://cssgridgarden.com/)

-/* Class */
-.button { background: blue; }
+---

-/* ID */
-#header { height: 60px; }
+# Inhalt

-/* Attribute */
-input[type="text"] { border: 1px solid #ccc; }
-input[disabled] { background: #eee; }
-```
+Aufbauend auf den Grundlagen aus Sitzung 1.
+
+1. Attribut-Selektoren
+2. Combinators (vertieft)
+3. Pseudo-Klassen — erweitert
+4. Shorthand Properties
+5. Flexbox-Shorthands
+6. Custom Properties (Variables)
+7. CSS Functions (`calc`, `clamp`, ...)
+8. Transition & Animation
+9. CSS Frameworks (Tailwind & Co.)
+
+---
+
+<!-- _class: invert -->
+<!-- _backgroundColor: #000 -->
+
+# CSS: Extended

 ---

@@ -118,27 +142,7 @@ h1, h2, h3 { font-weight: bold; }

 ---

-# Pseudo Classes
-
-```css
-/* User Interaction */
-:hover { color: red; }
-:active { background: blue; }
-:focus { outline: 2px solid orange; }
-
-/* Structure */
-:first-child { margin-left: 0; }
-:last-child { margin-right: 0; }
-:nth-child(odd) { background: #f9f9f9; }
-
-/* Links */
-:visited { color: purple; }
-:link { color: blue; }
-```
-
---
-
-# Pseudo Classes – More
+# Pseudo Classes – Erweitert

 ```css
 /* Form States */
@@ -205,7 +209,7 @@ gap: 20px 40px;

 ```css
 :root {
-  --primary-color: #005f8a;
+  --primary-color: #d63384;
  --spacing: 20px;
  --radius: 8px;
 }
@@ -259,28 +263,6 @@ transition: background 0.2s, transform 0.1s;

 ---

-# CSS Specificity
-
-Welcher Selektor gewinnt? **Punktezählung:**
-
-```
-ID            – 0,1,0,0
-Class / Attr / Pseudo-Class  – 0,0,1,0
-Tag / Pseudo-Element  – 0,0,0,1
-Inline Style          – 1,0,0,0
-!important            – setzt alles außer Kraft
-```
-
-```css
-#main .btn:hover     /* 0,1,2,0 */
-.btn.primary         /* 0,0,2,0 */
-button[type="submit"] /* 0,0,1,1 */
-```
-
-→ Faustregel: möglichst flach. `!important` vermeiden.
-
---
-
 # CSS Frameworks

 | Framework | Stil |
@@ -308,137 +290,3 @@ button[type="submit"] /* 0,0,1,1 */
 - JIT-Compiler erzeugt nur genutzte Klassen
 - Design-System via `tailwind.config.js`

---
-
-<!-- _class: invert -->
-<!-- _backgroundColor: #001520 -->
-
-# No JavaScript, No Cry
-
-## Native HTML statt JS-Komponenten
-
---
-
-# Native HTML – Was früher JS brauchte
-
-| Komponente | Native Alternative |
-|------------|--------------------|
-| Accordion / Collapsible | `<details>` + `<summary>` |
-| Modal / Dialog | `<dialog>` |
-| Date Picker | `<input type="date">` |
-| Time Picker | `<input type="time">` |
-| Color Picker | `<input type="color">` |
-| Range Slider | `<input type="range">` |
-| Progress Bar | `<progress>` |
-| Auto-Complete | `<datalist>` |
-
-→ Baseline Widely Available (Chrome, Firefox, Safari, Edge).
-
---
-
-# `<details>` + `<summary>`
-
-```html
-<details>
-  <summary>Mehr Infos</summary>
-  <p>Hier steht der ausklappbare Inhalt.</p>
-</details>
-```
-
- Keine Zeile JS
- Tastatur-zugänglich
- Animierbar mit `::details-content` (CSS only)
-
---
-
-# `<dialog>` – Native Modal
-
-```html
-<dialog id="myDialog">
-  <form method="dialog">
-    <p>Wirklich löschen?</p>
-    <button value="cancel">Abbrechen</button>
-    <button value="ok">OK</button>
-  </form>
-</dialog>
-
-<button onclick="myDialog.showModal()">Öffnen</button>
-```
-
- `showModal()` blockt Hintergrund + ESC schließt
- Backdrop via `dialog::backdrop`
- Form mit `method="dialog"` schließt + liefert `returnValue`
-
---
-
-# `<input type="date">` & Co.
-
-```html
-<input type="date" min="2026-01-01" max="2026-12-31">
-<input type="time" step="60">
-<input type="color" value="#005f8a">
-<input type="range" min="0" max="100" step="5" value="50">
-<input type="number" min="1" max="300">
-```
-
- Plattform-native UI (Touch-Datepicker auf Mobile)
- Validierung "for free"
- Locale-Awareness vom Browser
-
---
-
-# `<progress>` – Native Progress Bar
-
-```html
-<progress value="70" max="100">70%</progress>
-
-<!-- indeterminate -->
-<progress></progress>
-```
-
-```css
-progress {
-  width: 100%;
-  height: 0.5rem;
-}
-progress::-webkit-progress-bar { background: #eee; }
-progress::-webkit-progress-value { background: #005f8a; }
-```
-
---
-
-# Form Validation – Native
-
-```html
-<form>
-  <input type="email" required
-         pattern=".+@dhbw\.de"
-         title="Bitte DHBW-Mail eingeben">
-  <input type="password" minlength="8" required>
-  <button>Login</button>
-</form>
-```
-
- `required`, `min`, `max`, `pattern`, `step`
- `:invalid` / `:valid` CSS-Pseudoklassen
- `form.checkValidity()` / `input.setCustomValidity()`
-
---
-
-# Wann doch JS?
-
- Komplexe Interaktion über mehrere Komponenten
- State, der nicht ins DOM gehört
- Async / Server-Sync
- Animationen mit komplexer Logik
- Cross-Browser-Polyfills (selten heute)
-
-→ **Default: HTML/CSS. JS nur wenn nötig.**
-
---
-
-# Fragen?
-
-1. Was bedeutet `div > p` vs `div p`?
-2. Wann nutzt du `nth-child(even)`?
-3. Warum `--variable` statt direkt `#fff`?
@@ -10,34 +10,40 @@ footer: "Michael Czechowski – SoSe 2026"
 <style>
 :root {
  --color-foreground: #1a1a2e;
-  --color-highlight: #005f8a;
-  --color-dimmed: #4a6a7a;
+  --color-highlight: #d63384;
+  --color-dimmed: #4a4a6a;
 }
 section.invert {
  --color-foreground: #fff;
 }
 section {
-  font-size: 1.7rem;
+  font-size: 1.4rem;
 }
 h1 {
-  color: #005f8a;
+  color: #a02060;
 }
 section.invert h1 {
  color: #fff;
 }
+h2 {
+  color: #1f2937;
+}
+section.invert h2 {
+  color: #f48fb1;
+}
 pre {
-  background: #0f1e2e;
-  color: #00b4d8;
+  background: #0f0f23;
+  color: #f48fb1;
  border-radius: 8px;
-  border-left: 3px solid #005f8a;
+  border-left: 3px solid #d63384;
 }
 pre code {
  background: transparent;
  color: inherit;
 }
 code {
-  background: #1a3a4a;
-  color: #00b4d8;
+  background: #1a1a2e;
+  color: #f48fb1;
  padding: 0.15em 0.4em;
  border-radius: 4px;
 }
@@ -48,7 +54,41 @@ a {

 <!-- _class: invert -->
 <!-- _header: '' -->
-<!-- _backgroundColor: #001520 -->
+<!-- _backgroundColor: #000 -->
+
+# Web Engineering
+
+**DHBW Stuttgart** · Informatik / Wirtschaftsinformatik
+
+**Sommersemester 2026** · Sitzung 4 — Node.js: Scripting, Running and Building
+
+---
+
+# Ressourcen zum Selbstlernen
+
+- **CODE CRISPIES** — [codecrispi.es](https://codecrispi.es/)
+- **Online Code-Editor** — [codepen.io](https://codepen.io/pen/)
+- **MDN** (Mozilla Developer Network) — [developer.mozilla.org/de/](https://developer.mozilla.org/de/)
+- **Flexbox-Spiel** — [flexboxfroggy.com](https://flexboxfroggy.com/)
+- **Grid-Spiel** — [cssgridgarden.com](https://cssgridgarden.com/)
+
+---
+
+# Inhalt
+
+1. Node.js: was und warum
+2. `node --check`, `node -e` (One-Liner)
+3. Module: `require` / `import`, `__dirname` / `__filename`
+4. HTTP-Server (built-in)
+5. `fs` — Dateien lesen / schreiben
+6. `package.json` — Aufbau und Lifecycle
+7. npm Scripts
+8. Module exportieren
+
+---
+
+<!-- _class: invert -->
+<!-- _backgroundColor: #000 -->

 # Node.js – Scripting, Running and Building

@@ -89,8 +129,10 @@ node -e "console.log('Hallo Welt')"
 # String
 node -e "console.log('Hello ' + process.argv[2])" Welt

-# File reading
-node -e "console.log(require('fs').readFileSync('data.json'))"
+# File reading (ESM via --input-type)
+node --input-type=module -e \
+  "import { readFileSync } from 'node:fs'; \
+   console.log(readFileSync('data.json', 'utf8'))"

 # JSON parsen
 node -e "console.log(JSON.parse(process.argv[1]))" '{"a":1}'
@@ -98,70 +140,81 @@ node -e "console.log(JSON.parse(process.argv[1]))" '{"a":1}'

 ---

-# require() – Module laden
+# Module laden – ESM (modern)
+
+`"type": "module"` in `package.json` einschalten.

 ```javascript
-// Eigene Datei
-const utils = require('./utils');
+// Eigene Datei (Endung .js erforderlich!)
+import { add, greet } from "./utils.js";

-// npm Modul
-const express = require('express');
+// npm Modul (default + named import)
+import express from "express";
+import { Router } from "express";

-// Built-in
-const fs = require('fs');
-const path = require('path');
+// Built-in (mit "node:"-Präfix)
+import { readFileSync } from "node:fs";
+import { join } from "node:path";
 ```

+<small>**Legacy CJS:** `const express = require("express")` — funktioniert noch, aber ESM ist heute Standard.</small>
+
 ---

-# __dirname und __filename
+# Pfad-Auflösung in ESM

 ```javascript
-// Aktuelles Verzeichnis (Node.js)
-console.log(__dirname);   // /home/user/project/src
-console.log(__filename);  // /home/user/project/src/app.js
+import { fileURLToPath } from "node:url";
+import { dirname, join } from "node:path";

-// Pfad joinen
-const configPath = path.join(__dirname, '..', 'config.json');
+const __filename = fileURLToPath(import.meta.url);
+const __dirname  = dirname(__filename);
+
+const configPath = join(__dirname, "..", "config.json");
 ```

+<small>In ESM gibt es **kein** automatisches `__dirname` / `__filename` (anders als CJS). Über `import.meta.url` rekonstruieren.</small>
+
 ---

 # HTTP Server mit Node.js (Built-in)

+**ESM** (modern, `"type": "module"` in `package.json`):
 ```javascript
-const http = require('http');
+import { createServer } from "node:http";

-const server = http.createServer((req, res) => {
-  res.writeHead(200, { 'Content-Type': 'text/html' });
-  res.end('<h1>Hallo Welt!</h1>');
+const server = createServer((req, res) => {
+  res.writeHead(200, { "Content-Type": "text/html" });
+  res.end("<h1>Hallo Welt!</h1>");
 });

 server.listen(3000, () => {
-  console.log('Server läuft auf Port 3000');
+  console.log("Server läuft auf Port 3000");
 });
 ```

+<small>**CommonJS** (legacy): `const http = require("http");` — funktioniert noch, aber neue Projekte nutzen ESM.</small>
+
 ---

 # fs – Dateien lesen/schreiben

 ```javascript
-const fs = require('fs');
+import { readFile, readFileSync, writeFile } from "node:fs";
+import { readFile as readFileAsync } from "node:fs/promises";

-// Async
-fs.readFile('data.json', 'utf8', (err, data) => {
+// Promise-API (empfohlen, modern)
+const data = await readFileAsync("data.json", "utf8");
+console.log(JSON.parse(data));
+
+// Callback-API
+readFile("data.json", "utf8", (err, data) => {
  if (err) throw err;
  console.log(JSON.parse(data));
 });

-// Sync
-const content = fs.readFileSync('data.json', 'utf8');
-
-// Write
-fs.writeFile('output.txt', 'Hallo Welt', (err) => {
-  if (err) throw err;
-});
+// Sync (nur für Setup / Scripts)
+const content = readFileSync("data.json", "utf8");
 ```

 ---
@@ -206,23 +259,26 @@ npm start    → start (direkt)

 ---

-# Node.js Module – exports
+# Node.js Module – exports (ESM)

 ```javascript
-// utils.js
-module.exports = {
-  add: (a, b) => a + b,
-  greet: (name) => `Hallo ${name}!`
-};
+// utils.js — named exports
+export const add = (a, b) => a + b;
+export const greet = (name) => `Hallo ${name}!`;

-// Oder einzelne Exporte
-module.exports.add = (a, b) => a + b;
+// utils.js — default export
+export default {
+  add,
+  greet
+};
 ```

---
+```javascript
+// nutzen
+import { add, greet } from "./utils.js";       // named
+import utils from "./utils.js";                // default
+import utils, { add } from "./utils.js";       // beides
+```

-# Fragen?
+<small>**Legacy CJS:** `module.exports = { add, greet }` + `const { add } = require("./utils")`.</small>

-1. Wie startest du einen Node.js Server auf Port 8080?
-2. Was macht `node --check`?
-3. Wozu dient `package.json`?
@@ -10,34 +10,40 @@ footer: "Michael Czechowski – SoSe 2026"
 <style>
 :root {
  --color-foreground: #1a1a2e;
-  --color-highlight: #005f8a;
-  --color-dimmed: #4a6a7a;
+  --color-highlight: #d63384;
+  --color-dimmed: #4a4a6a;
 }
 section.invert {
  --color-foreground: #fff;
 }
 section {
-  font-size: 1.7rem;
+  font-size: 1.4rem;
 }
 h1 {
-  color: #005f8a;
+  color: #a02060;
 }
 section.invert h1 {
  color: #fff;
 }
+h2 {
+  color: #1f2937;
+}
+section.invert h2 {
+  color: #f48fb1;
+}
 pre {
-  background: #0f1e2e;
-  color: #00b4d8;
+  background: #0f0f23;
+  color: #f48fb1;
  border-radius: 8px;
-  border-left: 3px solid #005f8a;
+  border-left: 3px solid #d63384;
 }
 pre code {
  background: transparent;
  color: inherit;
 }
 code {
-  background: #1a3a4a;
-  color: #00b4d8;
+  background: #1a1a2e;
+  color: #f48fb1;
  padding: 0.15em 0.4em;
  border-radius: 4px;
 }
@@ -48,9 +54,42 @@ a {

 <!-- _class: invert -->
 <!-- _header: '' -->
-<!-- _backgroundColor: #001520 -->
+<!-- _backgroundColor: #000 -->

-# node.js – Advanced
+# Web Engineering
+
+**DHBW Stuttgart** · Informatik / Wirtschaftsinformatik
+
+**Sommersemester 2026** · Sitzung 5 — Express API, CRUD und Middlewares
+
+---
+
+# Ressourcen zum Selbstlernen
+
+- **CODE CRISPIES** — [codecrispi.es](https://codecrispi.es/)
+- **Online Code-Editor** — [codepen.io](https://codepen.io/pen/)
+- **MDN** (Mozilla Developer Network) — [developer.mozilla.org/de/](https://developer.mozilla.org/de/)
+- **Flexbox-Spiel** — [flexboxfroggy.com](https://flexboxfroggy.com/)
+- **Grid-Spiel** — [cssgridgarden.com](https://cssgridgarden.com/)
+
+---
+
+# Inhalt
+
+1. Node.js — Fun Facts & alternative Runtimes
+2. `process` — Signal-Handling, Graceful Shutdown
+3. Express — Setup, Routing
+4. Middlewares (eigene + built-in)
+5. CRUD-Endpunkte (Create, Read, Update, Delete)
+6. Error Handling
+7. WebSockets
+
+---
+
+<!-- _class: invert -->
+<!-- _backgroundColor: #000 -->
+
+# Node.js – Advanced

 ---

@@ -87,14 +126,20 @@ process.exit(1);  // Fehler
 # node.js Module System

 ```javascript
-// ES Modules
-import express from 'express';
-import { port } from './src/config/constants.js';
-
-// CommonJS
-const fs = require('fs');
+// ES Modules (modern, "type": "module")
+import express from "express";
+import { port } from "./src/config/constants.js";
+import { readFileSync } from "node:fs";
 ```

+```javascript
+// CommonJS (legacy)
+const express = require("express");
+const fs = require("fs");
+```
+
+→ Neue Projekte: ESM. Built-ins immer mit `node:`-Präfix.
+
 ---

 # HTTP Request mit node-fetch
@@ -249,10 +294,3 @@ wss.on('connection', (ws) => {
 ![bg fit](./assets/demos/test-automation-trophy.png)


---
-
-# Fragen?
-
-1. Wozu dient `process.on('SIGINT')`?
-2. Was macht `app.use(express.json())`?
-3. Wie erstellst du einen GET-Endpoint mit Express?
@@ -11,34 +11,40 @@ title: Testing
 <style>
 :root {
  --color-foreground: #1a1a2e;
-  --color-highlight: #005f8a;
-  --color-dimmed: #4a6a7a;
+  --color-highlight: #d63384;
+  --color-dimmed: #4a4a6a;
 }
 section.invert {
  --color-foreground: #fff;
 }
 section {
-  font-size: 1.7rem;
+  font-size: 1.4rem;
 }
 h1 {
-  color: #005f8a;
+  color: #a02060;
 }
 section.invert h1 {
  color: #fff;
 }
+h2 {
+  color: #1f2937;
+}
+section.invert h2 {
+  color: #f48fb1;
+}
 pre {
-  background: #0f1e2e;
-  color: #00b4d8;
+  background: #0f0f23;
+  color: #f48fb1;
  border-radius: 8px;
-  border-left: 3px solid #005f8a;
+  border-left: 3px solid #d63384;
 }
 pre code {
  background: transparent;
  color: inherit;
 }
 code {
-  background: #1a3a4a;
-  color: #00b4d8;
+  background: #1a1a2e;
+  color: #f48fb1;
  padding: 0.15em 0.4em;
  border-radius: 4px;
 }
@@ -49,7 +55,28 @@ a {

 <!-- _class: invert -->
 <!-- _header: '' -->
-<!-- _backgroundColor: #001520 -->
+<!-- _backgroundColor: #000 -->
+
+# Web Engineering
+
+**DHBW Stuttgart** · Informatik / Wirtschaftsinformatik
+
+**Sommersemester 2026** · Sitzung 7 — Testing
+
+---
+
+# Ressourcen zum Selbstlernen
+
+- **CODE CRISPIES** — [codecrispi.es](https://codecrispi.es/)
+- **Online Code-Editor** — [codepen.io](https://codepen.io/pen/)
+- **MDN** (Mozilla Developer Network) — [developer.mozilla.org/de/](https://developer.mozilla.org/de/)
+- **Flexbox-Spiel** — [flexboxfroggy.com](https://flexboxfroggy.com/)
+- **Grid-Spiel** — [cssgridgarden.com](https://cssgridgarden.com/)
+
+---
+
+<!-- _class: invert -->
+<!-- _backgroundColor: #000 -->

 # Testing

@@ -103,7 +130,6 @@ Jede Design-Phase hat Testpendant. Testfälle früh ableiten.
 # Test Automation Trophy (Kent C. Dodds)

 ```
-        🏆
   ┌─────────┐
   │   E2E   │  ← klein
   ├─────────┤
@@ -259,7 +285,7 @@ test("complete user journey", async () => {
 - **Echter Browser** – Chromium / Firefox / WebKit
 - **Echtes DOM** – Klicks, Tippen, Scrollen
 - **Echtes Rendering** – CSS, async Operationen
- **Cross-Origin** – Client ↔ Server-Kommunikation
+- **Cross-Origin** – Client- und Server-Kommunikation

 Tools: **Cypress**, **Playwright**

@@ -346,11 +372,3 @@ npm test          # unit + integration
 npm run test:e2e  # e2e
 ```

---
-
-<!-- _class: invert -->
-<!-- _backgroundColor: #001520 -->
-
-# Fragen?
-
-**Hausaufgabe:** Eigene Projektidee mit mind. 1 Unit + 1 Integration Test starten.
@@ -11,34 +11,40 @@ title: TypeScript
 <style>
 :root {
  --color-foreground: #1a1a2e;
-  --color-highlight: #005f8a;
-  --color-dimmed: #4a6a7a;
+  --color-highlight: #d63384;
+  --color-dimmed: #4a4a6a;
 }
 section.invert {
  --color-foreground: #fff;
 }
 section {
-  font-size: 1.7rem;
+  font-size: 1.4rem;
 }
 h1 {
-  color: #005f8a;
+  color: #a02060;
 }
 section.invert h1 {
  color: #fff;
 }
+h2 {
+  color: #1f2937;
+}
+section.invert h2 {
+  color: #f48fb1;
+}
 pre {
-  background: #0f1e2e;
-  color: #00b4d8;
+  background: #0f0f23;
+  color: #f48fb1;
  border-radius: 8px;
-  border-left: 3px solid #005f8a;
+  border-left: 3px solid #d63384;
 }
 pre code {
  background: transparent;
  color: inherit;
 }
 code {
-  background: #1a3a4a;
-  color: #00b4d8;
+  background: #1a1a2e;
+  color: #f48fb1;
  padding: 0.15em 0.4em;
  border-radius: 4px;
 }
@@ -49,7 +55,18 @@ a {

 <!-- _class: invert -->
 <!-- _header: '' -->
-<!-- _backgroundColor: #001520 -->
+<!-- _backgroundColor: #000 -->
+
+# Web Engineering
+
+**DHBW Stuttgart** · Informatik / Wirtschaftsinformatik
+
+**Sommersemester 2026** · Sitzung 8 — TypeScript
+
+---
+
+<!-- _class: invert -->
+<!-- _backgroundColor: #000 -->

 # TypeScript

@@ -149,7 +166,7 @@ let id: number | string;

 id = 101;       // ok
 id = "101";     // ok
-id = true;      // ✗ TypeError
+id = true;      // TypeError (nicht erlaubt)
 ```

 ---
@@ -294,7 +311,7 @@ function verify(result) {
 ---

 <!-- _class: invert -->
-<!-- _backgroundColor: #001520 -->
+<!-- _backgroundColor: #000 -->

 # Decorators

@@ -412,11 +429,3 @@ export class UsersController {

 `@Controller`, `@Get`, `@Param` sind Decorators – Metadaten ⇒ Routing.

---
-
-<!-- _class: invert -->
-<!-- _backgroundColor: #001520 -->
-
-# Fragen?
-
-**Hausaufgabe:** Bestehendes JS-Projekt auf TS migrieren – mind. 1 File + `tsconfig.json`.
@@ -11,34 +11,40 @@ title: Docker und Service Orchestration
 <style>
 :root {
  --color-foreground: #1a1a2e;
-  --color-highlight: #005f8a;
-  --color-dimmed: #4a6a7a;
+  --color-highlight: #d63384;
+  --color-dimmed: #4a4a6a;
 }
 section.invert {
  --color-foreground: #fff;
 }
 section {
-  font-size: 1.7rem;
+  font-size: 1.4rem;
 }
 h1 {
-  color: #005f8a;
+  color: #a02060;
 }
 section.invert h1 {
  color: #fff;
 }
+h2 {
+  color: #1f2937;
+}
+section.invert h2 {
+  color: #f48fb1;
+}
 pre {
-  background: #0f1e2e;
-  color: #00b4d8;
+  background: #0f0f23;
+  color: #f48fb1;
  border-radius: 8px;
-  border-left: 3px solid #005f8a;
+  border-left: 3px solid #d63384;
 }
 pre code {
  background: transparent;
  color: inherit;
 }
 code {
-  background: #1a3a4a;
-  color: #00b4d8;
+  background: #1a1a2e;
+  color: #f48fb1;
  padding: 0.15em 0.4em;
  border-radius: 4px;
 }
@@ -49,7 +55,18 @@ a {

 <!-- _class: invert -->
 <!-- _header: '' -->
-<!-- _backgroundColor: #001520 -->
+<!-- _backgroundColor: #000 -->
+
+# Web Engineering
+
+**DHBW Stuttgart** · Informatik / Wirtschaftsinformatik
+
+**Sommersemester 2026** · Sitzung 9 — Docker, Proxies and DBs
+
+---
+
+<!-- _class: invert -->
+<!-- _backgroundColor: #000 -->

 # Docker

@@ -280,8 +297,8 @@ api:

 # Networks: Segmentierung

- **`net`** – öffentlich erreichbar (Proxy ↔ App)
- **`data`** – nur intern (App ↔ DB)
+- **`net`** – öffentlich erreichbar (Proxy — App)
+- **`data`** – nur intern (App — DB)
 - DB ist **nicht** vom Internet erreichbar
 - Service-DNS: `api`, `db`, `proxy` (Container-Name = Hostname)

@@ -328,11 +345,3 @@ docker compose up --build
 - Logging Drivers
 - Health Checks · Restart Policies

---
-
-<!-- _class: invert -->
-<!-- _backgroundColor: #001520 -->
-
-# Fragen?
-
-**Hausaufgabe:** Eigenes Projekt mit `Dockerfile` + `compose.yml` containerisieren.
@@ -11,34 +11,40 @@ title: Best Practices
 <style>
 :root {
  --color-foreground: #1a1a2e;
-  --color-highlight: #005f8a;
-  --color-dimmed: #4a6a7a;
+  --color-highlight: #d63384;
+  --color-dimmed: #4a4a6a;
 }
 section.invert {
  --color-foreground: #fff;
 }
 section {
-  font-size: 1.7rem;
+  font-size: 1.4rem;
 }
 h1 {
-  color: #005f8a;
+  color: #a02060;
 }
 section.invert h1 {
  color: #fff;
 }
+h2 {
+  color: #1f2937;
+}
+section.invert h2 {
+  color: #f48fb1;
+}
 pre {
-  background: #0f1e2e;
-  color: #00b4d8;
+  background: #0f0f23;
+  color: #f48fb1;
  border-radius: 8px;
-  border-left: 3px solid #005f8a;
+  border-left: 3px solid #d63384;
 }
 pre code {
  background: transparent;
  color: inherit;
 }
 code {
-  background: #1a3a4a;
-  color: #00b4d8;
+  background: #1a1a2e;
+  color: #f48fb1;
  padding: 0.15em 0.4em;
  border-radius: 4px;
 }
@@ -49,7 +55,18 @@ a {

 <!-- _class: invert -->
 <!-- _header: '' -->
-<!-- _backgroundColor: #001520 -->
+<!-- _backgroundColor: #000 -->
+
+# Web Engineering
+
+**DHBW Stuttgart** · Informatik / Wirtschaftsinformatik
+
+**Sommersemester 2026** · Sitzung 10 — Wrap-up & Projektsupport
+
+---
+
+<!-- _class: invert -->
+<!-- _backgroundColor: #000 -->

 # Best Practices

@@ -266,11 +283,9 @@ Don't refactor what isn't working yet.

 # Feedback – Sandwich-Methode

-```
-🍞  Lob / Positives
-🥬  Kritik + konkreter Verbesserungsvorschlag
-🍞  Lob / Abschluss
-```
+1. **Eröffnung** — Lob / positive Beobachtungen
+2. **Kern** — Kritik + konkreter Verbesserungsvorschlag
+3. **Abschluss** — Lob / wertschätzender Ausklang

 **Pitfalls:**
 - Am Thema vorbeireden
@@ -295,7 +310,7 @@ Don't refactor what isn't working yet.

 **Zusatzpunkte (max. 10):** TypeScript, Docker, Dev/Prod-Parity, `.env`, npm-Publish, Domain, HTTPS, Responsive Design.

-→ https://git.dailysh.it/DHBW/pruefungsleistung
+→ https://librete.ch/DHBW/pruefungsleistung

 ---

@@ -339,7 +354,7 @@ Don't refactor what isn't working yet.
 ---

 <!-- _class: invert -->
-<!-- _backgroundColor: #001520 -->
+<!-- _backgroundColor: #000 -->

 # Viel Erfolg mit den Projekten!

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="svg4232" width="541.333" height="226.114"><g id="layer1" transform="translate(-129.334 -393.59)"><path id="path84" d="M271.089 441.054v36.897c0 1.836-1.58 4.865-3.416 6.696l-37.58 37.58c-.92.918-1.86 1.367-2.46 1.367-.602 0-.957-.449-.957-1.367v4.1c0 1.836 1.58 3.416 3.416 3.416h81.857c1.837 0 3.416-1.58 3.416-3.416v-81.994c0-1.836-1.58-3.28-3.416-3.28Zm-52.066 85.273c0 1.836-1.585 3.416-3.416 3.416h-40.86v44.55c0 .918.36 1.367.956 1.367s1.405-.449 2.323-1.367l37.58-37.58c1.832-1.837 3.417-4.86 3.417-6.696Z" style="fill:#1a1a2e;fill-opacity:.5;fill-rule:nonzero;stroke:none"/><path id="path88" d="M270.132 394.59c-.604 0-1.541.449-2.46 1.367l-37.58 37.717c-1.831 1.831-3.416 4.723-3.416 6.56v81.993c0 1.837 1.585 1.837 3.416.00014999999996234692l37.58-37.58c1.837-1.837 3.417-4.86 3.417-6.696v-81.994c0-.918-.353-1.366-.957-1.366M133.75 441.055c-1.837 0-3.416 1.443-3.416 3.28v81.993c0 1.836 1.58 3.416 3.416 3.416h81.857c1.836 0 3.416-1.58 3.416-3.416v-81.994c0-1.836-1.58-3.28-3.416-3.28Z" style="fill:#1a1a2e;fill-opacity:.5;fill-rule:nonzero;stroke:none"/><path id="path100" d="M230.092 441.054c-1.836 0-3.416 1.58-3.416 3.416v77.757c0 .918.355 1.367.956 1.367.602 0 1.542-.449 2.46-1.367l37.58-37.58c1.837-1.837 3.417-4.865 3.417-6.696v-36.897Zm-12.026 5.603c-.606 0-1.541.453-2.46 1.366l-37.58 37.717c-1.83 1.87-3.28 4.728-3.28 6.56v37.443h40.86c1.837 0 3.417-1.58 3.417-3.416v-78.304c0-.913-.355-1.366-.957-1.366" style="fill:#1a1a2e;fill-opacity:.5;fill-rule:nonzero;stroke:none"/><path id="path238" d="M523.082 441.19c-.629 0-1.203.148-1.64.547-.448.404-.683.88-.683 1.503v84.18c0 .618.235 1.192.683 1.64a2.34 2.34 0 0 0 1.64.683h20.225c4.149 0 8.172-.628 11.89-1.776 3.716-1.165 6.914-2.766 9.702-4.92 2.793-2.18 4.968-4.87 6.56-8.063 1.59-3.186 2.459-6.816 2.459-10.795 0-2.75-.476-5.357-1.503-7.79-1.017-2.438-2.378-4.57-4.1-6.423-1.733-1.864-3.755-3.312-6.013-4.51a24.2 24.2 0 0 0-7.106-2.46c1.771-.53 3.553-1.398 5.466-2.595 1.908-1.192 3.734-2.646 5.33-4.373s2.902-3.712 3.963-5.877c1.066-2.17 1.64-4.45 1.64-6.832 0-3.81-.716-7.063-2.187-9.84-1.47-2.793-3.427-5.154-5.876-6.97-2.438-1.808-5.242-3.213-8.473-4.099-3.236-.88-6.646-1.23-10.112-1.23Zm61.358 0c-.617 0-1.098.153-1.503.547-.388.4-.453.885-.273 1.503l16.945 84.18c.18.607.607 1.192 1.093 1.64.487.432 1.028.683 1.64.683h6.696c.624 0 1.154-.251 1.64-.683.476-.448.777-1.033.957-1.64l14.485-74.204 14.623 74.204c.174.607.47 1.192.956 1.64.487.432 1.028.683 1.64.683h6.696c.629 0 1.192-.251 1.64-.683a3.9 3.9 0 0 0 .957-1.64l16.945-84.18c.186-.618.076-1.104-.273-1.503-.367-.394-.755-.547-1.367-.547h-5.33c-1.328 0-2.246.634-2.596 2.05l-13.119 74.34-14.622-74.34c-.356-1.416-1.115-2.05-2.46-2.05h-6.696c-1.41 0-2.252.634-2.596 2.05l-14.486 74.34-13.256-74.34c-.36-1.416-1.322-2.05-2.733-2.05Zm-53.979 7.79h14.486c4.974 0 9.047 1.312 12.162 3.963 3.1 2.65 4.647 6.28 4.647 10.796 0 2.3-.536 4.345-1.504 6.286-.984 1.946-2.224 3.651-3.826 5.056-1.59 1.421-3.433 2.482-5.466 3.28a17.5 17.5 0 0 1-6.423 1.23h-14.076Zm0 38.263h14.486c5.592 0 10.15 1.542 13.666 4.51 3.492 2.963 5.192 6.887 5.192 12.026 0 2.662-.382 5.16-1.366 7.379a17.2 17.2 0 0 1-4.1 5.74c-1.727 1.596-3.706 2.804-6.013 3.69a20.4 20.4 0 0 1-7.38 1.367l-14.485-.001Zm-117.523 62.725v20.225c0 .541.03 1.143.136 1.64.098.498.29.853.547 1.23a3.2 3.2 0 0 0 1.093.957c.426.224.967.273 1.64.273a3.8 3.8 0 0 0 1.093-.136c.404-.11.661-.301.82-.41l-.683-1.913-.547.41-.547.136c-.426 0-.781-.263-.956-.683-.18-.432-.274-.94-.274-1.64v-20.089Zm87.87 0v23.915h2.322v-12.162l.41-.82.82-1.094a6.6 6.6 0 0 1 1.367-.957c.48-.261.967-.409 1.503-.409.54 0 .95.164 1.366.41s.826.563 1.094.956c.273.389.399.886.546 1.367.148.487.273.913.273 1.367v11.342h2.324v-11.616c0-.694-.05-1.366-.274-2.05-.224-.688-.656-1.366-1.093-1.913-.432-.535-.967-.907-1.64-1.23a5.2 5.2 0 0 0-2.323-.547c-.585 0-1.137.176-1.64.41-.503.241-.978.503-1.366.82a5.8 5.8 0 0 0-.957.957l-.41.683v-9.429Zm46.735 0v23.915h2.324v-12.162l.41-.82.82-1.094c.37-.344.743-.705 1.23-.956a3.6 3.6 0 0 1 1.64-.41c.54 0 .945.164 1.366.41.415.246.825.563 1.093.956.267.389.4.886.546 1.367.143.487.274.913.274 1.367v11.342h2.323v-11.616c0-.694-.18-1.366-.41-2.05-.219-.688-.514-1.366-.956-1.913-.438-.535-.968-.907-1.64-1.23a5.15 5.15 0 0 0-2.323-.547c-.58 0-1.137.176-1.64.41-.503.241-.979.503-1.367.82a5.8 5.8 0 0 0-.957.957l-.41.683v-9.429Zm35.258 0v20.225c0 .541.026 1.143.136 1.64.093.498.284.853.547 1.23.256.366.53.738.956.957.427.224.968.273 1.64.273.334 0 .82-.022 1.23-.136.4-.11.667-.301.82-.41l-.683-1.913-.547.41-.683.136c-.42 0-.645-.263-.82-.683-.186-.432-.273-.94-.273-1.64v-20.089Zm-223.16 1.503v22.412h5.33c1.394 0 2.635-.345 3.827-.957 1.191-.6 2.28-1.41 3.143-2.46a11.9 11.9 0 0 0 2.05-3.69c.492-1.426.683-3.005.683-4.645a12.4 12.4 0 0 0-.82-4.51c-.52-1.328-1.132-2.356-2.05-3.28-.918-.918-2.033-1.694-3.28-2.186s-2.662-.684-4.1-.684Zm88.827 0v22.412h2.46v-10.66h9.156v10.66h2.46v-22.412h-2.46v9.703h-9.156v-9.703Zm-86.366 1.914h2.733c.967 0 1.842.278 2.7Line truncated
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="svg4232" width="541.333" height="226.114"><g id="layer1" transform="translate(-129.334 -393.59)"><path id="path84" d="M271.089 441.054v36.897c0 1.836-1.58 4.865-3.416 6.696l-37.58 37.58c-.92.918-1.86 1.367-2.46 1.367-.602 0-.957-.449-.957-1.367v4.1c0 1.836 1.58 3.416 3.416 3.416h81.857c1.837 0 3.416-1.58 3.416-3.416v-81.994c0-1.836-1.58-3.28-3.416-3.28Zm-52.066 85.273c0 1.836-1.585 3.416-3.416 3.416h-40.86v44.55c0 .918.36 1.367.956 1.367s1.405-.449 2.323-1.367l37.58-37.58c1.832-1.837 3.417-4.86 3.417-6.696Z" style="fill:#fff;fill-opacity:.5;fill-rule:nonzero;stroke:none"/><path id="path88" d="M270.132 394.59c-.604 0-1.541.449-2.46 1.367l-37.58 37.717c-1.831 1.831-3.416 4.723-3.416 6.56v81.993c0 1.837 1.585 1.837 3.416.00014999999996234692l37.58-37.58c1.837-1.837 3.417-4.86 3.417-6.696v-81.994c0-.918-.353-1.366-.957-1.366M133.75 441.055c-1.837 0-3.416 1.443-3.416 3.28v81.993c0 1.836 1.58 3.416 3.416 3.416h81.857c1.836 0 3.416-1.58 3.416-3.416v-81.994c0-1.836-1.58-3.28-3.416-3.28Z" style="fill:#fff;fill-opacity:.5;fill-rule:nonzero;stroke:none"/><path id="path100" d="M230.092 441.054c-1.836 0-3.416 1.58-3.416 3.416v77.757c0 .918.355 1.367.956 1.367.602 0 1.542-.449 2.46-1.367l37.58-37.58c1.837-1.837 3.417-4.865 3.417-6.696v-36.897Zm-12.026 5.603c-.606 0-1.541.453-2.46 1.366l-37.58 37.717c-1.83 1.87-3.28 4.728-3.28 6.56v37.443h40.86c1.837 0 3.417-1.58 3.417-3.416v-78.304c0-.913-.355-1.366-.957-1.366" style="fill:#fff;fill-opacity:.5;fill-rule:nonzero;stroke:none"/><path id="path238" d="M523.082 441.19c-.629 0-1.203.148-1.64.547-.448.404-.683.88-.683 1.503v84.18c0 .618.235 1.192.683 1.64a2.34 2.34 0 0 0 1.64.683h20.225c4.149 0 8.172-.628 11.89-1.776 3.716-1.165 6.914-2.766 9.702-4.92 2.793-2.18 4.968-4.87 6.56-8.063 1.59-3.186 2.459-6.816 2.459-10.795 0-2.75-.476-5.357-1.503-7.79-1.017-2.438-2.378-4.57-4.1-6.423-1.733-1.864-3.755-3.312-6.013-4.51a24.2 24.2 0 0 0-7.106-2.46c1.771-.53 3.553-1.398 5.466-2.595 1.908-1.192 3.734-2.646 5.33-4.373s2.902-3.712 3.963-5.877c1.066-2.17 1.64-4.45 1.64-6.832 0-3.81-.716-7.063-2.187-9.84-1.47-2.793-3.427-5.154-5.876-6.97-2.438-1.808-5.242-3.213-8.473-4.099-3.236-.88-6.646-1.23-10.112-1.23Zm61.358 0c-.617 0-1.098.153-1.503.547-.388.4-.453.885-.273 1.503l16.945 84.18c.18.607.607 1.192 1.093 1.64.487.432 1.028.683 1.64.683h6.696c.624 0 1.154-.251 1.64-.683.476-.448.777-1.033.957-1.64l14.485-74.204 14.623 74.204c.174.607.47 1.192.956 1.64.487.432 1.028.683 1.64.683h6.696c.629 0 1.192-.251 1.64-.683a3.9 3.9 0 0 0 .957-1.64l16.945-84.18c.186-.618.076-1.104-.273-1.503-.367-.394-.755-.547-1.367-.547h-5.33c-1.328 0-2.246.634-2.596 2.05l-13.119 74.34-14.622-74.34c-.356-1.416-1.115-2.05-2.46-2.05h-6.696c-1.41 0-2.252.634-2.596 2.05l-14.486 74.34-13.256-74.34c-.36-1.416-1.322-2.05-2.733-2.05Zm-53.979 7.79h14.486c4.974 0 9.047 1.312 12.162 3.963 3.1 2.65 4.647 6.28 4.647 10.796 0 2.3-.536 4.345-1.504 6.286-.984 1.946-2.224 3.651-3.826 5.056-1.59 1.421-3.433 2.482-5.466 3.28a17.5 17.5 0 0 1-6.423 1.23h-14.076Zm0 38.263h14.486c5.592 0 10.15 1.542 13.666 4.51 3.492 2.963 5.192 6.887 5.192 12.026 0 2.662-.382 5.16-1.366 7.379a17.2 17.2 0 0 1-4.1 5.74c-1.727 1.596-3.706 2.804-6.013 3.69a20.4 20.4 0 0 1-7.38 1.367l-14.485-.001Zm-117.523 62.725v20.225c0 .541.03 1.143.136 1.64.098.498.29.853.547 1.23a3.2 3.2 0 0 0 1.093.957c.426.224.967.273 1.64.273a3.8 3.8 0 0 0 1.093-.136c.404-.11.661-.301.82-.41l-.683-1.913-.547.41-.547.136c-.426 0-.781-.263-.956-.683-.18-.432-.274-.94-.274-1.64v-20.089Zm87.87 0v23.915h2.322v-12.162l.41-.82.82-1.094a6.6 6.6 0 0 1 1.367-.957c.48-.261.967-.409 1.503-.409.54 0 .95.164 1.366.41s.826.563 1.094.956c.273.389.399.886.546 1.367.148.487.273.913.273 1.367v11.342h2.324v-11.616c0-.694-.05-1.366-.274-2.05-.224-.688-.656-1.366-1.093-1.913-.432-.535-.967-.907-1.64-1.23a5.2 5.2 0 0 0-2.323-.547c-.585 0-1.137.176-1.64.41-.503.241-.978.503-1.366.82a5.8 5.8 0 0 0-.957.957l-.41.683v-9.429Zm46.735 0v23.915h2.324v-12.162l.41-.82.82-1.094c.37-.344.743-.705 1.23-.956a3.6 3.6 0 0 1 1.64-.41c.54 0 .945.164 1.366.41.415.246.825.563 1.093.956.267.389.4.886.546 1.367.143.487.274.913.274 1.367v11.342h2.323v-11.616c0-.694-.18-1.366-.41-2.05-.219-.688-.514-1.366-.956-1.913-.438-.535-.968-.907-1.64-1.23a5.15 5.15 0 0 0-2.323-.547c-.58 0-1.137.176-1.64.41-.503.241-.979.503-1.367.82a5.8 5.8 0 0 0-.957.957l-.41.683v-9.429Zm35.258 0v20.225c0 .541.026 1.143.136 1.64.093.498.284.853.547 1.23.256.366.53.738.956.957.427.224.968.273 1.64.273.334 0 .82-.022 1.23-.136.4-.11.667-.301.82-.41l-.683-1.913-.547.41-.683.136c-.42 0-.645-.263-.82-.683-.186-.432-.273-.94-.273-1.64v-20.089Zm-223.16 1.503v22.412h5.33c1.394 0 2.635-.345 3.827-.957 1.191-.6 2.28-1.41 3.143-2.46a11.9 11.9 0 0 0 2.05-3.69c.492-1.426.683-3.005.683-4.645a12.4 12.4 0 0 0-.82-4.51c-.52-1.328-1.132-2.356-2.05-3.28-.918-.918-2.033-1.694-3.28-2.186s-2.662-.684-4.1-.684Zm88.827 0v22.412h2.46v-10.66h9.156v10.66h2.46v-22.412h-2.46v9.703h-9.156v-9.703Zm-86.366 1.914h2.733c.967 0 1.842.278 2.733.683.88Line truncated
@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 675.012 183.973">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #0014eb;
+      }
+
+      .cls-2 {
+        fill: #0f1d49;
+      }
+    </style>
+  </defs>
+  <g>
+    <path class="cls-1" d="M83.783,96.187l1.194-2.545c.258-.551.516-1.102.775-1.653-3.815-9.283-6.973-18.834-9.493-28.557-3.775,4.027-6.94,8.648-9.325,13.723,3.334,9.124,7.925,17.758,13.666,25.635,1.092-2.197,2.15-4.405,3.183-6.601h0Z"/>
+    <path class="cls-1" d="M78.4,107.042c-5.629-7.417-10.255-15.511-13.803-24.066-1.771,5.321-2.744,11.014-2.744,16.941v7.112c3.316,3.89,6.348,8.026,9.068,12.389,2.76-3.905,5.214-8.086,7.479-12.375h0Z"/>
+    <path class="cls-1" d="M61.853,113.839v16.037c2.269-2.084,4.361-4.358,6.303-6.778-1.93-3.212-4.035-6.301-6.303-9.258h0Z"/>
+    <path class="cls-1" d="M88.258,86.704c1.642-3.407,3.344-6.8,5.177-10.114-.097-5.355-.501-10.547-.914-15.577-.242-2.949-.486-5.95-.67-9.016-4.391,2.098-8.441,4.803-12.058,8.004,2.251,9.074,5.072,18,8.467,26.705l-.002-.002Z"/>
+    <path class="cls-1" d="M96.776,60.642c.246,3.002.489,6.065.673,9.19,2.892-4.491,6.14-8.733,9.939-12.541,4.04-4.05,8.704-7.543,13.716-10.335h-7.04c-6.335,0-12.406,1.147-18.024,3.245.185,3.551.457,7.037.737,10.443h0Z"/>
+  </g>
+  <g>
+    <path class="cls-1" d="M110.373,60.373c-4.48,4.493-8.183,9.703-11.459,15.246,8.014-2.166,16.174-3.708,24.408-4.619v-20.35c-4.735,2.616-9.141,5.904-12.949,9.723Z"/>
+    <path class="cls-1" d="M95.934,80.957c-1.595,3.005-3.102,6.07-4.565,9.141,8.126-.279,16.163-.578,24.191-.878,2.32-.086,4.641-.173,6.963-.26.517-2.989.8-6.059.8-9.198v-4.395c-9.173,1.037-18.249,2.873-27.124,5.513l-.265.08v-.002Z"/>
+    <path class="cls-1" d="M72.847,124.067c-2.333,3.089-4.882,5.996-7.71,8.639h6c8.762,0,17.013-2.202,24.264-6.074-7.627-1.82-15.281-2.694-22.555-2.567h.001Z"/>
+    <path class="cls-1" d="M106.33,110.057c-8.522,0-16.678-.296-24.308-.671-1.881,3.546-3.895,7.026-6.104,10.357,8.016.16,16.384,1.432,24.63,3.765,5.256-3.645,9.816-8.243,13.452-13.543-2.582.057-5.146.093-7.67.093Z"/>
+    <path class="cls-1" d="M116.693,105.553c2.102-3.813,3.754-7.913,4.88-12.234-1.957.074-3.914.147-5.87.22-8.765.328-17.534.655-26.428.956-.156.333-.313.668-.468,1l-1.197,2.551c-1.11,2.361-2.248,4.736-3.428,7.099,10.083.47,21.057.763,32.513.407h-.001Z"/>
+  </g>
+  <path class="cls-2" d="M177.362,82.924c-.227-.144-.465-.287-.712-.432l-13.313-7.752c-.905-20.777-7.433-38.901-17.945-49.778-3.052-3.169-6.288-5.824-9.618-7.891l-4.12-2.566,9.053-3.31-3.902-11.196-32.089,8.172,17.576,29.751,9.693-6.675-5.823-8.703c3.881,2.557,8.848,6.623,8.871,6.637,11.384,9.112,17.014,25.23,17.717,50.721l.012.472,19.982,11.56-19.982,11.56-.012.471c-.955,34.671-10.778,52.131-32.773,58.363l-2.254.426.053,4.97-.057,5.046.974-.167c4.819-.825,8.19-1.825,8.305-1.861,6.062-1.601,12.595-5.801,18.39-11.82,10.511-10.666,17.042-28.791,17.95-49.781l20.629-11.301v-11.065l-6.603-3.852Z"/>
+  <path class="cls-2" d="M52.834,152.219l-.851.593,7.027,9.689c-4.238-2.748-8.916-6.59-9.888-7.431l-.037-.036-.06-.083-.092-.074c-11.384-9.112-17.013-25.229-17.717-50.721l-.013-.471-19.982-11.56,19.982-11.56.013-.472c.955-34.671,10.778-52.131,32.773-58.363l2.255-.425-.054-4.969.057-4.775-.925.101c-4.826.522-8.255,1.62-8.356,1.654-6.062,1.601-12.595,5.801-18.388,11.82-10.511,10.664-17.042,28.791-17.952,49.782L0,86.218v11.066l6.603,3.852c.227.144.463.288.711.432l13.313,7.752c.905,20.777,7.435,38.901,17.946,49.779,3.024,3.133,6.201,5.749,9.407,7.754l5.13,3.587-8.442,2.336,3.904,11.198,29.159-6.087-16.055-31.75-8.84,6.083h-.001Z"/>
+  <path class="cls-2" d="M662.144,57.197h12.867v109.694h-12.867v-38.28h-.322c-4.825,7.077-12.546,12.867-26.059,12.867-20.266,0-36.672-16.245-36.672-43.267s16.406-43.267,36.672-43.267c13.513,0,21.234,6.112,26.059,12.385h.322v-10.133ZM637.372,130.219c15.283,0,24.772-12.707,24.772-32.008s-9.49-32.008-24.772-32.008c-16.888,0-25.413,15.923-25.413,32.008s8.525,32.008,25.413,32.008Z"/>
+  <path class="cls-2" d="M561.725,54.945c14.958,0,27.504,8.203,27.504,27.021v57.26h-12.867v-54.043c0-10.616-4.986-18.979-17.854-18.979-14.476,0-24.126,9.168-24.126,21.875v51.148h-12.867V57.197h12.867v9.811h.322c4.343-5.79,13.028-12.063,27.021-12.063Z"/>
+  <rect class="cls-2" x="492.568" y="57.199" width="12.867" height="82.03"/>
+  <path class="cls-2" d="M468.997,86.792c-.643-9.007-6.755-20.588-23.161-20.588-19.462,0-26.861,16.567-26.861,32.008s7.399,32.008,26.861,32.008c16.567,0,22.518-11.42,23.161-21.231h12.867c-1.126,18.658-15.763,32.49-36.029,32.49-23.966,0-39.728-17.532-39.728-43.267s15.763-43.267,39.728-43.267c20.266,0,34.099,13.511,36.029,31.847h-12.867Z"/>
+  <path class="cls-2" d="M332.383,130.219c16.406,0,22.518-10.616,23.965-16.245h12.867c-4.182,15.28-15.923,27.504-36.35,27.504-24.931,0-40.05-17.532-40.05-43.267,0-27.343,15.441-43.267,39.406-43.267,25.735,0,38.28,17.532,38.28,46.644h-64.819c0,14.797,8.846,28.63,26.7,28.63ZM332.223,66.204c-15.441,0-26.539,10.937-26.539,24.126h51.952c0-13.189-9.972-24.126-25.413-24.126Z"/>
+  <path class="cls-2" d="M284.574,54.945c3.056,0,5.308.161,7.56.483v12.867h-.322c-17.854-2.895-30.238,9.651-30.238,27.182v43.749h-12.867V57.197h12.867v16.245h.322c4.343-10.776,10.937-18.497,22.679-18.497Z"/>
+  <circle class="cls-2" cx="499.241" cy="39.864" r="8.499"/>
+  <g>
+    <circle class="cls-2" cx="388.676" cy="77.162" r="7.895"/>
+    <circle class="cls-2" cx="388.676" cy="119.262" r="7.895"/>
+  </g>
+</svg>
Author	SHA1	Message	Date
libretech	c242e0f947	dhbw inhalt: vorlesungsplan tabelle → cards-grid (4×3, milestones hervorgehoben), über-mich logos-collage, internet-101 erweitert (timeline + arpanet-bg + WWW-1989 + mosaic-bg + unterseekabel + heute + five-eyes), a11y/WCAG-block (~12 slides nach native html, vor css), direkt-install slide gesplittet (szenario / symptome), code-block-color → #f48fb1 (alle 8 files), section.invert h2 #f48fb1 für barrierefreiheit, ressourcen-slide auf 01-05 nach cover, alle emojis raus (✓✗⚠️🍞🥬🏆 + ↔), ESM statt CJS in 03/04, librete.ch domain, kleinere fixes (chromium statt chrome, CLI aufgelöst, JetBrains edu, hoppscotch, SOLID-abk., node 24 LTS, brew/winget/scoop/choco-links, vim/neovim/emacs editoren, herzlich willkommen)	2026-05-07 17:09:04 +02:00
libretech	52312f1cb8	dhbw assets: arpanet 1969 + arpanet 90er, mosaic-screenshot, unterseekabel-karte für internet-101 + 5 a11y-demos (kontrast, fokus, error, semantik, keyboard) für barrierefreiheit-block	2026-05-07 17:08:46 +02:00
libretech	e2bab75e60	dhbw assets: 13 logos (uni-stuttgart, dhbw, klett, pons, langenscheidt, nextmarkets, re-cinq, experience-one, becklyn, caesargustav) + collage.png für über-mich-slide, dark-varianten der weiß-auf-transparent-logos	2026-05-07 15:29:45 +02:00
libretech	b242c7b4e6	223015c 02 + dhbw 01: klausurfolien markiert, prosa-sätze bei allen tabellen, layout-fixes 223015c/02: - glossar landkarte: klausur, prosa, reihenfolge (host→client→server→req→res→protokoll), tcp/http als beispiel - glossar adressen/daten/eigenschaften/protokolle: prosa-sätze - tcp/ip-modell: nichtssagenden satz ersetzt - dateneinheiten: merkhilfe durch prosa ersetzt - osi vs tcp/ip: bg right statt h:440, prosa statt einzeiler - port: tabelle→liste, prosa statt bullets - ip vs mac vs port: prosa - tcp vs udp, http-methoden, status-codes, einheiten: prosa - selektoren id + farben: klausur markiert - farben: mdn-link, prosa-satz dhbw/01: - farben: prosa-satz synchronisiert - über-mich: collage-bild hinzugefügt	2026-05-07 15:21:40 +02:00
libretech	46b297ada4	dhbw 01_web_eng: direkt-install slide ausgebaut (szenario, symptome), du-formen entfernt (sachlich/akademisch), editor-liste vim/neovim/emacs (helix raus), git inline erklärt	2026-05-07 14:48:33 +02:00
libretech	8dabc4e570	dhbw farb-schema: himbeer (wie hdm 223015c) — highlight #d63384, h1 #a02060, h2 #1f2937 (#f48fb1 auf invert für barrierearmut), pre/code #0f0f23/#d63384, dimmed #4a4a6a, invert-bg #001520→#000; herzlich willkommen statt willkommen; git kurz erklärt	2026-05-07 14:41:07 +02:00
libretech	6b33a79d9c	dhbw 01_web_eng: über-mich aktualisiert (systems & platform engineer, dhbw-mail), onboarding-block (werkzeuge/os, node-install pro os mit lts node 24, versionsmanager, alternative runtimes deno/bun, editor, browser-devtools, http-clients, git setup, projekt-skeleton), html-block aus hdm (was ist html, anatomie, metadaten, tags+attribute, native html), css-block aus hdm (selektoren, spezifität, box-modell, farben, einheiten, pseudo-klassen, responsive), mandala-PNG mit erklärungs-folie, font 1.7→1.4rem, semesterplan + prüfungsleistung details, ascii-browser-request raus (PNG bleibt), kleine fixes (chromium statt chrome, cli aufgelöst, brew-link, jetbrains edu, hoppscotch, solid abkürzungen aufgelöst)	2026-05-07 14:21:19 +02:00
libretech	a07ab0a3d1	dhbw 02_css_extended: native html-block + basic-selektoren + basic-pseudoclasses + specificity raus (jetzt in 01), einheitliche cover (sitzung 2 — html & css frameworks), font 1.7→1.4rem, fragen-slide raus	2026-05-07 14:21:00 +02:00
libretech	5c25b14a59	dhbw 03-04 (node.js basics+advanced): cjs → esm in code-beispielen (import + node:-präfix), legacy-cjs als vergleichsbeispiel markiert, einheitliche cover, font 1.7→1.4rem, fragen-slides raus, __dirname/__filename via import.meta.url	2026-05-07 14:20:46 +02:00
libretech	79fbe046d9	dhbw 05-08 (testing/typescript/docker/best-practices): einheitliche cover (web engineering / dhbw stuttgart / sose 2026 · sitzung x), font 1.7→1.4rem, fragen+hausaufgabe-slides raus (kein klausur an dhbw)	2026-05-07 14:20:35 +02:00
libretech	4b267bcb8b	dhbw assets: html/css demo-pngs aus hdm kopiert (20 files) + web-engineering-mandala.png	2026-05-07 14:20:20 +02:00
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" id="svg4232" width="541.333" height="226.114"><g id="layer1" transform="translate(-129.334 -393.59)"><path id="path84" d="M271.089 441.054v36.897c0 1.836-1.58 4.865-3.416 6.696l-37.58 37.58c-.92.918-1.86 1.367-2.46 1.367-.602 0-.957-.449-.957-1.367v4.1c0 1.836 1.58 3.416 3.416 3.416h81.857c1.837 0 3.416-1.58 3.416-3.416v-81.994c0-1.836-1.58-3.28-3.416-3.28Zm-52.066 85.273c0 1.836-1.585 3.416-3.416 3.416h-40.86v44.55c0 .918.36 1.367.956 1.367s1.405-.449 2.323-1.367l37.58-37.58c1.832-1.837 3.417-4.86 3.417-6.696Z" style="fill:#1a1a2e;fill-opacity:.5;fill-rule:nonzero;stroke:none"/><path id="path88" d="M270.132 394.59c-.604 0-1.541.449-2.46 1.367l-37.58 37.717c-1.831 1.831-3.416 4.723-3.416 6.56v81.993c0 1.837 1.585 1.837 3.416.00014999999996234692l37.58-37.58c1.837-1.837 3.417-4.86 3.417-6.696v-81.994c0-.918-.353-1.366-.957-1.366M133.75 441.055c-1.837 0-3.416 1.443-3.416 3.28v81.993c0 1.836 1.58 3.416 3.416 3.416h81.857c1.836 0 3.416-1.58 3.416-3.416v-81.994c0-1.836-1.58-3.28-3.416-3.28Z" style="fill:#1a1a2e;fill-opacity:.5;fill-rule:nonzero;stroke:none"/><path id="path100" d="M230.092 441.054c-1.836 0-3.416 1.58-3.416 3.416v77.757c0 .918.355 1.367.956 1.367.602 0 1.542-.449 2.46-1.367l37.58-37.58c1.837-1.837 3.417-4.865 3.417-6.696v-36.897Zm-12.026 5.603c-.606 0-1.541.453-2.46 1.366l-37.58 37.717c-1.83 1.87-3.28 4.728-3.28 6.56v37.443h40.86c1.837 0 3.417-1.58 3.417-3.416v-78.304c0-.913-.355-1.366-.957-1.366" style="fill:#1a1a2e;fill-opacity:.5;fill-rule:nonzero;stroke:none"/><path id="path238" d="M523.082 441.19c-.629 0-1.203.148-1.64.547-.448.404-.683.88-.683 1.503v84.18c0 .618.235 1.192.683 1.64a2.34 2.34 0 0 0 1.64.683h20.225c4.149 0 8.172-.628 11.89-1.776 3.716-1.165 6.914-2.766 9.702-4.92 2.793-2.18 4.968-4.87 6.56-8.063 1.59-3.186 2.459-6.816 2.459-10.795 0-2.75-.476-5.357-1.503-7.79-1.017-2.438-2.378-4.57-4.1-6.423-1.733-1.864-3.755-3.312-6.013-4.51a24.2 24.2 0 0 0-7.106-2.46c1.771-.53 3.553-1.398 5.466-2.595 1.908-1.192 3.734-2.646 5.33-4.373s2.902-3.712 3.963-5.877c1.066-2.17 1.64-4.45 1.64-6.832 0-3.81-.716-7.063-2.187-9.84-1.47-2.793-3.427-5.154-5.876-6.97-2.438-1.808-5.242-3.213-8.473-4.099-3.236-.88-6.646-1.23-10.112-1.23Zm61.358 0c-.617 0-1.098.153-1.503.547-.388.4-.453.885-.273 1.503l16.945 84.18c.18.607.607 1.192 1.093 1.64.487.432 1.028.683 1.64.683h6.696c.624 0 1.154-.251 1.64-.683.476-.448.777-1.033.957-1.64l14.485-74.204 14.623 74.204c.174.607.47 1.192.956 1.64.487.432 1.028.683 1.64.683h6.696c.629 0 1.192-.251 1.64-.683a3.9 3.9 0 0 0 .957-1.64l16.945-84.18c.186-.618.076-1.104-.273-1.503-.367-.394-.755-.547-1.367-.547h-5.33c-1.328 0-2.246.634-2.596 2.05l-13.119 74.34-14.622-74.34c-.356-1.416-1.115-2.05-2.46-2.05h-6.696c-1.41 0-2.252.634-2.596 2.05l-14.486 74.34-13.256-74.34c-.36-1.416-1.322-2.05-2.733-2.05Zm-53.979 7.79h14.486c4.974 0 9.047 1.312 12.162 3.963 3.1 2.65 4.647 6.28 4.647 10.796 0 2.3-.536 4.345-1.504 6.286-.984 1.946-2.224 3.651-3.826 5.056-1.59 1.421-3.433 2.482-5.466 3.28a17.5 17.5 0 0 1-6.423 1.23h-14.076Zm0 38.263h14.486c5.592 0 10.15 1.542 13.666 4.51 3.492 2.963 5.192 6.887 5.192 12.026 0 2.662-.382 5.16-1.366 7.379a17.2 17.2 0 0 1-4.1 5.74c-1.727 1.596-3.706 2.804-6.013 3.69a20.4 20.4 0 0 1-7.38 1.367l-14.485-.001Zm-117.523 62.725v20.225c0 .541.03 1.143.136 1.64.098.498.29.853.547 1.23a3.2 3.2 0 0 0 1.093.957c.426.224.967.273 1.64.273a3.8 3.8 0 0 0 1.093-.136c.404-.11.661-.301.82-.41l-.683-1.913-.547.41-.547.136c-.426 0-.781-.263-.956-.683-.18-.432-.274-.94-.274-1.64v-20.089Zm87.87 0v23.915h2.322v-12.162l.41-.82.82-1.094a6.6 6.6 0 0 1 1.367-.957c.48-.261.967-.409 1.503-.409.54 0 .95.164 1.366.41s.826.563 1.094.956c.273.389.399.886.546 1.367.148.487.273.913.273 1.367v11.342h2.324v-11.616c0-.694-.05-1.366-.274-2.05-.224-.688-.656-1.366-1.093-1.913-.432-.535-.967-.907-1.64-1.23a5.2 5.2 0 0 0-2.323-.547c-.585 0-1.137.176-1.64.41-.503.241-.978.503-1.366.82a5.8 5.8 0 0 0-.957.957l-.41.683v-9.429Zm46.735 0v23.915h2.324v-12.162l.41-.82.82-1.094c.37-.344.743-.705 1.23-.956a3.6 3.6 0 0 1 1.64-.41c.54 0 .945.164 1.366.41.415.246.825.563 1.093.956.267.389.4.886.546 1.367.143.487.274.913.274 1.367v11.342h2.323v-11.616c0-.694-.18-1.366-.41-2.05-.219-.688-.514-1.366-.956-1.913-.438-.535-.968-.907-1.64-1.23a5.15 5.15 0 0 0-2.323-.547c-.58 0-1.137.176-1.64.41-.503.241-.979.503-1.367.82a5.8 5.8 0 0 0-.957.957l-.41.683v-9.429Zm35.258 0v20.225c0 .541.026 1.143.136 1.64.093.498.284.853.547 1.23.256.366.53.738.956.957.427.224.968.273 1.64.273.334 0 .82-.022 1.23-.136.4-.11.667-.301.82-.41l-.683-1.913-.547.41-.683.136c-.42 0-.645-.263-.82-.683-.186-.432-.273-.94-.273-1.64v-20.089Zm-223.16 1.503v22.412h5.33c1.394 0 2.635-.345 3.827-.957 1.191-.6 2.28-1.41 3.143-2.46a11.9 11.9 0 0 0 2.05-3.69c.492-1.426.683-3.005.683-4.645a12.4 12.4 0 0 0-.82-4.51c-.52-1.328-1.132-2.356-2.05-3.28-.918-.918-2.033-1.694-3.28-2.186s-2.662-.684-4.1-.684Zm88.827 0v22.412h2.46v-10.66h9.156v10.66h2.46v-22.412h-2.46v9.703h-9.156v-9.703Zm-86.366 1.914h2.733c.967 0 1.842.278 2.7Line truncated