diff --git a/design/CSS_GUIDE.md b/design/CSS_GUIDE.md
new file mode 100644
index 0000000..39cc103
--- /dev/null
+++ b/design/CSS_GUIDE.md
@@ -0,0 +1,137 @@
+# CSS_GUIDE.md
+
+## Zweck
+Dieses Dokument beschreibt die Nutzung der CSS-Design-Tokens aus `tokens.css`.
+
+Ziel ist eine konsistente, wartbare und wiedererkennbare UI, unabhängig vom Framework oder Projekt.
+
+---
+
+## Grundregeln
+
+- Keine Hardcodes für Farben, Schriften oder Abstände
+- Nutzung ausschließlich über CSS-Variablen
+- Tokens sind stabiler als Klassen
+
+Regel:
+> Wenn ein Wert nicht aus `:root` kommt, gehört er dort hin.
+
+---
+
+## Einbindung
+
+```html
+<link rel="stylesheet" href="tokens.css" />
+```
+
+Frameworks (Beispiele):
+- React / Vue: global importieren
+- NiceGUI / Gradio: über Custom CSS
+
+---
+
+## Farben verwenden
+
+```css
+.header {
+  background: var(--color-primary);
+  color: var(--color-surface);
+}
+
+.link {
+  color: var(--color-accent);
+}
+
+.error {
+  color: var(--color-error);
+}
+```
+
+Regeln:
+- Akzentfarbe nur für Interaktion
+- Error-Farbe ausschließlich für Fehler
+
+---
+
+## Typografie
+
+```css
+h1, h2, h3 {
+  font-weight: 600;
+}
+
+p {
+  font-size: var(--font-size-md);
+}
+
+code {
+  font-family: var(--font-mono);
+}
+```
+
+Keine zusätzliche Schriftdefinition pro Komponente.
+
+---
+
+## Spacing
+
+```css
+.card {
+  padding: var(--space-4);
+  margin-bottom: var(--space-5);
+}
+```
+
+Regel:
+- Abstände folgen dem 8-px-Grid
+- keine krummen Werte
+
+---
+
+## Border & Radius
+
+```css
+.panel {
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+}
+```
+
+Rahmen sind funktional, nicht dekorativ.
+
+---
+
+## Shadows
+
+```css
+.dropdown {
+  box-shadow: var(--shadow-sm);
+}
+```
+
+Schatten sparsam einsetzen.
+
+---
+
+## Erweiterungen
+
+- Dark Mode: eigenes Token-Set (`[data-theme="dark"]`)
+- Projekt-spezifische Tokens dürfen ergänzt, aber nicht ersetzt werden
+
+---
+
+## Anti-Patterns
+
+- Inline-Styles mit festen Farben
+- Kopierte Farbwerte aus Design-Tools
+- Magic Numbers
+
+Wenn ein UI inkonsistent wirkt, liegt es fast immer an Regelbruch hier.
+
+---
+
+## Status
+
+Version: v1.0 (Baseline)
+
+Dieses Dokument ergänzt `DESIGN.md` und ist verbindlich für Web-UIs.
diff --git a/design/component_guide.md b/design/component_guide.md
new file mode 100644
index 0000000..ef5eba8
--- /dev/null
+++ b/design/component_guide.md
@@ -0,0 +1,117 @@
+# COMPONENT_GUIDE.md
+
+## Zweck
+Dieses Dokument beschreibt die **standardisierten UI-Komponenten** für Buttons und Forms.
+
+Ziel:
+- konsistentes Look & Feel
+- vorhersehbare Interaktion
+- minimale Variantenvielfalt
+
+---
+
+## Buttons
+
+### Grundregel
+
+Buttons sind **Aktionen**, keine Dekoration.
+
+Maximal **eine Primary-Action pro View**.
+
+---
+
+### Button-Typen
+
+#### Primary
+- wichtigste Aktion
+- nutzt Akzentfarbe
+
+```html
+<button class="button primary">Speichern</button>
+```
+
+#### Secondary
+- alternative Aktionen
+- kein visueller Fokus
+
+```html
+<button class="button secondary">Abbrechen</button>
+```
+
+#### Danger
+- destruktive Aktionen
+- immer bewusst einsetzen
+
+```html
+<button class="button danger">Löschen</button>
+```
+
+---
+
+### Disabled State
+
+```html
+<button class="button primary" disabled>Speichern</button>
+```
+
+Disabled bedeutet: Aktion derzeit nicht möglich – nicht verstecken.
+
+---
+
+## Forms
+
+### Struktur
+
+```html
+<div class="form-group">
+  <label>Name</label>
+  <input type="text" />
+  <div class="hint">Pflichtfeld</div>
+</div>
+```
+
+---
+
+### Validierung
+
+```html
+<div class="form-group form-error">
+  <label>Email</label>
+  <input type="email" />
+  <div class="hint">Ungültige Adresse</div>
+</div>
+```
+
+Regeln:
+- Fehler sind sichtbar
+- keine Farbcodes ohne Text
+
+---
+
+## Do / Don’t
+
+### Do
+- klare Button-Texte
+- konsistente Platzierung
+- sichtbare Fokus-Zustände
+
+### Don’t
+- Icons ohne Text
+- mehrere Primary-Buttons
+- versteckte Fehlermeldungen
+
+---
+
+## Erweiterbarkeit
+
+- weitere Komponenten dürfen ergänzt werden
+- bestehende Klassen nicht brechen
+- Tokens bleiben die Grundlage
+
+---
+
+## Status
+
+Version: **v1.0 (Baseline)**
+
+Dieses Dokument ergänzt `DESIGN.md` und `CSS_GUIDE.md`.
diff --git a/design/components.css b/design/components.css
new file mode 100644
index 0000000..57e52d1
--- /dev/null
+++ b/design/components.css
@@ -0,0 +1,127 @@
+/*
+ wlkns-dev-standards
+ UI Components – Buttons & Forms
+ Version: v1.0
+
+ Zweck:
+ Standardisierte UI-Bausteine auf Basis von tokens.css.
+ Fokus: Buttons, Inputs, Forms.
+*/
+
+/* =========================
+   Buttons
+   ========================= */
+
+.button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-2);
+
+  padding: var(--space-2) var(--space-4);
+  font-size: var(--font-size-sm);
+  font-weight: 500;
+
+  border-radius: var(--radius-md);
+  border: 1px solid transparent;
+  cursor: pointer;
+
+  background: none;
+  color: var(--color-text);
+}
+
+.button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Primary */
+.button.primary {
+  background: var(--color-accent);
+  color: #ffffff;
+}
+
+.button.primary:hover {
+  filter: brightness(0.95);
+}
+
+/* Secondary */
+.button.secondary {
+  border-color: var(--color-border);
+  background: var(--color-surface);
+}
+
+.button.secondary:hover {
+  background: var(--color-bg);
+}
+
+/* Danger */
+.button.danger {
+  background: var(--color-error);
+  color: #ffffff;
+}
+
+.button.danger:hover {
+  filter: brightness(0.95);
+}
+
+/* =========================
+   Forms
+   ========================= */
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  margin-bottom: var(--space-4);
+}
+
+label {
+  font-size: var(--font-size-sm);
+  color: var(--color-text-muted);
+}
+
+input,
+select,
+textarea {
+  padding: var(--space-2) var(--space-3);
+  font-family: var(--font-ui);
+  font-size: var(--font-size-sm);
+
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  background: var(--color-surface);
+  color: var(--color-text);
+}
+
+input:focus,
+select:focus,
+textarea:focus {
+  outline: none;
+  border-color: var(--color-accent);
+}
+
+input:disabled,
+select:disabled,
+textarea:disabled {
+  background: var(--color-bg);
+  color: var(--color-text-muted);
+}
+
+/* Validation */
+
+.form-error input,
+.form-error textarea,
+.form-error select {
+  border-color: var(--color-error);
+}
+
+.form-error .hint {
+  color: var(--color-error);
+}
+
+.hint {
+  font-size: var(--font-size-xs);
+  color: var(--color-text-muted);
+}
+
diff --git a/design/components_states.css b/design/components_states.css
new file mode 100644
index 0000000..e3aaf88
--- /dev/null
+++ b/design/components_states.css
@@ -0,0 +1,68 @@
+/*
+ wlkns-dev-standards
+ UI States – Empty, Loading, Bulk Actions
+ Version: v1.0
+
+ Zweck:
+ Einheitliche Zustände für Admin- und Tool-UIs.
+*/
+
+/* =========================
+   Empty State
+   ========================= */
+
+.empty-state {
+  text-align: center;
+  padding: var(--space-6);
+  color: var(--color-text-muted);
+}
+
+.empty-state h3 {
+  margin-bottom: var(--space-2);
+  font-size: var(--font-size-md);
+  color: var(--color-text);
+}
+
+.empty-state p {
+  margin-bottom: var(--space-4);
+}
+
+/* =========================
+   Loading State
+   ========================= */
+
+.loading-overlay {
+  position: absolute;
+  inset: 0;
+  background: rgba(248, 250, 252, 0.8);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--font-size-sm);
+  color: var(--color-text-muted);
+}
+
+/* =========================
+   Bulk Actions
+   ========================= */
+
+.bulk-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--space-3) var(--space-4);
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  margin-bottom: var(--space-4);
+}
+
+.bulk-bar .count {
+  font-size: var(--font-size-sm);
+}
+
+.bulk-bar .actions {
+  display: flex;
+  gap: var(--space-2);
+}
+
diff --git a/design/components_tables_alerts.css b/design/components_tables_alerts.css
new file mode 100644
index 0000000..a47c4b8
--- /dev/null
+++ b/design/components_tables_alerts.css
@@ -0,0 +1,126 @@
+/*
+ wlkns-dev-standards
+ UI Components – Tables, Lists, Alerts & Toasts
+ Version: v1.0
+
+ Zweck:
+ Erweiterung der Component-Bibliothek für typische Admin-UIs.
+ Fokus: Tabellen, Listen, Alerts, Toasts.
+*/
+
+/* =========================
+   Tables
+   ========================= */
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--font-size-sm);
+}
+
+thead {
+  background: var(--color-bg);
+}
+
+thead th {
+  text-align: left;
+  padding: var(--space-3);
+  border-bottom: 1px solid var(--color-border);
+  color: var(--color-text-muted);
+  font-weight: 500;
+}
+
+tbody td {
+  padding: var(--space-3);
+  border-bottom: 1px solid var(--color-border);
+}
+
+tbody tr:hover {
+  background: var(--color-bg);
+}
+
+/* =========================
+   Lists
+   ========================= */
+
+.list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+.list-item {
+  padding: var(--space-3);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  background: var(--color-surface);
+}
+
+.list-item-title {
+  font-weight: 500;
+}
+
+.list-item-meta {
+  font-size: var(--font-size-xs);
+  color: var(--color-text-muted);
+}
+
+/* =========================
+   Alerts
+   ========================= */
+
+.alert {
+  padding: var(--space-3) var(--space-4);
+  border-radius: var(--radius-sm);
+  font-size: var(--font-size-sm);
+  border: 1px solid transparent;
+}
+
+.alert.success {
+  background: rgba(22, 163, 74, 0.1);
+  border-color: var(--color-success);
+  color: var(--color-success);
+}
+
+.alert.warning {
+  background: rgba(217, 119, 6, 0.1);
+  border-color: var(--color-warning);
+  color: var(--color-warning);
+}
+
+.alert.error {
+  background: rgba(220, 38, 38, 0.1);
+  border-color: var(--color-error);
+  color: var(--color-error);
+}
+
+/* =========================
+   Toasts
+   ========================= */
+
+.toast {
+  position: fixed;
+  bottom: var(--space-5);
+  right: var(--space-5);
+  min-width: 260px;
+
+  padding: var(--space-3) var(--space-4);
+  border-radius: var(--radius-md);
+  font-size: var(--font-size-sm);
+
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  box-shadow: var(--shadow-sm);
+}
+
+.toast.success {
+  border-left: 4px solid var(--color-success);
+}
+
+.toast.warning {
+  border-left: 4px solid var(--color-warning);
+}
+
+.toast.error {
+  border-left: 4px solid var(--color-error);
+}
diff --git a/design/feedback_guide.md b/design/feedback_guide.md
new file mode 100644
index 0000000..3e6635b
--- /dev/null
+++ b/design/feedback_guide.md
@@ -0,0 +1,91 @@
+# FEEDBACK_GUIDE.md
+
+## Zweck
+Dieses Dokument definiert **konsistentes visuelles Feedback** in Form von Alerts und Toasts.
+
+Ziel:
+- klare Zustände
+- keine Überraschungen
+- sofort verständliche Rückmeldungen
+
+---
+
+## Grundregeln
+
+- Feedback ist immer sichtbar
+- Feedback ist textlich eindeutig
+- Farbe unterstützt – ersetzt aber nicht die Aussage
+
+---
+
+## Alerts
+
+Alerts sind **statisch** und kontextgebunden.
+
+Typische Nutzung:
+- Formularfehler
+- Systemzustände
+- Konfigurationsprobleme
+
+### Beispiele
+
+```html
+<div class="alert success">Einstellungen gespeichert</div>
+<div class="alert warning">Unvollständige Konfiguration</div>
+<div class="alert error">Speichern fehlgeschlagen</div>
+```
+
+Regeln:
+- Alert steht nahe am betroffenen Inhalt
+- kein automatisches Verschwinden
+
+---
+
+## Toasts
+
+Toasts sind **temporär** und nicht blockierend.
+
+Typische Nutzung:
+- Erfolgsmeldungen
+- kurze Hinweise
+- Hintergrundaktionen
+
+### Beispiel
+
+```html
+<div class="toast success">Änderungen übernommen</div>
+```
+
+Regeln:
+- niemals kritisch
+- immer zeitlich begrenzt
+- dürfen ignoriert werden
+
+---
+
+## Wann was?
+
+| Situation | Element |
+|---------|---------|
+| Formular ungültig | Alert |
+| Aktion erfolgreich | Toast |
+| Kritischer Fehler | Alert |
+| Hintergrundinfo | Toast |
+
+---
+
+## Anti-Patterns
+
+- Toasts für Fehler
+- Alerts ohne Text
+- Farben ohne Bedeutung
+- mehrere Feedback-Typen gleichzeitig
+
+---
+
+## Status
+
+Version: **v1.0 (Baseline)**
+
+Dieses Dokument ergänzt `COMPONENT_GUIDE.md`.
+
diff --git a/design/form-patterns.css b/design/form-patterns.css
new file mode 100644
index 0000000..13d6072
--- /dev/null
+++ b/design/form-patterns.css
@@ -0,0 +1,42 @@
+/*
+ wlkns-dev-standards
+ Form Patterns – Search, Filter, Pagination
+ Version: v1.0
+*/
+
+/* Search Bar */
+.search-bar {
+  display: flex;
+  gap: var(--space-2);
+  margin-bottom: var(--space-4);
+}
+
+.search-bar input {
+  flex: 1;
+}
+
+/* Filter Row */
+.filter-row {
+  display: flex;
+  gap: var(--space-3);
+  margin-bottom: var(--space-4);
+}
+
+/* Pagination */
+.pagination {
+  display: flex;
+  gap: var(--space-2);
+  align-items: center;
+}
+
+.pagination .page {
+  padding: var(--space-1) var(--space-2);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+}
+
+.pagination .page.active {
+  background: var(--color-bg);
+  font-weight: 500;
+}
diff --git a/design/layout-admin.css b/design/layout-admin.css
new file mode 100644
index 0000000..b80f7a9
--- /dev/null
+++ b/design/layout-admin.css
@@ -0,0 +1,62 @@
+/*
+ wlkns-dev-standards
+ Admin Layout – Sidebar / Topbar / Content
+ Version: v1.0
+
+ Zweck:
+ Standard-Layout für Admin- und Tool-UIs.
+ Ruhig, vorhersehbar, arbeitsfähig.
+*/
+
+.app {
+  display: grid;
+  grid-template-columns: 240px 1fr;
+  grid-template-rows: 56px 1fr;
+  min-height: 100vh;
+}
+
+/* Topbar */
+.topbar {
+  grid-column: 1 / -1;
+  background: var(--color-primary);
+  color: var(--color-surface);
+  display: flex;
+  align-items: center;
+  padding: 0 var(--space-4);
+}
+
+.topbar-title {
+  font-size: var(--font-size-md);
+  font-weight: 500;
+}
+
+/* Sidebar */
+.sidebar {
+  background: var(--color-surface);
+  border-right: 1px solid var(--color-border);
+  padding: var(--space-4);
+}
+
+.sidebar nav {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+.sidebar a {
+  text-decoration: none;
+  color: var(--color-text);
+  padding: var(--space-2) var(--space-3);
+  border-radius: var(--radius-sm);
+}
+
+.sidebar a.active,
+.sidebar a:hover {
+  background: var(--color-bg);
+}
+
+/* Content */
+.content {
+  background: var(--color-bg);
+  padding: var(--space-5);
+}
diff --git a/design/tokens.css b/design/tokens.css
new file mode 100644
index 0000000..232564f
--- /dev/null
+++ b/design/tokens.css
@@ -0,0 +1,95 @@
+/*
+ wlkns-dev-standards
+ Design Tokens – CSS
+ Version: v1.0
+
+ Zweck:
+ Zentrale, technologieunabhängige Design-Tokens für Web-UIs.
+ Dieses File ist die Single Source of Truth für Farben, Typografie
+ und grundlegende Abstände.
+*/
+
+:root {
+  /* =========================
+     Farben – Identity
+     ========================= */
+
+  --color-primary: #1F2A37;   /* Header, Navigation, Headlines */
+  --color-accent:  #0EA5A4;   /* Links, Fokus, aktive States */
+
+  /* =========================
+     Farben – Status
+     ========================= */
+
+  --color-success: #16A34A;
+  --color-warning: #D97706;
+  --color-error:   #DC2626;
+
+  /* =========================
+     Farben – Neutrals (Light)
+     ========================= */
+
+  --color-bg:        #F8FAFC;
+  --color-surface:   #FFFFFF;
+  --color-border:    #E5E7EB;
+
+  --color-text:          #111827;
+  --color-text-muted:   #4B5563;
+
+  /* =========================
+     Typografie
+     ========================= */
+
+  --font-ui: 'Inter', system-ui, -apple-system, BlinkMacSystemFont,
+             'Segoe UI', sans-serif;
+
+  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular,
+               Menlo, Consolas, monospace;
+
+  --font-size-xs: 0.75rem;   /* 12px */
+  --font-size-sm: 0.875rem;  /* 14px */
+  --font-size-md: 1rem;      /* 16px */
+  --font-size-lg: 1.125rem;  /* 18px */
+  --font-size-xl: 1.25rem;   /* 20px */
+
+  --line-height-tight: 1.3;
+  --line-height-base:  1.6;
+
+  /* =========================
+     Spacing (8px Grid)
+     ========================= */
+
+  --space-1: 0.25rem;  /* 4px */
+  --space-2: 0.5rem;   /* 8px */
+  --space-3: 0.75rem;  /* 12px */
+  --space-4: 1rem;     /* 16px */
+  --space-5: 1.5rem;   /* 24px */
+  --space-6: 2rem;     /* 32px */
+
+  /* =========================
+     Radius & Effects
+     ========================= */
+
+  --radius-sm: 4px;
+  --radius-md: 6px;
+  --radius-lg: 8px;
+
+  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
+}
+
+/* =========================
+   Base Styles (optional)
+   ========================= */
+
+body {
+  font-family: var(--font-ui);
+  font-size: var(--font-size-md);
+  line-height: var(--line-height-base);
+  color: var(--color-text);
+  background-color: var(--color-bg);
+}
+
+code, pre {
+  font-family: var(--font-mono);
+  font-size: var(--font-size-sm);
+}
diff --git a/design/tokens_dark.css b/design/tokens_dark.css
new file mode 100644
index 0000000..0f9d9cf
--- /dev/null
+++ b/design/tokens_dark.css
@@ -0,0 +1,43 @@
+/*
+ wlkns-dev-standards
+ Design Tokens – Dark Mode
+ Version: v1.0
+
+ Zweck:
+ Dark-Mode-Erweiterung für tokens.css.
+ Keine neuen Bedeutungen – nur andere Werte.
+*/
+
+[data-theme="dark"] {
+  /* =========================
+     Farben – Identity
+     ========================= */
+
+  --color-primary: #0F172A;
+  --color-accent:  #2DD4BF;
+
+  /* =========================
+     Farben – Status
+     ========================= */
+
+  --color-success: #22C55E;
+  --color-warning: #F59E0B;
+  --color-error:   #EF4444;
+
+  /* =========================
+     Farben – Neutrals (Dark)
+     ========================= */
+
+  --color-bg:        #020617;
+  --color-surface:   #020617;
+  --color-border:    #1E293B;
+
+  --color-text:        #E5E7EB;
+  --color-text-muted: #94A3B8;
+
+  /* =========================
+     Effects
+     ========================= */
+
+  --shadow-sm: 0 1px 2px rgba(0,0,0,0.6);
+}
diff --git a/design/ui-skeleton.html b/design/ui-skeleton.html
new file mode 100644
index 0000000..ed987ec
--- /dev/null
+++ b/design/ui-skeleton.html
@@ -0,0 +1,115 @@
+<!--
+ wlkns-dev-standards
+ UI Skeleton – Admin & Tool UI
+ Version: v1.3
+-->
+
+<!DOCTYPE html>
+<html lang="en" data-theme="light">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>wlkns Admin UI</title>
+
+  <link rel="stylesheet" href="tokens.css" />
+  <link rel="stylesheet" href="tokens-dark.css" />
+  <link rel="stylesheet" href="components.css" />
+  <link rel="stylesheet" href="components-tables-alerts.css" />
+  <link rel="stylesheet" href="components-states.css" />
+  <link rel="stylesheet" href="layout-admin.css" />
+  <link rel="stylesheet" href="form-patterns.css" />
+
+  <style>
+    .theme-toggle {
+      margin-left: auto;
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      font-size: 0.875rem;
+      cursor: pointer;
+    }
+
+    .theme-toggle input {
+      cursor: pointer;
+    }
+  </style>
+</head>
+<body>
+
+<div class="app">
+  <div class="topbar">
+    <div class="topbar-title">wlkns Admin</div>
+
+    <label class="theme-toggle">
+      <span>Dark</span>
+      <input type="checkbox" id="themeToggle" />
+    </label>
+  </div>
+
+  <aside class="sidebar">
+    <nav>
+      <a href="#" class="active">Dashboard</a>
+      <a href="#">Users</a>
+      <a href="#">Settings</a>
+    </nav>
+  </aside>
+
+  <main class="content">
+
+    <div class="bulk-bar">
+      <div class="count">2 ausgewählt</div>
+      <div class="actions">
+        <button class="button secondary">Export</button>
+        <button class="button danger">Löschen</button>
+      </div>
+    </div>
+
+    <div class="section">
+      <div class="search-bar">
+        <input type="text" placeholder="Search…" />
+        <button class="button primary">Search</button>
+      </div>
+    </div>
+
+    <div class="section" style="position: relative;">
+      <table>
+        <thead>
+          <tr>
+            <th></th>
+            <th>Name</th>
+            <th>Status</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td><input type="checkbox" /></td>
+            <td>Item A</td>
+            <td>Active</td>
+          </tr>
+          <tr>
+            <td><input type="checkbox" /></td>
+            <td>Item B</td>
+            <td>Inactive</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <div class="alert warning">
+      Demo Alert – Konfiguration prüfen
+    </div>
+
+  </main>
+</div>
+
+<script>
+  const toggle = document.getElementById('themeToggle');
+  const root = document.documentElement;
+
+  toggle.addEventListener('change', () => {
+    root.dataset.theme = toggle.checked ? 'dark' : 'light';
+  });
+</script>
+
+</body>
+</html>