diff --git a/quiz/app.js b/quiz/app.js
new file mode 100644
index 0000000..e0bf3d6
--- /dev/null
+++ b/quiz/app.js
@@ -0,0 +1,46 @@
+"use strict";
+
+const categories = [
+ { name: "Wrestling", icon: "assets/icons/wrestling.svg" },
+ { name: "Film", icon: "assets/icons/film.svg" },
+ { name: "Technik", icon: "assets/icons/technik.svg" },
+];
+
+const appContainer = document.getElementById("categories");
+const statusRegion = document.getElementById("status");
+
+function buildTile(category) {
+ const button = document.createElement("button");
+ button.type = "button";
+ button.className = "tile";
+ button.dataset.category = category.name;
+
+ const img = document.createElement("img");
+ img.src = category.icon;
+ img.alt = "";
+ img.width = 48;
+ img.height = 48;
+
+ const label = document.createElement("span");
+ label.className = "tile-label";
+ label.textContent = category.name;
+
+ button.append(img, label);
+
+ button.addEventListener("click", () => {
+ statusRegion.textContent = "Kategorie gewählt: " + category.name;
+ });
+
+ return button;
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+ const tilesContainer = appContainer.querySelector(".tiles");
+
+ const fragment = document.createDocumentFragment();
+ categories.forEach((category) => {
+ fragment.appendChild(buildTile(category));
+ });
+
+ tilesContainer.appendChild(fragment);
+});
diff --git a/quiz/assets/icons/film.svg b/quiz/assets/icons/film.svg
new file mode 100644
index 0000000..fbd4943
--- /dev/null
+++ b/quiz/assets/icons/film.svg
@@ -0,0 +1,8 @@
+
diff --git a/quiz/assets/icons/technik.svg b/quiz/assets/icons/technik.svg
new file mode 100644
index 0000000..75683d1
--- /dev/null
+++ b/quiz/assets/icons/technik.svg
@@ -0,0 +1,6 @@
+
diff --git a/quiz/assets/icons/wrestling.svg b/quiz/assets/icons/wrestling.svg
new file mode 100644
index 0000000..a3ccb85
--- /dev/null
+++ b/quiz/assets/icons/wrestling.svg
@@ -0,0 +1,7 @@
+
diff --git a/quiz/index.html b/quiz/index.html
new file mode 100644
index 0000000..89adc16
--- /dev/null
+++ b/quiz/index.html
@@ -0,0 +1,26 @@
+
+
+
+
+
+ Quiz Startseite
+
+
+
+
+
+
+
+
+
+
+ Noch keine Kategorie gewählt.
+
+
+
diff --git a/quiz/styles.css b/quiz/styles.css
new file mode 100644
index 0000000..a47b97e
--- /dev/null
+++ b/quiz/styles.css
@@ -0,0 +1,119 @@
+:root {
+ --color-bg: #f6f7fb;
+ --color-surface: #ffffff;
+ --color-text: #1c2430;
+ --color-muted: #5a6675;
+ --color-accent: #2f6fed;
+ --color-accent-strong: #1c4fd0;
+ --color-border: #e2e6ee;
+ --focus-ring: #f5a623;
+ --radius: 12px;
+ --shadow: 0 4px 14px rgba(28, 36, 48, 0.08);
+}
+
+* {
+ box-sizing: border-box;
+}
+
+body {
+ margin: 0;
+ font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+ background: var(--color-bg);
+ color: var(--color-text);
+ line-height: 1.5;
+}
+
+#app {
+ max-width: 900px;
+ margin: 0 auto;
+ padding: 32px 20px 48px;
+}
+
+.page-header {
+ text-align: center;
+ margin-bottom: 28px;
+}
+
+.page-header h1 {
+ margin: 0 0 8px;
+ font-size: clamp(1.6rem, 4vw, 2.2rem);
+}
+
+.page-header .lead {
+ margin: 0;
+ color: var(--color-muted);
+}
+
+.visually-hidden {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ overflow: hidden;
+ clip: rect(0 0 0 0);
+ clip-path: inset(50%);
+ white-space: nowrap;
+}
+
+.tiles {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+ gap: 20px;
+}
+
+.tile {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap: 12px;
+ padding: 28px 16px;
+ background: var(--color-surface);
+ border: 1px solid var(--color-border);
+ border-radius: var(--radius);
+ box-shadow: var(--shadow);
+ font-size: 1.1rem;
+ font-weight: 600;
+ color: var(--color-text);
+ cursor: pointer;
+ transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
+}
+
+.tile:hover {
+ border-color: var(--color-accent);
+ box-shadow: 0 8px 20px rgba(28, 36, 48, 0.12);
+ transform: translateY(-2px);
+}
+
+.tile:active {
+ transform: translateY(0);
+}
+
+.tile img {
+ width: 48px;
+ height: 48px;
+ color: var(--color-accent);
+ pointer-events: none;
+}
+
+button:focus-visible {
+ outline: 3px solid var(--focus-ring);
+ outline-offset: 2px;
+}
+
+.status {
+ margin-top: 32px;
+ text-align: center;
+ font-size: 1.05rem;
+ color: var(--color-muted);
+ background: var(--color-surface);
+ border: 1px solid var(--color-border);
+ border-radius: var(--radius);
+ padding: 14px 18px;
+ min-height: 1.5em;
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .tile {
+ transition: none;
+ }
+}