From fb4463569bd625dc44297781d1510bb92276b37a Mon Sep 17 00:00:00 2001
From: Fabian Schieder <fabian.schieder.1010@gmail.com>
Date: Sat, 4 Apr 2026 00:29:00 +0200
Subject: [PATCH 1/4] Add detailed PHPDoc comments to multiple files for
 improved documentation

---
 .htaccess                        |   9 -
 .htpasswd                        |   1 -
 .idea/php.xml                    |  37 ---
 404.php                          | 100 ++++++-
 README.md                        | 250 -----------------
 account.php                      | 117 +++++++-
 ad_recommendation.php            |  57 +++-
 admin_users.php                  | 142 ++++++++--
 api/search_products.php          |  96 ++++++-
 assets/css/catbar.css            | 165 ++++++++++--
 assets/css/compare.css           | 118 +++++++-
 assets/css/compcard.css          | 227 ++++++++++++++--
 assets/css/login.css             | 152 +++++++++++
 assets/css/productAdder.css      |  96 +++++++
 assets/css/productpage.css       | 446 ++++++++++++++++++++++++++++---
 assets/js/search-autocomplete.js | 222 ---------------
 attrbar.php                      | 121 ++++++++-
 catbar.php                       |  52 ++++
 compare.php                      | 153 ++++++++++-
 compcards.php                    | 173 ++++++++++--
 file.php                         |   1 -
 footer.php                       |  42 +++
 header.php                       | 108 ++++++--
 impressum.php                    | 103 ++++++-
 index.php                        |  87 +++++-
 info/skript.sql                  | 350 ++++++++++++++++++++++++
 lib/bootstrap.php                |  83 +++++-
 lib/config.php                   |  68 ++++-
 lib/db.php                       |  83 +++++-
 lib/strings.php                  |  56 +++-
 login.php                        | 108 +++++++-
 logout.php                       |  43 ++-
 other/login.html                 |  13 -
 productAdder.php                 |  93 +++++++
 productpage.php                  |  89 +++++-
 register.php                     | 107 +++++++-
 stats.json                       |   1 -
 style.css                        | 136 ++++++++++
 upload.php                       | 150 +++++++++++
 wunschliste.php                  | 113 +++++++-
 40 files changed, 3794 insertions(+), 774 deletions(-)
 delete mode 100755 .htaccess
 delete mode 100755 .htpasswd
 delete mode 100644 .idea/php.xml
 delete mode 100644 README.md
 delete mode 100644 assets/js/search-autocomplete.js
 delete mode 100644 file.php
 create mode 100644 info/skript.sql
 delete mode 100644 other/login.html
 delete mode 100644 stats.json

diff --git a/.htaccess b/.htaccess
deleted file mode 100755
index 8ca9877..0000000
--- a/.htaccess
+++ /dev/null
@@ -1,9 +0,0 @@
- # AuthType Basic
- # AuthName "Geschützter Bereich"
- # AuthUserFile /FSST/Website/.htpasswd
- # Require valid-user
-#
- # # .htpasswd vor Auslieferung schützen
- # <Files ".htpasswd">
- #     Require all denied
- # </Files>
diff --git a/.htpasswd b/.htpasswd
deleted file mode 100755
index d9889a8..0000000
--- a/.htpasswd
+++ /dev/null
@@ -1 +0,0 @@
-FSST:$apr1$HhgwKWOh$AtczxeE9BzXsBLaQLDKB20
diff --git a/.idea/php.xml b/.idea/php.xml
deleted file mode 100644
index 9ced3ac..0000000
--- a/.idea/php.xml
+++ /dev/null
@@ -1,37 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="MessDetectorOptionsConfiguration">
-    <option name="transferred" value="true" />
-  </component>
-  <component name="PHPCSFixerOptionsConfiguration">
-    <option name="transferred" value="true" />
-  </component>
-  <component name="PHPCodeSnifferOptionsConfiguration">
-    <option name="highlightLevel" value="WARNING" />
-    <option name="transferred" value="true" />
-  </component>
-  <component name="PhpCodeSniffer">
-    <phpcs_settings>
-      <phpcs_by_interpreter asDefaultInterpreter="true" interpreter_id="b74b3486-711a-42ad-bf18-c51cc1addaa5" timeout="30000" />
-    </phpcs_settings>
-  </component>
-  <component name="PhpProjectSharedConfiguration" php_language_level="8.2">
-    <option name="suggestChangeDefaultLanguageLevel" value="false" />
-  </component>
-  <component name="PhpStan">
-    <PhpStan_settings>
-      <phpstan_by_interpreter asDefaultInterpreter="true" interpreter_id="b74b3486-711a-42ad-bf18-c51cc1addaa5" timeout="60000" />
-    </PhpStan_settings>
-  </component>
-  <component name="PhpStanOptionsConfiguration">
-    <option name="transferred" value="true" />
-  </component>
-  <component name="Psalm">
-    <Psalm_settings>
-      <psalm_fixer_by_interpreter asDefaultInterpreter="true" interpreter_id="b74b3486-711a-42ad-bf18-c51cc1addaa5" timeout="60000" />
-    </Psalm_settings>
-  </component>
-  <component name="PsalmOptionsConfiguration">
-    <option name="transferred" value="true" />
-  </component>
-</project>
\ No newline at end of file
diff --git a/404.php b/404.php
index cd39c0a..1654ef0 100644
--- a/404.php
+++ b/404.php
@@ -1,27 +1,53 @@
 <?php
-// Wichtig: echten 404-Status setzen
-// !!! Funktioniert nur auf geizkragen.fabianschieder.com (Weil im VirtualHost configuriert) !!!
+/**
+ * @file 404.php
+ * @brief Fehlerseite für nicht gefundene Dokumente (HTTP 404 Not Found)
+ *
+ * @details Diese Datei wird aufgerufen, wenn ein Benutzer eine URL aufruft, 
+ * die auf dem Server nicht existiert. Sie sendet den korrekten HTTP-Statuscode 404 an den Browser,
+ * liest die angeforderte URI aus und bietet dem Benutzer benutzerfreundliche Möglichkeiten,
+ * zurück zur Startseite oder zur vorherigen Seite zu navigieren. Ein ansprechendes Design
+ * mit Glitch-Effekten macht die Fehlerseite visuell interessant.
+ * 
+ * @author Fabian Schieder / Geizkragen Team
+ * @version 1.0
+ */
+
+// Wichtig: Echten 404-Status setzen, damit Suchmaschinen und Browser erkennen, dass die Seite nicht existiert.
+// !!! Funktioniert in der Produktion nur zuverlässig (z.B. auf geizkragen.fabianschieder.com), 
+// wenn die Fehlerseite im VirtualHost oder der .htaccess entsprechend für 404-Fehler konfiguriert ist !!!
 http_response_code(404);
 
-// Request-Daten absichern
+// Request-Daten absichern, um XSS (Cross-Site Scripting) Angriffe bei der Ausgabe zu verhindern.
+// htmlspecialchars wandelt spezielle Zeichen (<, >, &, ", ') in ungefährliche HTML-Entitäten um.
 $requestUri = htmlspecialchars($_SERVER['REQUEST_URI'] ?? '', ENT_QUOTES, 'UTF-8');
 $method     = htmlspecialchars($_SERVER['REQUEST_METHOD'] ?? '', ENT_QUOTES, 'UTF-8');
 
-// Optional: einfaches Logging
+// Optional: Einfaches Logging der 404-Fehler für administrative Zwecke.
+// Schreibt die IP-Adresse des Clients, die HTTP-Methode und die angeforderte fehlerhafte URI in das PHP Error-Log.
 error_log("[404] " . ($_SERVER['REMOTE_ADDR'] ?? '') . " $method $requestUri");
 ?>
 <!DOCTYPE html>
 <html lang="de">
 <head>
+    <!-- Metadaten zur Zeichenkodierung und für ein responsives Layout -->
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    
+    <!-- Einbindung des Favicons -->
     <link rel="icon" href="/assets/images/favicon.ico" sizes="any">
+    
+    <!-- Einbindung des globalen Stylesheets -->
     <link rel="stylesheet" href="/style.css">
+    
+    <!-- Titel der Seite, der im Browser-Tab angezeigt wird -->
     <title>404 – Seite nicht gefunden | Geizkragen</title>
 </head>
 <body>
 
+<!-- Hauptinhaltsbereich der Fehlerseite -->
 <main>
+    <!-- Container für die Zentrierung und Ausrichtung der Inhalte -->
     <div class="container" style="
         display: flex;
         flex-direction: column;
@@ -31,12 +57,22 @@ error_log("[404] " . ($_SERVER['REMOTE_ADDR'] ?? '') . " $method $requestUri");
         text-align: center;
         padding-block: 4rem;
     ">
-        <!-- 404 Glitch-Zahl -->
+        <!-- 
+          404 Glitch-Zahl: 
+          Ein dekoratives Element, das die Zahl 404 groß und mit einem visuellen Störungs-Effekt (Glitch) darstellt.
+          Das Attribut aria-hidden="true" versteckt es vor Screenreadern, da es rein dekorativ ist.
+        -->
         <div class="error-code" aria-hidden="true">404</div>
 
-        <!-- Card -->
+        <!-- 
+          Error Card:
+          Eine visuelle Karte, die den Text, das Icon und die Navigations-Aktionen strukturiert zusammenfasst.
+        -->
         <div class="error-card">
+            
+            <!-- Icon-Bereich in der Fehlerkarte -->
             <div class="error-card__icon">
+                <!-- SVG-Icon: Ein durchgestrichener Kreis zur symbolischen Darstellung eines Fehlers -->
                 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                      stroke-linecap="round" stroke-linejoin="round" width="28" height="28">
                     <circle cx="11" cy="11" r="8"/>
@@ -45,14 +81,20 @@ error_log("[404] " . ($_SERVER['REMOTE_ADDR'] ?? '') . " $method $requestUri");
                 </svg>
             </div>
 
+            <!-- Überschrift für die Fehlerkarte -->
             <h1 class="error-card__title">Seite nicht gefunden</h1>
+            
+            <!-- Erklärender Text für den Benutzer -->
             <p class="error-card__text">
                 Die Seite, die du suchst, existiert leider nicht oder wurde verschoben.
             </p>
 
+            <!-- Ausgabe des angeforderten Pfads, der zum Fehler geführt hat -->
             <div class="error-card__path"><?php echo $requestUri; ?></div>
 
+            <!-- Container für die Navigationsbuttons -->
             <div class="error-card__actions">
+                <!-- Button: Zurück zur Startseite -->
                 <a href="/index.php" class="btn btn--primary">
                     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                          stroke-linecap="round" stroke-linejoin="round" width="18" height="18">
@@ -61,6 +103,8 @@ error_log("[404] " . ($_SERVER['REMOTE_ADDR'] ?? '') . " $method $requestUri");
                     </svg>
                     Zur Startseite
                 </a>
+                
+                <!-- Button: Zurück zur vorherigen Seite im Browser-Verlauf -->
                 <button onclick="history.back()" class="btn btn--ghost">
                     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                          stroke-linecap="round" stroke-linejoin="round" width="18" height="18">
@@ -74,24 +118,36 @@ error_log("[404] " . ($_SERVER['REMOTE_ADDR'] ?? '') . " $method $requestUri");
     </div>
 </main>
 
+<!-- Inlined CSS-Bereich für das spezifische Styling der 404-Komponenten -->
 <style>
+    /**
+     * @brief Styling für die 404 Glitch-Zahl
+     * @details Definiert eine große, animierte Textdarstellung mit einem Farbgradienten.
+     */
     /* ── 404 Glitch-Zahl ── */
     .error-code {
         font-size: clamp(7rem, 18vw, 12rem);
         font-weight: 900;
         line-height: 1;
         letter-spacing: -0.04em;
+        /* Lineares Farbverlaufs-Hintergrundbild für den Text */
         background: linear-gradient(135deg, var(--color-primary), #4f46e5, var(--color-accent));
         background-size: 200% 200%;
+        /* Wendet den Hintergrund nur auf den Text an (Webkit und Standard) */
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
         background-clip: text;
+        /* Animation zur Verschiebung des Gradienten */
         animation: gradientShift 4s ease-in-out infinite;
         margin-bottom: 1.5rem;
         position: relative;
         display: inline-block;
     }
 
+    /**
+     * @brief Pseudo-Elemente für den Glitch-Tearing-Effekt
+     * @details Erstellt Kopien des Textes, die beschnitten und verschoben werden.
+     */
     .error-code::before,
     .error-code::after {
         content: '404';
@@ -104,16 +160,19 @@ error_log("[404] " . ($_SERVER['REMOTE_ADDR'] ?? '') . " $method $requestUri");
         background-clip: text;
     }
 
+    /* Oberer Teil des Glitches */
     .error-code::before {
         clip-path: inset(0 0 65% 0);
         animation: glitch1 3s infinite linear alternate-reverse;
     }
 
+    /* Unterer Teil des Glitches */
     .error-code::after {
         clip-path: inset(65% 0 0 0);
         animation: glitch2 3s infinite linear alternate-reverse;
     }
 
+    /** Keyframes-Animationen für den wackeligen Glitch-Effekt */
     @keyframes glitch1 {
         0%,92%  { transform: translate(0); }
         93%     { transform: translate(-6px,-2px); }
@@ -130,6 +189,9 @@ error_log("[404] " . ($_SERVER['REMOTE_ADDR'] ?? '') . " $method $requestUri");
         94%,100%{ transform: translate(0); }
     }
 
+    /**
+     * @brief Styling für die Error-Karten-Komponente (Glassmorphism-Effekt)
+     */
     /* ── Card ── */
     .error-card {
         background: rgba(31, 41, 55, 0.55);
@@ -144,6 +206,7 @@ error_log("[404] " . ($_SERVER['REMOTE_ADDR'] ?? '') . " $method $requestUri");
         animation: fadeInUp 0.6s ease-out 0.1s both;
     }
 
+    /* Styling für den Kreis mit dem Icon in der Karte */
     .error-card__icon {
         width: 56px;
         height: 56px;
@@ -157,6 +220,7 @@ error_log("[404] " . ($_SERVER['REMOTE_ADDR'] ?? '') . " $method $requestUri");
         animation: pulse-glow 3s ease-in-out infinite;
     }
 
+    /* Typografie für den Karten-Titel */
     .error-card__title {
         font-size: 1.4rem;
         font-weight: 800;
@@ -164,6 +228,7 @@ error_log("[404] " . ($_SERVER['REMOTE_ADDR'] ?? '') . " $method $requestUri");
         margin-bottom: 0.6rem;
     }
 
+    /* Typografie für den Info-Text */
     .error-card__text {
         color: var(--text-muted);
         font-size: 0.95rem;
@@ -171,6 +236,7 @@ error_log("[404] " . ($_SERVER['REMOTE_ADDR'] ?? '') . " $method $requestUri");
         margin-bottom: 0.25rem;
     }
 
+    /* Darstellung des Pfad-Textes im Monospace-Look */
     .error-card__path {
         display: inline-block;
         background: var(--color-primary-soft);
@@ -186,14 +252,18 @@ error_log("[404] " . ($_SERVER['REMOTE_ADDR'] ?? '') . " $method $requestUri");
         max-width: 100%;
     }
 
+    /**
+     * @brief Layout und Styling der Aktions-Buttons
+     */
     /* ── Buttons ── */
     .error-card__actions {
         display: flex;
-        gap: 0.75rem;
+        gap: 0.75rem; /* Abstand zwischen den Buttons */
         justify-content: center;
-        flex-wrap: wrap;
+        flex-wrap: wrap; /* Erlaubt Umbruch bei kleinen Bildschirmen */
     }
 
+    /* Basis-Klasse für Buttons mit Flex-Eigenschaften und Transitionen */
     .btn {
         display: inline-flex;
         align-items: center;
@@ -209,39 +279,50 @@ error_log("[404] " . ($_SERVER['REMOTE_ADDR'] ?? '') . " $method $requestUri");
         transition: all var(--transition-smooth);
     }
 
+    /* Haupt-Button (Primäraktion) */
     .btn--primary {
         background: var(--color-primary);
         color: #fff;
         box-shadow: 0 4px 14px var(--color-primary-glow);
     }
 
+    /* Hover-Zustand des Haupt-Buttons */
     .btn--primary:hover {
         background: var(--color-primary-hover);
-        transform: translateY(-2px);
+        transform: translateY(-2px); /* Hebe-Effekt */
         box-shadow: 0 8px 24px var(--color-primary-glow);
         color: #fff;
     }
 
+    /* Sekundärer Ghost-Button (Transparenter Hintergrund) */
     .btn--ghost {
         background: rgba(255,255,255,0.04);
         color: var(--text-muted);
         border: 1px solid var(--border-subtle);
     }
 
+    /* Hover-Zustand des Ghost-Buttons */
     .btn--ghost:hover {
         background: rgba(255,255,255,0.09);
         color: var(--text-primary);
         transform: translateY(-2px);
     }
 
+    /**
+     * @brief Responsive Anpassungen (Media Queries)
+     * @details Passt das Layout auf kleineren Bildschirmen (z.B. Mobilgeräten) an.
+     */
     /* ── Responsive ── */
     @media (max-width: 480px) {
+        /* Verringerte Polsterung der Karte für kleine Screens */
         .error-card {
             padding: 1.8rem 1.25rem 1.5rem;
         }
+        /* Stapeln der Buttons untereinander */
         .error-card__actions {
             flex-direction: column;
         }
+        /* Buttons füllen die gesamte Breite aus und zentrieren ihren Inhalt */
         .btn {
             justify-content: center;
             width: 100%;
@@ -251,3 +332,4 @@ error_log("[404] " . ($_SERVER['REMOTE_ADDR'] ?? '') . " $method $requestUri");
 
 </body>
 </html>
+
diff --git a/README.md b/README.md
deleted file mode 100644
index 4a8beef..0000000
--- a/README.md
+++ /dev/null
@@ -1,250 +0,0 @@
-# Geizkragen – Preisvergleichs- und Produktplattform
-
-## Kurzüberblick
-
-Geizkragen ist eine webbasierte Anwendung zur Produktsuche und zum Preisvergleich. Nutzer können Produkte durchsuchen, vergleichen und in einer persönlichen Wunschliste verwalten.
-Das Projekt dient als technische Demonstration einer klassischen PHP-basierten Webanwendung mit Datenbankanbindung.
-
----
-
-## Funktionsumfang
-
-* Produktsuche (inkl. API-Endpunkt)
-* Vergleich mehrerer Produkte
-* Wunschliste (benutzergebunden)
-* Benutzerregistrierung und Login
-* Benutzerkonto-Verwaltung
-* Administrationsbereich zur Benutzerverwaltung
-* Hinzufügen neuer Produkte
-* Produktdetailseiten
-* Einfache statistische Auswertungen
-* Grundlegendes Empfehlungssystem
-
----
-
-## Projektstruktur
-
-```bash
-geizkragen/
-│
-├── index.php
-├── productpage.php
-├── compare.php
-├── wunschliste.php
-├── login.php
-├── register.php
-├── account.php
-├── admin_users.php
-│
-├── api/
-│   └── search_products.php
-│
-├── assets/
-│   ├── css/
-│   ├── images/
-│   └── icons/
-│
-├── header.php
-├── footer.php
-├── style.css
-├── stats.json
-└── .htaccess
-```
-
----
-
-## Installation und Setup
-
-### Voraussetzungen
-
-* Webserver (z. B. Apache)
-* PHP (empfohlen ≥ 7.x)
-* MySQL oder MariaDB
-
----
-
-### Installation
-
-```bash
-git clone <repository-url>
-cd geizkragen
-```
-
-Oder manuell:
-Projekt in das Webserver-Verzeichnis kopieren, z. B.:
-
-```
-C:\xampp\htdocs\geizkragen
-```
-
----
-
-### Datenbankeinrichtung
-
-1. Neue Datenbank erstellen
-2. Tabellen entsprechend dem Schema anlegen
-3. Zugangsdaten in den PHP-Dateien konfigurieren
-
----
-
-### Start
-
-Webserver starten und im Browser öffnen:
-
-```
-http://localhost/geizkragen
-```
-
----
-
-## API
-
-### Produktsuche
-
-```
-GET /api/search_products.php?q=Suchbegriff
-```
-
-Antwort:
-
-* JSON mit passenden Produkten
-
----
-
-## Technische Architektur
-
-### Backend
-
-* PHP
-* Serverseitige Verarbeitung
-* Teilweise API-Struktur
-
-### Frontend
-
-* HTML5
-* CSS
-* Klassisches serverseitiges Rendering
-
-### Datenhaltung
-
-* MySQL / MariaDB
-* Ergänzend JSON (Statistiken)
-
----
-
-## Sicherheit und Hinweis zur öffentlichen Nutzung
-
-Dieses Repository ist öffentlich zugänglich.
-Der aktuelle Stand ist als Lern- bzw. Entwicklungsprojekt zu verstehen und **nicht für den produktiven Einsatz im Internet vorgesehen**.
-
-Bekannte Einschränkungen:
-
-* Sicherheitsmechanismen sind nicht vollständig implementiert
-* Authentifizierung und Session-Handling sollten überprüft werden
-* Eingabevalidierung und Schutz gegen SQL-Injection sind teilweise unzureichend
-* Keine Garantie für Datenschutz oder Datensicherheit
-
-**Empfehlung:**
-Vor einem produktiven Einsatz müssen grundlegende Sicherheitsmaßnahmen implementiert werden.
-
----
-
-## Empfohlene Sicherheitsmaßnahmen
-
-* Verwendung von Prepared Statements (PDO/MySQLi)
-* Passwort-Hashing mit `password_hash()`
-* CSRF-Schutz für Formulare
-* Strikte Validierung und Sanitizing aller Eingaben
-* Sichere Session-Verwaltung (Session-Regeneration)
-* Fehlerausgaben im Produktivbetrieb deaktivieren
-
----
-
-## Erweiterungsmöglichkeiten
-
-* Einführung eines MVC-Patterns
-* Trennung von Backend und Frontend (API-first)
-* Nutzung eines modernen Frontend-Frameworks
-* Verbesserung der Benutzeroberfläche (Responsive Design)
-* Erweiterung des Empfehlungssystems
-* Automatisierte Tests
-
----
-
-## Entwicklungsumgebung
-
-Empfohlen:
-
-* PhpStorm oder Visual Studio Code
-* MySQL Workbench
-* XAMPP oder vergleichbare lokale Serverumgebung
-
----
-
-## Lizenz
-
-Derzeit ist keine Lizenz definiert.
-Ohne Lizenz ist die Nutzung, Veränderung und Weitergabe rechtlich eingeschränkt.
-
-Empfehlung:
-Eine Open-Source-Lizenz wie MIT oder Apache 2.0 hinzufügen.
-
----
-
-## Autor
-
-Fabian Schieder
-Paul Eisenbock
-
----
-
-## Fachliche Einschätzung
-
-Das Projekt ist ein solides Beispiel für eine klassische PHP-Webanwendung mit Datenbankanbindung.
-Für Lernzwecke ist die Struktur sinnvoll, jedoch fehlen klare architektonische Trennungen und sicherheitsrelevante Mechanismen.
-
-Für eine Weiterentwicklung sind insbesondere folgende Punkte entscheidend:
-
-* Strukturierung (MVC oder ähnliche Muster)
-* Absicherung der Datenbankzugriffe
-* Saubere Trennung von Logik und Darstellung
-* Skalierbarkeit durch API-basierte Architektur
-
----
-
-## Typische Fehlerquellen und Best Practices
-
-### Häufige Probleme
-
-* SQL-Injection durch direkte Queries
-* Fehlendes Passwort-Hashing
-* Vermischung von PHP und HTML
-* Unsichere Session-Verwaltung
-* Fehlende Eingabevalidierung
-
-### Best Practices
-
-* Prepared Statements konsequent verwenden
-* Zentrale Konfigurationsdateien nutzen
-* Logging und Fehlerhandling implementieren
-* Code modularisieren
-* Sicherheitskonzepte früh integrieren
-
----
-
-## Typischer Ablauf
-
-1. Benutzer sucht ein Produkt
-2. Ergebnisse werden angezeigt
-3. Produktdetailseite wird geöffnet
-4. Optional: Vergleich oder Speicherung in Wunschliste
-
----
-
-## Zusammenfassung
-
-* PHP-basierte Preisvergleichsplattform
-* Klassische serverseitige Architektur
-* Öffentliche Repository mit Lerncharakter
-* Sicherheit derzeit nicht ausreichend für Produktion
-* Gute Basis für Erweiterung und Refactoring
diff --git a/account.php b/account.php
index 888a2e1..6a661b0 100644
--- a/account.php
+++ b/account.php
@@ -1,36 +1,97 @@
 <?php
+/**
+ * @file account.php
+ * @brief Profil- und Kontoverwaltungsseite des Benutzers.
+ *
+ * @details Diese Datei stellt die Benutzeroberfläche für das Benutzerprofil dar. 
+ * Sie überprüft, ob eine aktive Benutzersitzung vorliegt, ruft die Benutzerdaten 
+ * (wie Anzeigename, E-Mail und Profilbild) aus der Datenbank ab und zeigt diese an. 
+ * Zudem bietet sie Funktionen zum Hochladen eines neuen Profilbildes, Verlinken zu 
+ * administrativen oder benutzerspezifischen Aktionen (wie Wunschliste und Produktverwaltung) 
+ * sowie die Möglichkeit, sich vom System abzumelden.
+ *
+ * @author Geizkragen-Projekt
+ * @date 2026-04-03
+ */
 
+/**
+ * @brief Einbinden der Bootstrap-Datei.
+ * 
+ * Beinhaltet Konfigurationen, Konstanten und grundlegende Funktionen (wie z. B. DB-Verbindung),
+ * die für den gesamten Ablauf erforderlich sind.
+ */
 require_once __DIR__ . '/lib/bootstrap.php';
 
+/**
+ * @brief Überprüfung der Benutzersitzung.
+ * 
+ * Wenn die Session-Variable 'user_id' nicht gesetzt ist, wird der Benutzer sofort
+ * auf die Login-Seite weitergeleitet.
+ */
 if (empty($_SESSION['user_id'])) {
     header('Location: login.php');
     exit();
 }
 
+/**
+ * @var int $userId Die ID des aktuell angemeldeten Benutzers, sicher als Integer gecastet.
+ */
 $userId = (int)$_SESSION['user_id'];
 
+/**
+ * @var mysqli $conn Das aktive Datenbankverbindungsobjekt.
+ */
 $conn = db_connect();
 
+/**
+ * @brief Vorbereiten der SQL-Abfrage zur Ermittlung der Benutzerdaten.
+ * 
+ * Holt die userID, den Anzeigenamen, die E-Mail-Adresse und den Pfad zum Profilbild
+ * aus der Tabelle 'users' für den gerade angemeldeten Benutzer.
+ * 
+ * @var mysqli_stmt|false $stmt Das vorbereitete Statement.
+ */
 $stmt = $conn->prepare('SELECT userID, displayName, email, profilePicture FROM users WHERE userID = ? LIMIT 1');
 if (!$stmt) {
+    // Bei einem Fehler beim Vorbereiten der Abfrage wird ein HTTP 500 Fehler gesendet und die Ausführung gestoppt.
     http_response_code(500);
     die('Datenbankfehler');
 }
 
+/**
+ * @brief Ausführen des Statements mit der Benutzer-ID.
+ */
 $stmt->bind_param('i', $userId);
 $stmt->execute();
 
+/**
+ * @var mysqli_result|false $result Das Ergebnis der Datenbankabfrage.
+ */
 $result = $stmt->get_result();
 
+/**
+ * @brief Auswertung des Abfrageergebnisses.
+ * 
+ * Wenn ein Datensatz gefunden wurde, wird das assoziative Array in $user gespeichert, ansonsten ist $user null.
+ * 
+ * @var array|null $user Enthält die Benutzerdaten oder null, wenn kein Benutzer gefunden wurde.
+ */
 if ($result) {
     $user = mysqli_fetch_assoc($result);
 } else {
     $user = null;
 }
 
+// Schließen des Statements und der Datenbankverbindung zur Ressourcenfreigabe.
 $stmt->close();
 $conn->close();
 
+/**
+ * @brief Validierung der gefundenen Benutzerdaten.
+ * 
+ * Falls kein gültiger Benutzer gefunden wurde (z.B. wenn der Benutzer zwischenzeitlich aus der DB gelöscht wurde),
+ * wird die aktuelle Sitzung zerstört und der Nutzer zum Login-Bildschirm umgeleitet.
+ */
 if (!$user) {
     session_unset();
     session_destroy();
@@ -38,12 +99,25 @@ if (!$user) {
     exit();
 }
 
+/**
+ * @brief Einbinden des HTML-Headers.
+ * 
+ * Lädt den allgemeinen Kopfbereich der Webseite, inklusive CSS-Referenzen und Navigation.
+ */
 include 'header.php';
 ?>
 
+    <!--
+      @brief Hauptcontainer für die Account-Ansicht.
+      Definiert die Struktur für Profilanzeige und Einstellungen.
+    -->
     <main class="auth" role="main">
         <section class="account" aria-label="Account Bereich">
 
+            <!--
+              @brief Erfolgs- und Fehlermeldungen für den Profilbild-Upload.
+              Wertet GET-Parameter 'upload' aus, um dem Benutzer visuelles Feedback zu geben.
+            -->
             <?php if (isset($_GET['upload']) && $_GET['upload'] === 'ok'): ?>
                 <p class="auth__alert__sucess account__toast" role="status">Profilbild wurde erfolgreich
                     aktualisiert.</p>
@@ -54,7 +128,12 @@ include 'header.php';
             <?php endif; ?>
 
             <!-- ═══ Profil-Sidebar ═══ -->
+            <!--
+              @brief Container für die Profildaten.
+              Zeigt Avatar, Anzeigename, User-ID und E-Mail-Adresse an.
+            -->
             <div class="auth__card account__profile">
+                <!-- Avatar-Anzeige -->
                 <div class="account__avatar-wrapper">
                     <img class="account__avatar"
                          src="<?php echo htmlspecialchars($user['profilePicture']); ?>"
@@ -62,8 +141,10 @@ include 'header.php';
                          width="180">
                 </div>
 
+                <!-- Name des Benutzers -->
                 <h1 class="account__displayname"><?php echo htmlspecialchars($user['displayName'], ENT_QUOTES, 'UTF-8'); ?></h1>
 
+                <!-- Zusätzliche Details -->
                 <dl class="account__details">
                     <div class="account__detail-row">
                         <dt>User-ID</dt>
@@ -77,9 +158,17 @@ include 'header.php';
             </div>
 
             <!-- ═══ Einstellungen ═══ -->
+            <!--
+              @brief Container für Account-Einstellungen.
+              Beinhaltet Abschnitte für Profilbild ändern, Schnellaktionen und das Ausloggen.
+            -->
             <div class="account__settings">
 
                 <!-- Profilbild ändern -->
+                <!--
+                  @brief Formular zum Hochladen eines neuen Profilbilds.
+                  Es wird ein POST-Request mit multipart/form-data an upload.php gesendet.
+                -->
                 <div class="auth__card account__section">
                     <h2 class="account__section-title">
                         <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
@@ -103,6 +192,10 @@ include 'header.php';
                 </div>
 
                 <!-- Schnellaktionen -->
+                <!--
+                  @brief Bereich für schnellen Zugriff auf wichtige Funktionen.
+                  Wenn der Benutzer die Rolle ADMIN hat, werden zusätzliche Links angezeigt.
+                -->
                 <div class="auth__card account__section">
                     <h2 class="account__section-title">
                         <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
@@ -112,7 +205,13 @@ include 'header.php';
                         Schnellaktionen
                     </h2>
                     <div class="account__quick-actions">
-                        <?php if (!empty($_SESSION['user_roles']) && in_array('ADMIN', $_SESSION['user_roles'], true)): ?>
+                        <?php 
+                        /**
+                         * @brief Prüfung der Administrator-Rolle.
+                         * Falls der Benutzer ein Admin ist, werden Links zur Produkt- und Benutzerverwaltung gerendert.
+                         */
+                        if (!empty($_SESSION['user_roles']) && in_array('ADMIN', $_SESSION['user_roles'], true)): 
+                        ?>
                             <a href="productAdder.php" class="auth__submit account__action-link">
                                 Produkt hinzufügen
                             </a>
@@ -120,6 +219,9 @@ include 'header.php';
                                 Benutzerverwaltung
                             </a>
                         <?php endif; ?>
+                        <!--
+                          @brief Link zur Wunschliste für alle Benutzer.
+                        -->
                         <a href="wunschliste.php"
                            class="auth__submit account__action-link account__action-link--secondary">
                             Meine Wunschliste
@@ -128,6 +230,10 @@ include 'header.php';
                 </div>
 
                 <!-- Abmelden -->
+                <!--
+                  @brief Logout-Bereich.
+                  Stellt ein Formular bereit, das ein Ausloggen aus der Anwendung ermöglicht.
+                -->
                 <div class="auth__card account__section account__section--danger">
                     <h2 class="account__section-title account__section-title--danger">
                         <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
@@ -150,4 +256,11 @@ include 'header.php';
         </section>
     </main>
 
-<?php include 'footer.php'; ?>
\ No newline at end of file
+<?php 
+/**
+ * @brief Einbinden des HTML-Footers.
+ * 
+ * Schließt die HTML-Struktur ab und lädt mögliche globale Skripte.
+ */
+include 'footer.php'; 
+?>
diff --git a/ad_recommendation.php b/ad_recommendation.php
index 0c29da0..87f5692 100644
--- a/ad_recommendation.php
+++ b/ad_recommendation.php
@@ -1,8 +1,33 @@
 <?php
-// ad_recommendation.php
+/**
+ * @file ad_recommendation.php
+ * @brief Zeigt eine zufällige Produktempfehlung als Werbebanner an (Ad Recommendation).
+ *
+ * @details Diese Datei verbindet sich mit der Datenbank, wählt ein zufälliges Produkt
+ * aus der Tabelle `products` aus, ermittelt den günstigsten Preis für dieses Produkt
+ * aus der Tabelle `offers` und stellt es dann in einem ansprechenden Werbebanner dar.
+ * Das Banner enthält aufmerksamkeitsstarke CSS-Animationen und -Stylings.
+ * 
+ * @author GitHub Copilot
+ * @date 2026-04-03
+ */
+
+// Binde die Bootstrap-Datei ein, welche grundlegende Konfigurationen und Bibliotheken lädt
 require_once __DIR__ . '/lib/bootstrap.php';
+
+/**
+ * @var mysqli $conn Die aktive Datenbankverbindung.
+ */
 $conn = db_connect();
 
+/**
+ * @brief Führt eine SQL-Abfrage aus, um ein zufälliges Produkt mit dessen Mindestpreis zu holen.
+ * 
+ * @details Die Abfrage nutzt einen LEFT JOIN zwischen `products` (p) und `offers` (o). 
+ * Sie gruppiert nach der Produkt-ID und wählt das Minimum der offer.price Spalte.
+ * ORDER BY RAND() wird verwendet, um bei jedem Aufruf ein zufälliges Produkt zu erhalten.
+ * LIMIT 1 stellt sicher, dass exakt ein Datensatz zurückgeliefert wird.
+ */
 $stmt = $conn->query("
     SELECT p.productID, p.model, p.description, p.imagePath, MIN(o.price) as minPrice
     FROM products p
@@ -12,13 +37,29 @@ $stmt = $conn->query("
     LIMIT 1
 ");
 
+// Prüfe, ob die Abfrage erfolgreich war und mindestens ein Ergebnis gefunden wurde
 if ($stmt && $stmt->num_rows > 0) {
+    /**
+     * @var array $randomProduct Assoziatives Array mit den abgerufenen Produktdaten.
+     */
     $randomProduct = $stmt->fetch_assoc();
+    
+    /** @var int $rID Die eindeutige Produkt-ID, zu einem Integer gecastet. */
     $rID = (int)$randomProduct['productID'];
+    
+    /** @var string $rModel Das Modell bzw. der Name des Produkts, HTML-Entitäten umgewandelt. */
     $rModel = htmlspecialchars($randomProduct['model'] ?? '');
+    
+    /** @var string $rDesc Die Beschreibung des Produkts, HTML-Entitäten umgewandelt. */
     $rDesc = htmlspecialchars($randomProduct['description'] ?? '');
+    
+    /** @var string $rImg Der Pfad zum Produktbild, Fallback auf Platzhalter falls leer. */
     $rImg = htmlspecialchars($randomProduct['imagePath'] ?? 'assets/images/placeholder.png');
+    
+    /** @var float|null $rPriceRaw Der unverarbeitete Mindestpreis aus der Datenbank. */
     $rPriceRaw = $randomProduct['minPrice'];
+    
+    /** @var string $rPriceFormatted Der formatierte Preis im deutschen Format (z.B. 100,00), oder Fallback 100,00 falls kein Preis gefunden wurde. */
     $rPriceFormatted = $rPriceRaw ? number_format((float)$rPriceRaw, 2, ',', '.') : '100,00';
     ?>
     <style>
@@ -219,21 +260,35 @@ if ($stmt && $stmt->num_rows > 0) {
     }
     </style>
 
+    <!-- Start des Werbebanner-Containers -->
     <div class="ad-recommendation-wrapper">
+        <!-- Fliegende Catchy Tags für mehr Aufmerksamkeit -->
         <div class="ad-floating-tag tag-left">SALE!</div>
         <div class="ad-floating-tag tag-right">HOT DEAL</div>
+        
+        <!-- Eigentlicher Inhalt der Empfehlung -->
         <div class="ad-recommendation">
+            <!-- Textinhalt des Banners (Badge, Titel, Preis, Beschreibung, Button) -->
             <div class="ad-recommendation__content">
                 <span class="ad-recommendation__badge">Empfehlung des Tages</span>
                 <h2><?= $rModel ?></h2>
                 <div class="ad-recommendation__price">ab <?= $rPriceFormatted ?> &euro;</div>
                 <?php
+                    /**
+                     * @brief Bestimmt die Länge der Beschreibung und kürzt sie bei Bedarf ab.
+                     * @details Verwendet Multibyte-String-Funktionen falls verfügbar (mb_strlen / mb_substr),
+                     * ansonsten die Standard-String-Funktionen.
+                     */
                     $descLen = function_exists('mb_strlen') ? mb_strlen($rDesc) : strlen($rDesc);
+                    
+                    /** @var string $descShort Gekürzte Beschreibung (max 120 Zeichen), mit angehängten Punkten falls gekürzt. */
                     $descShort = $descLen > 120 ? (function_exists('mb_substr') ? mb_substr($rDesc, 0, 120) : substr($rDesc, 0, 120)) . '...' : $rDesc;
                 ?>
                 <p><?= $descShort ?></p>
                 <a href="productpage.php?id=<?= $rID ?>" class="ad-recommendation__btn">Jetzt ansehen &rsaquo;</a>
             </div>
+            
+            <!-- Bild-Container zur Darstellung des Produktfotos -->
             <div class="ad-recommendation__image-wrapper">
                 <img src="<?= $rImg ?>" alt="<?= $rModel ?>">
             </div>
diff --git a/admin_users.php b/admin_users.php
index 2191f81..90aa944 100644
--- a/admin_users.php
+++ b/admin_users.php
@@ -1,79 +1,142 @@
 <?php
-// admin_users.php
+/**
+ * @file admin_users.php
+ * @brief Backend-Skript für die Benutzerverwaltung (Admin-Panel).
+ * @author GitHub Copilot
+ * @date 2026-04-03
+ * 
+ * @details Ermöglicht es Administratoren, Benutzer anzuzeigen, nach ihnen zu suchen,
+ * ihre Rollen zu ändern und sie endgültig zu löschen. Zentrale administrative Komponente
+ * des Geizkragen-Projekts.
+ */
 
+/** 
+ * @brief Bindet die Bootstrap-Datei ein, um die grundlegende Konfiguration, Session-Start 
+ * und Hilfsfunktionen zu laden.
+ */
 require_once __DIR__ . '/lib/bootstrap.php';
 
-// 1) Zugriffskontrolle – nur ADMIN
+/**
+ * 1) Zugriffskontrolle – nur ADMIN
+ * @brief Überprüft, ob der angemeldete Benutzer die "ADMIN"-Rolle besitzt, um unbefugten 
+ * Zugriff zu verhindern.
+ */
 if (empty($_SESSION['user_id']) || empty($_SESSION['user_roles']) || !in_array('ADMIN', $_SESSION['user_roles'], true)) {
+    /// @details Beendet die Skriptausführung mit einer Fehlermeldung, falls die Berechtigungen unzureichend sind. 
+    /// Das verhindert das Ausführen jeglicher Administrationslogik durch normale Nutzer.
     die("Zugriff verweigert. Nur Administratoren dürfen diese Seite sehen.");
 }
 
+/** 
+ * @var mysqli $conn
+ * @brief Datenbankverbindung, um Abfragen auf der Nutzer-Tabelle auszuführen.
+ */
 $conn = db_connect();
 
-// 2) Aktion: Benutzer löschen
+/**
+ * 2) Aktion: Benutzer löschen
+ * @brief Verarbeitet Löschanfragen für Benutzer.
+ */
 if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['delete_user_id'])) {
+    /// @var int $deleteId Konvertiert die übergebene Benutzer-ID sicher in einen Integer.
     $deleteId = (int)$_POST['delete_user_id'];
     
-    // Vermeide Selbstlöschung zur Sicherheit
+    /**
+     * @brief Vermeidet Selbstlöschung zur Sicherheit.
+     */
     if ($deleteId !== (int)$_SESSION['user_id']) {
-        // Zunächst Abhängigkeiten wie Rollen löschen
+        /// Entfernt zunächst die Einträge des Benutzers aus der `userRoles`-Tabelle, um Fremdschlüsselprobleme zu vermeiden.
         $conn->query("DELETE FROM userRoles WHERE userID = $deleteId");
         
+        /// @var mysqli_stmt $delStmt Bereitet das Lösch-Statement für die `users`-Tabelle vor.
         $delStmt = $conn->prepare("DELETE FROM users WHERE userID = ?");
+        /// Bindet die Benutzer-ID (Parameter-Typ i=Integer) an das Statement.
         $delStmt->bind_param("i", $deleteId);
+        /// Führt die Löschung in der Datenbank aus.
         $delStmt->execute();
+        /// Schließt das Prepared Statement.
         $delStmt->close();
         
+        /// @var string $successMsg Setzt die Erfolgsmeldung.
         $successMsg = "Benutzer erfolgreich gelöscht.";
     } else {
+        /// @var string $errorMsg Setzt die Fehlermeldung (Selbstlöschung unzulässig).
         $errorMsg = "Du kannst dich nicht selbst löschen.";
     }
 }
 
-// 2b) Aktion: Rollen aktualisieren
+/**
+ * 2b) Aktion: Rollen aktualisieren
+ * @brief Verarbeitet Massen-Aktualisierungen von Benutzerrollen aus dem Formular.
+ * @details Diese Aktion wird ausgelöst, wenn der Administrator auf "Alle Rollen speichern" klickt.
+ */
 if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['update_all_roles'])) {
+    /// @var array $usersRolesData Die neu zugewiesenen Benutzerrollen (ID als Key, Rollen-ID als Value).
     $usersRolesData = isset($_POST['user_roles']) && is_array($_POST['user_roles']) ? $_POST['user_roles'] : [];
+    /// @var array $submittedUsers Liste der Benutzer, deren Rollen übermittelt wurden.
     $submittedUsers = isset($_POST['submitted_users']) && is_array($_POST['submitted_users']) ? $_POST['submitted_users'] : [];
     
+    /// Iteriert über jeden übermittelten Benutzer, um seine Rollenzuweisungen anzupassen.
     foreach ($submittedUsers as $uId) {
+        /// @var int $updateId Die ID des aktuellen Benutzers.
         $updateId = (int)$uId;
         
+        /// Übergeht den Administrator, der die Seite gerade aufruft (Sicherheitsmassnahme).
         if ($updateId === (int)$_SESSION['user_id']) {
             continue;
         }
 
+        /// @var string $selectedRole Die aus dem Formular ausgewählte Rolle.
         $selectedRole = isset($usersRolesData[$updateId]) ? $usersRolesData[$updateId] : '';
         
+        /// @var mysqli_stmt $delStmt Entfernt vorab bestehende Rollenzuweisungen des Benutzers aus der DB.
         $delStmt = $conn->prepare("DELETE FROM userRoles WHERE userID = ?");
         $delStmt->bind_param("i", $updateId);
         $delStmt->execute();
         $delStmt->close();
         
+        /// Falls eine neue Rolle gewählt wurde, fügt diese in die Datenbank ein.
         if (!empty($selectedRole)) {
+            /// @var mysqli_stmt $insStmt Bereitet das Insert-Statement für `userRoles` vor.
             $insStmt = $conn->prepare("INSERT INTO userRoles (userID, roleID) VALUES (?, ?)");
+            /// @var int $roleIdInt Die Rolle wird sicher auf Integer gecastet.
             $roleIdInt = (int)$selectedRole;
+            /// Bindet UserID und Rollen-ID als Integer-Werte an die Query.
             $insStmt->bind_param("ii", $updateId, $roleIdInt);
             $insStmt->execute();
             $insStmt->close();
         }
     }
+    /// Setzt Erfolgs-Feedback für den Bereich Rollenverwaltung.
     $successMsg = "Rollen erfolgreich aktualisiert.";
 }
 
-// 2c) Alle verfügbaren Rollen laden
+/**
+ * 2c) Alle verfügbaren Rollen laden
+ * @brief Liest alle Rollen aus, um sie in den Dropdowns zur Auswahl anzuzeigen.
+ */
 $allRoles = [];
+/// Startet die Abfrage aller Datensätze der Tabelle `roles`, aufsteigend sortiert nach Namen.
 $rolesQuery = $conn->query("SELECT roleID, name FROM roles ORDER BY name ASC");
 if ($rolesQuery) {
+    /// Fügt jede gefundene Rolle dem Array hinzu.
     while ($r = $rolesQuery->fetch_assoc()) {
         $allRoles[] = $r;
     }
 }
 
-// 3) Alle Benutzer laden (mit Suche)
+/**
+ * 3) Alle Benutzer laden (mit Suche)
+ * @brief Verarbeitet Such- und Filterkriterien, um ein Set an Benutzern abzufragen.
+ */
+/// @var string $searchQuery Die übermittelte Suchanfrage.
 $searchQuery = isset($_GET['search']) ? trim($_GET['search']) : '';
+/// @var string $searchParam Wird als Parameter für die SQL-Wildcard-Suche vorbereitet.
 $searchParam = '%' . $searchQuery . '%';
+/// @var int $filterRole Ggf. übergebene Rollen-Filterung des Nutzers.
 $filterRole = isset($_GET['role']) ? (int)$_GET['role'] : 0;
 
+/// @var string $sql Basis-Select zum Abfragen der Benutzerinformationen und der gruppierten Rollen-IDs.
 $sql = "
     SELECT u.userID, u.email, u.displayname, u.profilePicture, u.isActive,
            GROUP_CONCAT(ur.roleID) as roleIDs
@@ -81,44 +144,61 @@ $sql = "
     LEFT JOIN userRoles ur ON u.userID = ur.userID
 ";
 
+/// @var array $whereClauses Array, mit dem die WHERE-Bedingungen flexibel aufgebaut werden sollen.
 $whereClauses = [];
+/// @var string $types Zusammenstellung von Typ-Spezifizierern für das `bind_param`.
 $types = "";
+/// @var array $params Liste der Werte, die für Prepared Statements gebunden werden.
 $params = [];
 
+/// Sofern die Suchanfrage nicht leer ist, wird nach Displayname und E-Mail gefiltert.
 if ($searchQuery !== '') {
     $whereClauses[] = "(u.displayname LIKE ? OR u.email LIKE ?)";
-    $types .= "ss";
+    $types .= "ss"; // ss referenziert 2 String Parameter
     $params[] = $searchParam;
     $params[] = $searchParam;
 }
 
+/// Fügt eine Bedingung hinzu, sofern mit einer bestimmten Rolle gefiltert werden soll.
 if ($filterRole > 0) {
-    // Da wir einen LEFT JOIN mit GROUP_CONCAT haben und auf Rollen filtern wollen,
-    // können wir als einfache Lösung einen Subselect für EXISTS machen, damit
-    // alle Rollen des Benutzers in GROUP_CONCAT erhalten bleiben, 
-    // aber nur Nutzer gezeigt werden, die auch die geforderte Rolle haben.
+    /**
+     * Da wir einen LEFT JOIN mit GROUP_CONCAT haben und auf Rollen filtern wollen,
+     * können wir als einfache Lösung einen Subselect für EXISTS machen, damit
+     * alle Rollen des Benutzers in GROUP_CONCAT erhalten bleiben, 
+     * aber nur Nutzer gezeigt werden, die auch die geforderte Rolle haben.
+     */
     $whereClauses[] = "EXISTS (SELECT 1 FROM userRoles sub_ur WHERE sub_ur.userID = u.userID AND sub_ur.roleID = ?)";
-    $types .= "i";
+    $types .= "i"; // i referenziert einen Integer
     $params[] = $filterRole;
 }
 
+/// Erweitert den SQL-String um die zusammengefassten Filter-Clauses.
 if (!empty($whereClauses)) {
     $sql .= " WHERE " . implode(" AND ", $whereClauses);
 }
 
+/// Fügt der SQL die finale Gruppierung und Sortierung nach User ID an.
 $sql .= " GROUP BY u.userID ORDER BY u.userID ASC";
 
+/// @var mysqli_stmt $stmtUsers Bereitet das komplette Nutzer-Bezugs-Statement vor.
 $stmtUsers = $conn->prepare($sql);
+/// Wenn Bindings existieren, binden wir sie dynamisch via `$params`-Spread-Operator an das SQL-Statement.
 if (!empty($params)) {
     $stmtUsers->bind_param($types, ...$params);
 }
+/// Das vorbereitete SQL ausführen.
 $stmtUsers->execute();
+/// @var mysqli_result $usersResult Empfängt das Result-Set aus der getätigten Fetch-Operation.
 $usersResult = $stmtUsers->get_result();
 
+/**
+ * @brief Sammelt Filter-Attribute für die Fortführung der URL-Parameter bei Massenänderungen.
+ */
 $formActionParams = [];
 if ($searchQuery !== '') $formActionParams['search'] = $searchQuery;
 if ($filterRole > 0) $formActionParams['role'] = $filterRole;
 
+/// @var string $formActionUrl Stellt die Request-URI des Formulars samt GET-Parametern zusammen.
 $formActionUrl = "admin_users.php";
 if (!empty($formActionParams)) {
     $formActionUrl .= "?" . http_build_query($formActionParams);
@@ -126,9 +206,22 @@ if (!empty($formActionParams)) {
 
 ?>
 
-<?php include 'header.php'; ?>
+<?php 
+/** @brief Bindet das allgemeine Header-Template ein. 
+ * @details Stellt den HTML-Kopf, CSS-Einbindungen und die Navigation bereit.
+ */
+include 'header.php'; 
+?>
 
+<!-- 
+  @brief Hauptcontainer für die Benutzerverwaltungs-Ansicht.
+  @details Nutzt die Klasse 'auth' für konsistentes Styling.
+-->
 <main class="auth" role="main">
+    <!-- 
+      @brief Abschnitt für das Grid-Layout der Admin-Tabelle.
+      @details Ermöglicht horizontales Scrollen auf kleineren Bildschirmen.
+    -->
     <section class="auth__grid" style="display: block; max-width: 95%; width: max-content; margin: 40px auto; overflow-x: auto;">
         <div class="auth__card" style="width: 100%; min-width: max-content;">
             <header class="auth__header">
@@ -136,10 +229,14 @@ if (!empty($formActionParams)) {
                 <p style="text-align: center; color: #94a3b8; font-size: 0.9rem; margin-top: 5px;">Hier siehst du alle registrierten Benutzer.</p>
             </header>
 
-            <?php if (!empty($successMsg)): ?>
+            <?php 
+            /** @brief Zeigt ggf. anfallende Erfolgsmeldungen formatiert an. */
+            if (!empty($successMsg)): ?>
                 <div class="auth__message auth__message--success" style="color: #4ade80; background: #064e3b; padding: 10px; border-radius: 4px; margin-bottom: 15px; text-align: center;"><?= htmlspecialchars($successMsg) ?></div>
             <?php endif; ?>
-            <?php if (!empty($errorMsg)): ?>
+            <?php 
+            /** @brief Zeigt ggf. anfallende Fehlermeldungen formatiert an. */
+            if (!empty($errorMsg)): ?>
                 <div class="auth__message auth__message--error" style="color: #f87171; background: #7f1d1d; padding: 10px; border-radius: 4px; margin-bottom: 15px; text-align: center;"><?= htmlspecialchars($errorMsg) ?></div>
             <?php endif; ?>
 
@@ -188,9 +285,13 @@ if (!empty($formActionParams)) {
                             </tr>
                         </thead>
                         <tbody>
-                            <?php while ($user = $usersResult->fetch_assoc()): ?>
+                            <?php 
+                            /** @brief Iteriert über die aus der Datenbank empfangene Liste der User. */
+                            while ($user = $usersResult->fetch_assoc()): ?>
                                 <?php 
+                                /// @var array $userRoles Explodiert (splittet) die aus den DB-Verknüpfungen abgeleiteten Strings in Arrays.
                                 $userRoles = !empty($user['roleIDs']) ? explode(',', $user['roleIDs']) : []; 
+                                /// @var bool $isSelf Validiert, ob das bearbeitete Profil zum gerade agierenden Admin-User gehört.
                                 $isSelf = (int)$user['userID'] === (int)$_SESSION['user_id'];
                                 ?>
                                 <tr style="border-bottom: 1px solid #1e293b;">
@@ -251,4 +352,7 @@ if (!empty($formActionParams)) {
     </section>
 </main>
 
-<?php include 'footer.php'; ?>
+<?php 
+/** @brief Bindet das allgemeine Footer-Template ein. */
+include 'footer.php'; 
+?>
diff --git a/api/search_products.php b/api/search_products.php
index 616052d..a2eed9c 100644
--- a/api/search_products.php
+++ b/api/search_products.php
@@ -1,39 +1,90 @@
 <?php
+/**
+ * @file search_products.php
+ * @brief Skript zur asynchronen Produktsuche (Live-Suche).
+ *
+ * @details Diese Datei dient als API-Endpunkt für die Echtzeit-Suche. Sie nimmt eine
+ * Suchanfrage über den GET-Parameter 'q' entgegen, durchsucht die Datenbanktabelle 'products'
+ * nach übereinstimmenden Modellnamen oder Beschreibungen und gibt die Resultate im JSON-Format zurück.
+ * Die Ergebnisse werden priorisiert, sodass exakte oder teilweise Übereinstimmungen im Modellnamen
+ * weiter oben erscheinen.
+ *
+ * @author Fabian
+ * @date 2026-04-04
+ */
 
 declare(strict_types=1);
 
+/**
+ * Einbinden der Bootstrap-Datei.
+ * Übernimmt die Basiskonfiguration und lädt wichtige Bibliotheken.
+ */
 require_once __DIR__ . '/../lib/bootstrap.php';
 
+/**
+ * Setzen des Content-Type-Headers auf JSON, da dieses Skript
+ * von JavaScript (AJAX/Fetch) aufgerufen wird und JSON erwartet.
+ */
 header('Content-Type: application/json; charset=utf-8');
+
+/**
+ * Sicherheits-Header, der verhindert, dass der Browser den MIME-Typ der Antwort
+ * errät (MIME-Sniffing). Erhöht die Sicherheit der API.
+ */
 header('X-Content-Type-Options: nosniff');
 
 try {
+    /**
+     * @var mysqli|PDO db_connect() Stellt eine Verbindung zur Datenbank her.
+     */
     $conn = db_connect();
 
-    // Query
+    /**
+     * @var string $q Der Such-String aus dem GET-Parameter 'q'. 
+     * Falls nicht vorhanden, wird ein leerer String verwendet.
+     */
     $q = isset($_GET['q']) ? (string)$_GET['q'] : '';
     $q = trim($q);
 
-    // Limit
+    /**
+     * @var int $limit Die maximale Anzahl der zurückzugebenden Suchergebnisse.
+     * Standard ist 8, falls kein Limit oder ein ungültiges Limit angegeben wird.
+     */
     $limit = isset($_GET['limit']) ? (int)$_GET['limit'] : 8;
+    
+    // Sicherstellen, dass mindestens 1 Ergebnis zurückgegeben wird
     if ($limit < 1) {
         $limit = 1;
     }
+    
+    // Begrenzen der maximalen Ergebnisse auf 15, um Datenbanküberlastung zu vermeiden
     if ($limit > 15) {
         $limit = 15;
     }
 
-    // Minimum query length to reduce load/noise
+    /**
+     * Mindestlänge für die Suche.
+     * Wenn der Suchbegriff leer ist oder aus weniger als 1 Zeichen besteht,
+     * wird ein leeres JSON-Array zurückgegeben und die Ausführung beendet.
+     */
     if (mb_strlen($q, 'UTF-8') < 1) {
         echo json_encode(['items' => []], JSON_UNESCAPED_UNICODE);
         exit;
     }
 
-    // Escape LIKE wildcards (% _), then add %...%
+    /**
+     * @var string $like Der escapte Such-String für das LIKE-Statement in SQL.
+     * Spezielle Wildcard-Zeichen (%) und (_) werden escapt, um SQL-Fehler 
+     * oder unerwartetes Verhalten bei Benutzereingaben zu verhindern.
+     */
     $like = addcslashes($q, "%_\\");
     $like = '%' . $like . '%';
 
-    // Simple search: model + description
+    /**
+     * @var string $sql Die SQL-Abfrage zur Suche nach Produkten.
+     * Durchsucht die Spalten `model` und `description`.
+     * Sortiert Treffer im `model` vor Treffern in der `description`.
+     */
     $sql = "
         SELECT p.productID, p.model, p.description, p.imagePath
         FROM products p
@@ -44,24 +95,49 @@ try {
         LIMIT ?
     ";
 
+    /**
+     * @var mysqli_stmt|PDOStatement $stmt Das vorbereitete SQL-Statement.
+     */
     $stmt = $conn->prepare($sql);
+    
+    // Überprüfen, ob das Statement erfolgreich vorbereitet wurde
     if (!$stmt) {
+        // HTTP-Statuscode 500 für einen internen Serverfehler setzen
         http_response_code(500);
         echo json_encode(['error' => 'DB-Query konnte nicht vorbereitet werden.'], JSON_UNESCAPED_UNICODE);
         exit;
     }
 
+    /**
+     * Binden der Parameter an das vorbereitete Statement.
+     * 'sssi' bedeutet: String, String, String, Integer.
+     */
     $stmt->bind_param('sssi', $like, $like, $like, $limit);
+    
+    // Ausführen der vorbereiteten Abfrage
     $stmt->execute();
+    
+    // Holen des Ergebnisses aus der Datenbank
     $res = $stmt->get_result();
 
+    /**
+     * @var array $items Das Array zur Speicherung der aufbereiteten Suchergebnisse.
+     */
     $items = [];
+    
+    // Durchlaufen der einzelnen Datensätze / Zeilen
     while ($row = $res->fetch_assoc()) {
+        /**
+         * @var int $id Die Produkt-ID iterierten Produkts.
+         */
         $id = (int)($row['productID'] ?? 0);
+        
+        // Überspringe ungültige oder defekte IDs
         if ($id <= 0) {
             continue;
         }
 
+        // Hinzufügen des formatierten Produkts in das Result-Array
         $items[] = [
             'id' => $id,
             'model' => (string)($row['model'] ?? ''),
@@ -71,9 +147,17 @@ try {
         ];
     }
 
+    /**
+     * Rückgabe des Arrays als JSON-kodierter String.
+     * JSON_UNESCAPED_UNICODE verhindert, dass Umlaute escapet werden (z.B. %u00e4).
+     */
     echo json_encode(['items' => $items], JSON_UNESCAPED_UNICODE);
+    
 } catch (Throwable $e) {
+    /**
+     * Fehlerbehandlung im Falle einer Exception (z.B. bei einem Datenbankfehler).
+     * Sendet einen 500er Statuscode und eine generische Fehlermeldung als JSON.
+     */
     http_response_code(500);
     echo json_encode(['error' => 'Serverfehler'], JSON_UNESCAPED_UNICODE);
 }
-
diff --git a/assets/css/catbar.css b/assets/css/catbar.css
index 3f6dd6d..94959b2 100644
--- a/assets/css/catbar.css
+++ b/assets/css/catbar.css
@@ -1,7 +1,21 @@
-/* ==========================================================
-   CATEGORY BAR
-   ========================================================== */
+/**
+ * @file catbar.css
+ * @brief This stylesheet defines the styling for the category navigation bar and the attribute filter bar.
+ *        It includes styles for navigation items, active/hover states, responsiveness, and filter form components.
+ * @author Geizkragen Project
+ */
 
+/**
+ * ==========================================================
+ *  CATEGORY BAR
+ * ==========================================================
+ */
+
+/**
+ * @class .home-nav
+ * @brief Main container for the home navigation bar.
+ *        Provides the background color, padding, and flexbox layout.
+ */
 .home-nav {
     width: 100%;
     display: flex;
@@ -10,7 +24,11 @@
     padding: 1px 0;
 }
 
-/* Inner zentriert */
+/**
+ * @class .home-nav__inner
+ * @brief Inner wrapper for the home navigation bar.
+ *        Ensures the content expands and is centered correctly using flexbox properties.
+ */
 .home-nav__inner {
     flex: 1;
     width: 100%;
@@ -19,7 +37,11 @@
     align-items: center;
 }
 
-/* List */
+/**
+ * @class .home-nav__list
+ * @brief Represents the unordered list containing the navigation links.
+ *        Removes default list styling and sets up a horizontal flexbox container.
+ */
 .home-nav__list {
     width: 100%;
     display: flex;
@@ -28,16 +50,27 @@
     padding: 0;
 }
 
-/* LI nur als Container */
+/**
+ * @selector .home-nav__list li
+ * @brief Defines the list items inside the navigation list.
+ *        Acts as a relative container for flex items.
+ */
 .home-nav__list li {
     flex: 1;
     position: relative;
 }
 
-/* =============================== */
-/* HOME CATEGORY LINKS             */
-/* =============================== */
+/**
+ * ===============================
+ * HOME CATEGORY LINKS
+ * ===============================
+ */
 
+/**
+ * @selector .home-nav__list li a
+ * @brief Styles the anchor tags inside the list items.
+ *        Sets up dimensions, padding, colors, font styling, and transitions for hover effects.
+ */
 .home-nav__list li a {
     width: 100%;
     padding: 8px 0;
@@ -59,32 +92,53 @@
     transition: background-color 0.2s ease;
 }
 
-/* Hover */
+/**
+ * @selector .home-nav__list li a:hover
+ * @brief Defines the hover state for the navigation links.
+ *        Applies a subtle white overlay using rgba.
+ */
 .home-nav__list li a:hover {
     background-color: rgba(255,255,255,0.18);
 }
 
-/* Active (Mausklick) */
+/**
+ * @selector .home-nav__list li a:active
+ * @brief Defines the active (mouse click down) state for the navigation links.
+ *        Increases the opacity of the white overlay for visual feedback.
+ */
 .home-nav__list li a:active {
     background-color: rgba(255,255,255,0.28);
 }
 
-/* Fokus (Tastatur) */
+/**
+ * @selector .home-nav__list li a:focus-visible
+ * @brief Defines the focus state, mainly for keyboard navigation accessibility.
+ *        Removes the default outline and adds a bespoke white box-shadow inset.
+ */
 .home-nav__list li a:focus-visible {
     outline: none;
     box-shadow: inset 0 0 0 2px rgba(255,255,255,0.5);
 }
 
-/* Aktive Kategorie (per PHP) */
+/**
+ * @selector .home-nav__list li a.active
+ * @brief Styles the currently active category link, typically set server-side via PHP or by JS.
+ */
 .home-nav__list li a.active {
     background-color: rgba(255,255,255,0.25);
 }
 
-/* =============================== */
-/* TRENNSTRICHE ZWISCHEN KATEGORIEN */
-/* =============================== */
+/**
+ * ===============================
+ * TRENNSTRICHE ZWISCHEN KATEGORIEN
+ * ===============================
+ */
 
-/* Trennstrich rechts – außer beim letzten */
+/**
+ * @selector .home-nav__list li:not(:last-child)::after
+ * @brief Creates vertical separator lines between category items,
+ *        except after the last item in the list.
+ */
 .home-nav__list li:not(:last-child)::after {
     content: "";
     position: absolute;
@@ -96,7 +150,11 @@
     background-color: rgba(255,255,255,0.3);
 }
 
-/* ─── Responsive: horizontal scroll on mobile ─── */
+/**
+ * @media (max-width: 768px)
+ * @brief Responsive styles for mobile and small tablet screens.
+ *        Enables horizontal scrolling for the category list with smooth scroll-snapping.
+ */
 @media (max-width: 768px) {
     .home-nav__inner {
         justify-content: flex-start;
@@ -140,16 +198,28 @@
     }
 }
 
-/* ==========================================================
-   ATTRIBUTE FILTER BAR
-   ========================================================== */
+/**
+ * ==========================================================
+ * ATTRIBUTE FILTER BAR
+ * ==========================================================
+ */
 
+/**
+ * @class .attrbar
+ * @brief Main container for the attribute filtering section.
+ *        Matches the background color of the category bar and provides bottom padding.
+ */
 .attrbar {
     width: 100%;
     background-color: rgb(45, 59, 80); /* Same as catbar background */
     padding: 0 0 16px 0;
 }
 
+/**
+ * @class .attrbar__inner
+ * @brief Inner container for the filter bar.
+ *        Includes top padding and a subtle top border to separate it from the category links above.
+ */
 .attrbar__inner {
     display: flex;
     justify-content: center;
@@ -159,6 +229,11 @@
     width: 100%;
 }
 
+/**
+ * @class .attr-filter-form
+ * @brief Wrapper for the filter form components.
+ *        Uses flexbox wrap to display filter items fluidly, aligning them appropriately across widths.
+ */
 .attr-filter-form {
     display: flex;
     flex-wrap: wrap;
@@ -171,6 +246,11 @@
     padding: 0 20px;
 }
 
+/**
+ * @class .attr-filter-item
+ * @brief Container for a single filter component (e.g. property label + dropdown).
+ *        Lays out child elements in a flex column.
+ */
 .attr-filter-item {
     display: flex;
     flex-direction: column; /* Stack label and select */
@@ -183,6 +263,11 @@
     max-width: 250px;
 }
 
+/**
+ * @selector .attr-filter-item label
+ * @brief Styles the label text above each dropdown within the filter items.
+ *        Uses uppercase text, smaller font size, and light spacing.
+ */
 .attr-filter-item label {
     font-weight: 600;
     text-transform: uppercase;
@@ -191,6 +276,11 @@
     color: rgba(255, 255, 255, 0.7);
 }
 
+/**
+ * @selector .attr-filter-item select
+ * @brief Styles the select (dropdown) inputs in the filter bar.
+ *        Removes default webkit/moz appearance and replaces it with custom backgrounds, borders, and a custom SVG arrow.
+ */
 .attr-filter-item select {
     width: 100%;
     padding: 10px 14px;
@@ -209,28 +299,51 @@
     background-size: 16px;
 }
 
+/**
+ * @selector .attr-filter-item select:hover
+ * @brief Hover state for the select elements, adjusting background and border color.
+ */
 .attr-filter-item select:hover {
     background-color: rgba(25, 30, 40, 0.8);
     border-color: rgba(255, 255, 255, 0.3);
 }
 
+/**
+ * @selector .attr-filter-item select:focus
+ * @brief Focus state for the select elements, applying primary color highlights.
+ */
 .attr-filter-item select:focus {
     outline: none;
     border-color: var(--color-primary, #274a97);
     box-shadow: 0 0 0 3px var(--color-primary-soft, rgba(39, 74, 151, 0.15));
 }
 
+/**
+ * @selector .attr-filter-item select option
+ * @brief Styles the option elements inside the dropdown.
+ *        Sets background and text colors to match the dark theme.
+ */
 .attr-filter-item select option {
     background-color: var(--bg-surface, #2d3b50);
     color: var(--text-primary, #ffffff);
 }
 
+/**
+ * @class .attr-filter-action
+ * @brief Container for form action elements, like the reset button.
+ *        Aligns to the bottom to match the input fields structurally.
+ */
 .attr-filter-action {
     display: flex;
     align-items: flex-end;
     padding-bottom: 2px; /* optical alignment with inputs */
 }
 
+/**
+ * @class .attr-filter-reset
+ * @brief Styles for the filter reset button.
+ *        Provides an inline-flex layout with a distinct danger (red) color scheme and hover effects.
+ */
 .attr-filter-reset {
     display: inline-flex;
     align-items: center;
@@ -248,12 +361,22 @@
     height: 40px; /* match select height */
 }
 
+/**
+ * @selector .attr-filter-reset:hover
+ * @brief Hover state for the reset button.
+ *        Creates a slight lift effect using transform and adds a shadow.
+ */
 .attr-filter-reset:hover {
     background-color: #b91c1c; /* slightly darker danger */
     transform: translateY(-1px);
     box-shadow: 0 4px 12px var(--color-danger-soft, rgba(217, 45, 32, 0.2));
 }
 
+/**
+ * @media (max-width: 768px)
+ * @brief Adjustments to the attribute filter layout for mobile and tablet devices.
+ *        Forces items to take up near-half width or full width, and correctly spaces action buttons.
+ */
 @media (max-width: 768px) {
     .attr-filter-item {
         flex: 1 1 45%;
diff --git a/assets/css/compare.css b/assets/css/compare.css
index 19a5bf7..d388467 100644
--- a/assets/css/compare.css
+++ b/assets/css/compare.css
@@ -1,8 +1,28 @@
+/**
+ * @file compare.css
+ * @brief Stylesheet für die Produktvergleichsseite.
+ *
+ * Diese Datei enthält alle spezifischen Styles für die Darstellung
+ * von zu vergleichenden Produkten in einer übersichtlichen Tabelle.
+ * Sie definiert Farben, Ränder, Schatten und Hover-Effekte für
+ * ein ansprechendes Dark-Mode-Design.
+ */
+
+/**
+ * @brief Hauptcontainer für die Vergleichsseite.
+ *
+ * Setzt den oberen Abstand und das allgemeine Padding für die Seite.
+ */
 .compare-page {
     margin-top: 2rem;
     padding: 1rem;
 }
 
+/**
+ * @brief Stil für den Seitentitel der Vergleichsseite.
+ *
+ * Definiert Schriftgröße, Ausrichtung, Farbe und Schriftstärke.
+ */
 .compare-title {
     font-size: 2.5rem;
     margin-bottom: 2rem;
@@ -11,6 +31,12 @@
     font-weight: 700;
 }
 
+/**
+ * @brief Styling für dem Fallstrick "Leerer Vergleich".
+ *
+ * Wird angezeigt, wenn keine Produkte zum Vergleich ausgewählt wurden.
+ * Enthält ein hervorgehobenes Box-Design mit Hintergrund und Schatten.
+ */
 .compare-empty {
     text-align: center;
     color: #cbd5e1;
@@ -21,6 +47,11 @@
     box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4);
 }
 
+/**
+ * @brief Titel-Stil für Produktkategorien beim Vergleich.
+ *
+ * Unterteilt die Tabelle grafisch nach Kategorien mit entsprechenden Rändern.
+ */
 .compare-category-title {
     margin-top: 3rem;
     margin-bottom: 1.5rem;
@@ -30,6 +61,12 @@
     padding-bottom: 0.8rem;
 }
 
+/**
+ * @brief Wrapper für die scrollbare Vergleichstabelle.
+ *
+ * Ermöglicht horizontales Scrollen bei vielen Produkten auf kleinen Bildschirmen
+ * und setzt das äußere Erscheinungsbild (Hintergrund, Rahmen, Schatten).
+ */
 .compare-table-wrapper {
     overflow-x: auto;
     background: #1e293b;
@@ -40,6 +77,11 @@
     border: 1px solid rgba(255, 255, 255, 0.05);
 }
 
+/**
+ * @brief Grund-Styling der Vergleichstabelle.
+ *
+ * Definiert Mindestbreite und reguliert die Zellabstände (Border-Collapse).
+ */
 .compare-table {
     width: 100%;
     border-collapse: separate;
@@ -47,6 +89,11 @@
     min-width: 800px;
 }
 
+/**
+ * @brief Stile für Tabellenköpfe und Datenzellen.
+ *
+ * Fügt Ränder, Abstände und zentrierte Ausrichtung sowie die Textfarbe hinzu.
+ */
 .compare-table th,
 .compare-table td {
     padding: 1.5rem 1rem;
@@ -56,10 +103,18 @@
     vertical-align: middle;
 }
 
+/**
+ * @brief Entfernt den unteren Rand für die letzte Tabellenzeile.
+ */
 .compare-table tbody tr:last-child td {
     border-bottom: none;
 }
 
+/**
+ * @brief Styling für die erste Spalte (Eigenschaftsnamen).
+ *
+ * Fixiert die Spalte links (Sticky) für leichteres horizontales Scrollen.
+ */
 .compare-table th:first-child,
 .compare-table td:first-child {
     text-align: left;
@@ -73,6 +128,11 @@
     box-shadow: 4px 0 6px -2px rgba(0, 0, 0, 0.2);
 }
 
+/**
+ * @brief Styling für den Tabellenkopf.
+ *
+ * Hebt die Kopfzeile farblich vom Rest der Tabelle ab.
+ */
 .compare-table th {
     background: #0f172a;
     font-weight: bold;
@@ -81,20 +141,41 @@
     padding-bottom: 2rem;
 }
 
+/**
+ * @brief Spezifisches Styling für die obere linke Zelle im Tabellenkopf.
+ *
+ * Erhöht den z-Index, damit sie beim Scrollen immer oben liegt.
+ */
 .compare-table th:first-child {
     background: #0f172a;
     z-index: 3;
     font-size: 1.2rem;
 }
 
+/**
+ * @brief Hover-Effekt für Tabellenzeilen im Körper (Datenzellen).
+ *
+ * Hebt die gesamte Zeile hervor, wenn der Benutzer darüber fährt.
+ */
 .compare-table tbody tr:hover td {
     background: #2a3a52;
 }
 
+/**
+ * @brief Hover-Effekt für die erste Zelle in der hovernden Tabellenzeile.
+ *
+ * Sorgt für eine konsistente Hervorhebung, auch bei der fixierten Spalte.
+ */
 .compare-table tbody tr:hover td:first-child {
     background: #2a3a52;
 }
 
+/**
+ * @brief Styling für das Produktbild im Tabellenkopf.
+ *
+ * Passt die Bildgröße an, setzt einen hellen Verlaufshintergrund und
+ * implementiert einen abgerundeten Rahmen sowie eine Größenübergangsanimation.
+ */
 .compare-product-img {
     height: 140px;
     object-fit: contain;
@@ -106,10 +187,20 @@
     transition: transform 0.3s ease;
 }
 
+/**
+ * @brief Hover-Animation für das Produktbild.
+ *
+ * Vergrößert das Bild leicht, wenn der Nutzer mit der Maus darüber fährt.
+ */
 .compare-product-img:hover {
     transform: scale(1.05);
 }
 
+/**
+ * @brief Styling für den Produktnamen.
+ *
+ * Definiert Farbe, Schriftgröße und Zeilenhöhe für den anklickbaren Produktnamen.
+ */
 .compare-product-name {
     font-size: 1.15rem;
     color: #60a5fa;
@@ -121,10 +212,20 @@
     line-height: 1.4;
 }
 
+/**
+ * @brief Hover-Effekt für den Produktnamen.
+ *
+ * Ändert die Textfarbe für visuelles Feedback beim Drüberfahren.
+ */
 .compare-product-name:hover {
     color: #93c5fd;
 }
 
+/**
+ * @brief Styling für den Button zum Entfernen eines Produkts aus dem Vergleich.
+ *
+ * Roter Button (Pill-Shape) mit Schatten und Übergangseffekten.
+ */
 .compare-remove-btn {
     background: #ef4444;
     color: white;
@@ -138,16 +239,32 @@
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 }
 
+/**
+ * @brief Hover-Effekt für den Entfernen-Button.
+ *
+ * Dunkelt das Rot ab, bewegt den Button leicht nach oben und vergrößert den Schatten.
+ */
 .compare-remove-btn:hover {
     background: #dc2626;
     transform: translateY(-1px);
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
 }
 
+/**
+ * @brief Zebra-Streifen-Muster für gerade Tabellenzeilen.
+ *
+ * Wirkt sich nicht auf die fixierte erste Spalte aus, um die Lesbarkeit
+ * dunkel schattierter Hintergründe aufrechtzuerhalten.
+ */
 .compare-table tbody tr:nth-child(even) td:not(:first-child) {
     background: rgba(15, 23, 42, 0.2);
 }
 
+/**
+ * @brief Styling für längere Beschreibungstexte im Vergleich.
+ *
+ * Begrenzt die Breite, richtet den Text linksbündig aus und optimiert die Zeilenhöhe.
+ */
 .desc-text {
     text-align: left;
     display: inline-block;
@@ -155,4 +272,3 @@
     line-height: 1.6;
     font-size: 0.95rem;
 }
-
diff --git a/assets/css/compcard.css b/assets/css/compcard.css
index e36f87d..4a623aa 100644
--- a/assets/css/compcard.css
+++ b/assets/css/compcard.css
@@ -1,8 +1,22 @@
-/* ==========================================================
-   PRODUCT CARDS & SCROLL – Animated Glass Cards
-   ========================================================== */
+/**
+ * @file compcard.css
+ * @brief Styles for Product Cards and Wishlist Cards.
+ * @details This file contains all CSS rules for displaying animated glass-style
+ * product cards, grid layouts, horizontal scroll sections, and the wishlist vertical layout.
+ * It also includes responsive design media queries for tablets and mobile devices.
+ */
 
-/* ─── Product Grid ─── */
+/**
+ * ==========================================================
+ * @section PRODUCT CARDS & SCROLL – Animated Glass Cards
+ * ==========================================================
+ */
+
+/**
+ * @brief Product Grid Container
+ * @details Creates a CSS grid with autofit columns of 260px each.
+ * Defines the spacing (gap) and padding around the grid.
+ */
 .product-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, 260px);
@@ -11,7 +25,12 @@
     justify-content: start;
 }
 
-/* ─── Product Card ─── */
+/**
+ * @brief Base Product Card Styles
+ * @details Sets up the generic layout, colors, shadow, and transitions for a product card.
+ * The card is designed with a dark background (#2d3b50) and an outline/border,
+ * utilizing a flexbox column layout. A fade-in animation (fadeInUp) is applied.
+ */
 .product-card {
     background: #2d3b50;
     border: 1px solid var(--border-subtle);
@@ -29,7 +48,11 @@
     animation: fadeInUp 0.5s ease both;
 }
 
-/* Gradient border glow on hover */
+/**
+ * @brief Gradient border glow effect on hover
+ * @details Uses a pseudo-element (::before) to create a glowing border using a linear gradient.
+ * It features a mask to only reveal the border area. Hidden by default (opacity: 0) and shown on hover.
+ */
 .product-card::before {
     content: "";
     position: absolute;
@@ -51,7 +74,11 @@
     pointer-events: none;
 }
 
-/* Inner glow effect on hover */
+/**
+ * @brief Inner glow effect on hover
+ * @details Uses a pseudo-element (::after) to add a subtle gradient at the top of the card.
+ * It is hidden by default and becomes visible when the card is hovered over.
+ */
 .product-card::after {
     content: "";
     position: absolute;
@@ -85,6 +112,11 @@
     outline-offset: 3px;
 }
 
+/**
+ * @brief Staggered entrance animation delays
+ * @details Applies incremental animation delays to cards within a horizontal scroll container
+ * to create a cascading fade-in effect.
+ */
 /* Stagger cards in scroll */
 .product-scroll .product-card:nth-child(1) { animation-delay: 0.05s; }
 .product-scroll .product-card:nth-child(2) { animation-delay: 0.1s; }
@@ -95,7 +127,11 @@
 .product-scroll .product-card:nth-child(7) { animation-delay: 0.35s; }
 .product-scroll .product-card:nth-child(8) { animation-delay: 0.4s; }
 
-/* ─── Card Image ─── */
+/**
+ * @brief Card Image Styling
+ * @details Defines the size, padding, and positioning of the product image inside the card.
+ * Uses a white background and adds a bottom border.
+ */
 .product-card img {
     width: 100%;
     height: 175px;
@@ -115,7 +151,11 @@
     transform: scale(1.05);
 }
 
-/* ─── Card Content ─── */
+/**
+ * @brief Card Content Container
+ * @details The wrapper for textual content (title, description, price) inside the card.
+ * Uses flexbox to space and align the text vertically.
+ */
 .product-card__content {
     padding: 1rem 1.25rem 1.15rem;
     flex: 1 1 auto;
@@ -127,6 +167,11 @@
     z-index: 2;
 }
 
+/**
+ * @brief Card Title Styling
+ * @details Styles the <h3> heading, limits it to 2 lines using webkit-line-clamp,
+ * and sets up a transition for color changes on hover.
+ */
 .product-card__content h3 {
     font-size: 0.92rem;
     font-weight: 600;
@@ -140,10 +185,19 @@
     transition: color var(--transition-normal);
 }
 
+/**
+ * @brief Card Title Hover State
+ * @details Changes the color of the <h3> heading when the parent card is hovered.
+ */
 .product-card:hover .product-card__content h3 {
     color: var(--text-invert);
 }
 
+/**
+ * @brief Card Description Styling
+ * @details Styles the <p> paragraph tag. Limits text to 4 lines with ellipsis
+ * and handles word-breaking to prevent overflow.
+ */
 .product-card__content p {
     font-size: 0.8rem;
     color: #ffffff;
@@ -156,6 +210,10 @@
     line-height: 1.5;
 }
 
+/**
+ * @brief Card Price Styling
+ * @details Formats the price element, making it bold, blue, and pushed to the bottom of the card.
+ */
 .product-card__content .price {
     font-size: 1.05rem;
     font-weight: 700;
@@ -164,12 +222,19 @@
     padding-top: 0.5rem;
 }
 
-/* ─── Product Sections ─── */
+/**
+ * @brief Product Section Wrapper
+ * @details Adds padding and an entrance animation for sections containing product lists/scrolls.
+ */
 .product-section {
     padding: 2rem 0 0.5rem;
     animation: fadeInUp 0.5s ease both;
 }
 
+/**
+ * @brief Product Section Title
+ * @details Styles the <h2> heading of the section, relative positioning is used for decorators.
+ */
 .product-section h2 {
     margin-left: 2rem;
     margin-bottom: 1.25rem;
@@ -181,6 +246,11 @@
     display: inline-block;
 }
 
+/**
+ * @brief Animated Accent Line for Section Title
+ * @details Creates a vertical gradient line next to the <h2> tag that GROWS into place
+ * using a CSS keyframe animation.
+ */
 /* Animated accent line */
 .product-section h2::before {
     content: "";
@@ -195,10 +265,18 @@
     animation: lineGrow 0.6s ease 0.3s forwards;
 }
 
+/**
+ * @brief Line Grow Keyframes
+ * @details Animation definition for the accent line, expanding its height to 80%.
+ */
 @keyframes lineGrow {
     to { height: 80%; }
 }
 
+/**
+ * @brief Subtle Glow for Section Title
+ * @details Adds a blurred, colored circle behind the <h2> for a decorative lighting effect.
+ */
 /* Subtle glow behind section title */
 .product-section h2::after {
     content: "";
@@ -214,7 +292,11 @@
     opacity: 0.3;
 }
 
-/* ─── Horizontal Scroll ─── */
+/**
+ * @brief Horizontal Scroll Container
+ * @details A flexible container that allows horizontal scrolling for product cards.
+ * Implements CSS scroll snapping and scroll masks to fade edges.
+ */
 .product-scroll {
     display: flex;
     gap: 1.25rem;
@@ -229,32 +311,59 @@
     -webkit-mask-image: linear-gradient(90deg, transparent, black 2rem, black calc(100% - 2rem), transparent);
 }
 
+/**
+ * @brief Product Scroll Item
+ * @details Fixes the width of cards within the scroll container and enables scroll snapping alignments.
+ */
 .product-scroll .product-card {
     flex: 0 0 270px;
     scroll-snap-align: start;
 }
 
+/**
+ * @brief Hide Scrollbar
+ * @details Removes the default scrollbar for Webkit browsers for a cleaner look.
+ */
 .product-scroll::-webkit-scrollbar {
     display: none;
 }
 
-/* ─── Responsive ─── */
+/**
+ * @section RESPONSIVE DESIGN FOR PRODUCT CARDS
+ */
+
+/**
+ * @brief Tablet Breakpoint (max-width: 768px)
+ * @details Adjusts grid columns, padding, font sizes, and card dimensions for tablet displays.
+ */
 @media (max-width: 768px) {
+    /**
+     * @brief Responsive Product Grid
+     */
     .product-grid {
         grid-template-columns: repeat(auto-fit, 160px);
         gap: 0.8rem;
         padding: 1rem;
     }
 
+    /**
+     * @brief Responsive Product Section Padding
+     */
     .product-section {
         padding: 1.25rem 0 0.25rem;
     }
 
+    /**
+     * @brief Responsive Section Title
+     */
     .product-section h2 {
         margin-left: 1rem;
         font-size: 1.1rem;
     }
 
+    /**
+     * @brief Responsive Horizontal Scroll
+     */
     .product-scroll {
         padding: 0.5rem 1rem 1.5rem;
         gap: 0.8rem;
@@ -262,69 +371,119 @@
         -webkit-mask-image: linear-gradient(90deg, transparent, black 1rem, black calc(100% - 1rem), transparent);
     }
 
+    /**
+     * @brief Responsive Product Scroll Item Size
+     */
     .product-scroll .product-card {
         flex: 0 0 200px;
         min-height: 230px;
     }
 
+    /**
+     * @brief Responsive Image Dimensions
+     */
     .product-card img {
         height: 130px;
         padding: 10px;
     }
 
+    /**
+     * @brief Responsive Content Padding
+     */
     .product-card__content {
         padding: 0.75rem 0.9rem 0.85rem;
         gap: 0.25rem;
     }
 
+    /**
+     * @brief Responsive Title Size
+     */
     .product-card__content h3 {
         font-size: 0.82rem;
     }
 
+    /**
+     * @brief Responsive Description Size
+     * @details Further limits description lines to 2 on tablets.
+     */
     .product-card__content p {
         font-size: 0.72rem;
         -webkit-line-clamp: 2;
     }
 
+    /**
+     * @brief Responsive Price Size
+     */
     .product-card__content .price {
         font-size: 0.92rem;
     }
 }
 
+/**
+ * @brief Mobile Breakpoint (max-width: 480px)
+ * @details Optimizes layouts for very small screens, converting grids and making cards even smaller.
+ */
 @media (max-width: 480px) {
+    /**
+     * @brief Mobile Strict 2-Column Grid
+     */
     .product-grid {
         grid-template-columns: repeat(2, 1fr);
         gap: 0.6rem;
         padding: 0.75rem;
     }
 
+    /**
+     * @brief Mobile Horizontal Scroll Item
+     */
     .product-scroll .product-card {
         flex: 0 0 170px;
         min-height: 210px;
     }
 
+    /**
+     * @brief Mobile Card Image
+     */
     .product-card img {
         height: 110px;
         padding: 8px;
     }
 
+    /**
+     * @brief Mobile Content Padding
+     */
     .product-card__content {
         padding: 0.6rem 0.7rem 0.7rem;
     }
 
+    /**
+     * @brief Mobile Title
+     * @details Limits the title to a single line.
+     */
     .product-card__content h3 {
         font-size: 0.78rem;
         -webkit-line-clamp: 1;
     }
 
+    /**
+     * @brief Mobile Description
+     * @details Completely hides the description text on small mobile screens to save space.
+     */
     .product-card__content p {
         display: none;
     }
 }
 
-/* ==========================================================
-   WISHLIST – Vertical List Layout
-   ========================================================== */
+/**
+ * ==========================================================
+ * @section WISHLIST – Vertical List Layout
+ * ==========================================================
+ */
+
+/**
+ * @brief Wishlist Layout Container
+ * @details Arranges wishlist items in a vertical, single-column flex column.
+ */
 .wishlist-grid {
     display: flex;
     flex-direction: column;
@@ -334,6 +493,11 @@
     margin: 0 auto;
 }
 
+/**
+ * @brief Wishlist Item Card
+ * @details Modifies the default product card to a horizontal row layout specifically for the wishlist.
+ * Ensures an exact height and equal stretching.
+ */
 .wishlist-card.product-card {
     display: flex;
     flex-direction: row;
@@ -351,6 +515,11 @@
     overflow: hidden;
 }
 
+/**
+ * @brief Wishlist Image Wrapper
+ * @details Styles the image specifically for the horizontal wishlist layout. Adds a border right
+ * instead of border bottom, ensuring it takes up full height with contain object-fit.
+ */
 .wishlist-card.product-card img {
     width: 160px;
     flex: 0 0 160px;
@@ -376,6 +545,10 @@
     transition: transform var(--transition-smooth);
 }
 
+/**
+ * @brief Wishlist Content Wrapper
+ * @details Vertically centers text in the available remaining width alongside the image.
+ */
 .wishlist-card.product-card .product-card__content {
     display: flex;
     flex-direction: column;
@@ -384,15 +557,27 @@
     flex: 1;
 }
 
+/**
+ * @brief Wishlist Hover Animation
+ * @details Moves the horizontal card slightly to the right entirely with a small scale increment.
+ */
 .wishlist-card.product-card:hover {
     transform: translateX(6px) scale(1.01);
 }
 
+/**
+ * @brief Wishlist Image Hover Zoom
+ * @details Zooms into the product image when hovering over a wishlist card.
+ */
 /* Bild-Zoom beim Hovern */
 .wishlist-card.product-card:hover img {
     transform: scale(1.08);
 }
 
+/**
+ * @brief Staggered entrance animation delays for Wishlist
+ * @details Sequential entry animations for wishlist items to replicate the staggered scroll effect.
+ */
 /* Stagger animation for wishlist items */
 .wishlist-grid .wishlist-card:nth-child(1) { animation-delay: 0.05s; }
 .wishlist-grid .wishlist-card:nth-child(2) { animation-delay: 0.1s; }
@@ -403,6 +588,14 @@
 .wishlist-grid .wishlist-card:nth-child(7) { animation-delay: 0.35s; }
 .wishlist-grid .wishlist-card:nth-child(8) { animation-delay: 0.4s; }
 
+/**
+ * @section RESPONSIVE DESIGN FOR WISHLIST
+ */
+
+/**
+ * @brief Tablet Breakpoint for Wishlist (max-width: 768px)
+ * @details Shrinks the total height, image size, and adjusts padding/font-size accordingly.
+ */
 @media (max-width: 768px) {
     .wishlist-grid {
         padding: 0.5rem 1rem 1.5rem;
@@ -433,6 +626,10 @@
     }
 }
 
+/**
+ * @brief Mobile Breakpoint for Wishlist (max-width: 480px)
+ * @details Minimizes the card height and hides descriptions to maximize screen real estate on mobile devices.
+ */
 @media (max-width: 480px) {
     .wishlist-card.product-card {
         height: 90px;
diff --git a/assets/css/login.css b/assets/css/login.css
index 35b306e..192f29c 100644
--- a/assets/css/login.css
+++ b/assets/css/login.css
@@ -1,8 +1,20 @@
+/**
+ * @file login.css
+ * @brief Stylesheet für die Authentifizierungsseiten (Login, Registrierung, Account).
+ * @details Dieses Stylesheet definiert das Layout, die Farben, Animationen und das responsive Verhalten
+ * für alle authentifizierungsbezogenen Ansichten. Es setzt auf ein "Animated Glassmorphism Design"
+ * und Grid-Layouts für strukturierte und ansprechende Benutzeroberflächen.
+ */
+
 /* ==========================================================
    AUTH PAGES – Login, Register, Account
    Animated Glassmorphism Design
    ========================================================== */
 
+/**
+ * @section AuthWrapper Auth-Wrapper
+ * @brief Das Hauptelement, das die Authentifizierungsformulare umschließt.
+ */
 /* ─── Auth Wrapper ─── */
 .auth {
     display: grid;
@@ -13,6 +25,10 @@
     z-index: 1;
 }
 
+/**
+ * @brief Dekorative animierte Kugel im Hintergrund.
+ * @details Nutzt einen radialen Farbverlauf und eine unendliche Float-Animation, um Tiefe zu erzeugen.
+ */
 /* Decorative ambient orb */
 .auth::before {
     content: "";
@@ -29,6 +45,10 @@
     animation: float 12s ease-in-out infinite;
 }
 
+/**
+ * @brief Standard-Raster für das Auth-Formular.
+ * @details Zentriert die Elemente horizontal und passt sich an die Bildschirmbreite bis zu 480px an.
+ */
 .auth__grid {
     display: grid;
     grid-template-columns: 1fr;
@@ -39,6 +59,10 @@
     align-items: center;
 }
 
+/**
+ * @section SideLayout Side Layout (Account page)
+ * @brief Layout für breitere Ansichten (z. B. auf der Account-Seite).
+ */
 /* ─── Side Layout (Account page) ─── */
 .auth__grid.auth__card__side {
     grid-template-columns: max-content 1fr;
@@ -51,6 +75,9 @@
     width: 100%;
 }
 
+/**
+ * @brief Layout für die seitliche Profilbild-Anzeige.
+ */
 .auth__grid.auth__card__side .auth__card.auth__card__side__picture {
     display: inline-grid;
     width: max-content;
@@ -68,6 +95,9 @@
     margin-bottom: 0;
 }
 
+/**
+ * @brief Styling und Hover-Effekte für das Profilbild.
+ */
 .auth__grid.auth__card__side .auth__card.auth__card__side__picture img {
     display: block;
     max-width: none;
@@ -86,6 +116,11 @@
     justify-items: center;
 }
 
+/**
+ * @section CardGlassmorphism Card – Glassmorphism
+ * @brief Stil für die Container-Karten der Formulare.
+ * @details Nutzt Dunkelmodus-Farben mit feinen Box-Shadows und Hover-Effekten zur Hervorhebung.
+ */
 /* ─── Card – Glassmorphism ─── */
 .auth__card,
 .auth__sideCard {
@@ -103,6 +138,10 @@
     box-shadow: var(--shadow-md), var(--shadow-glow-blue);
 }
 
+/**
+ * @brief Gestaffelte Animation für die Formular-Karten.
+ * @details Sorgt dafür, dass Elemente nacheinander eingeflogen werden.
+ */
 /* Stagger cards */
 .auth__grid .auth__card:nth-child(1) { animation-delay: 0s; }
 .auth__grid .auth__card:nth-child(2) { animation-delay: 0.08s; }
@@ -113,6 +152,10 @@
     padding: 22px;
 }
 
+/**
+ * @section CardHeader Card Header
+ * @brief Kopfzeile der Formular-Karten (Logo und Titel).
+ */
 /* ─── Card Header ─── */
 .auth__header {
     display: grid;
@@ -130,6 +173,9 @@
     grid-row: span 2;
 }
 
+/**
+ * @brief Styling des Haupttitels mit Text-Gradient-Effekt.
+ */
 .auth__title {
     margin: 0;
     font-size: 1.45rem;
@@ -142,6 +188,9 @@
     background-clip: text;
 }
 
+/**
+ * @brief Untertitel im Header (z.B. Eingabeaufforderungen).
+ */
 .auth__subtitle {
     margin: 0;
     color: var(--text-secondary);
@@ -149,6 +198,10 @@
     line-height: 1.4;
 }
 
+/**
+ * @section Alerts Animated Alerts
+ * @brief Verschiedene Benachrichtigungsboxen (Erfolg, Fehler, Warnungen).
+ */
 /* ─── Alerts – Animated ─── */
 .auth__alert__error {
     margin: 12px 0 14px;
@@ -168,6 +221,9 @@
     box-shadow: 0 8px 18px rgba(72, 142, 62, 0.18);
 }
 
+/**
+ * @brief Standard-Benachrichtigungs-Container mit Gradient-Hintergrund.
+ */
 .auth__alert {
     margin: 0.75rem 0 1rem;
     color: var(--text-invert);
@@ -187,6 +243,9 @@
     margin: 0.25rem 0;
 }
 
+/**
+ * @brief Spezifisches Styling für Fehlermeldungen innerhalb von Formularen.
+ */
 .auth__error {
     margin: 0.75rem 0;
     color: var(--color-danger);
@@ -198,11 +257,18 @@
     animation: scaleIn 0.3s ease;
 }
 
+/**
+ * @section Formular Formular-Elemente
+ * @brief Standard-Layout für die inneren Formularelemente.
+ */
 /* ─── Form ─── */
 .auth__form {
     margin-top: 0.5rem;
 }
 
+/**
+ * @brief Abstände für einzelne Eingabefelder.
+ */
 .auth__field {
     margin-top: 1rem;
 }
@@ -211,6 +277,9 @@
     margin-top: 1px;
 }
 
+/**
+ * @brief Styling der Labels über den Eingabefeldern.
+ */
 .auth__field label {
     display: block;
     margin: 0 0 0.4rem;
@@ -224,6 +293,9 @@
     color: var(--color-primary);
 }
 
+/**
+ * @brief Grundlegendes Styling für Text-, Passwort- und Datei-Eingabefelder.
+ */
 .auth__field input[type="text"],
 .auth__field input[type="password"],
 .auth__field input[type="email"],
@@ -241,6 +313,9 @@
     transition: all var(--transition-smooth);
 }
 
+/**
+ * @brief Fokus-Effekte (Ränder und Glow) für Eingabefelder.
+ */
 .auth__field input[type="text"]:focus,
 .auth__field input[type="password"]:focus,
 .auth__field input[type="email"]:focus,
@@ -255,6 +330,9 @@
     color: var(--text-muted);
 }
 
+/**
+ * @brief Spezifisches Styling für den Datei-Auswahl-Button.
+ */
 .auth__field input[type="file"]::file-selector-button {
     margin-right: 10px;
     padding: 10px 12px;
@@ -276,11 +354,18 @@
     transform: translateY(0px);
 }
 
+/**
+ * @section Actions Buttons & Aktionen
+ * @brief Hauptbuttons für die Formularübermittlung.
+ */
 /* ─── Actions ─── */
 .auth__actions {
     margin-top: 14px;
 }
 
+/**
+ * @brief Primärer Submit-Button mit Hover- und Active-Zuständen.
+ */
 .auth__submit {
     width: 100%;
     padding: 12px 14px;
@@ -303,6 +388,9 @@
     transform: translateY(0px);
 }
 
+/**
+ * @brief Deaktivierter Zustand für Submit-Buttons.
+ */
 .auth__submit:disabled {
     opacity: 0.5;
     cursor: not-allowed;
@@ -314,11 +402,18 @@
     display: none;
 }
 
+/**
+ * @brief Rote Variante des Submit-Buttons für gefährliche Aktionen (Löschen).
+ */
 /* Danger button variant */
 .auth__submit--danger {
     background: #d92d20;
 }
 
+/**
+ * @section Links Verlinkungen
+ * @brief Zusätzliche Textlinks unter den Formularen (z.B. Passwort vergessen, Registrieren).
+ */
 /* ─── Links ─── */
 .auth__links {
     margin-top: 14px;
@@ -341,6 +436,10 @@
     text-decoration: underline;
 }
 
+/**
+ * @section SideCard Seiten-Box
+ * @brief Gestaltung der Informationsbox auf der Seite von Registrierungsformularen etc.
+ */
 /* ─── Side Card ─── */
 .auth__sideCard {
     padding: 18px;
@@ -364,6 +463,10 @@
     color: #ffffff;
 }
 
+/**
+ * @section TipBox Tipp-Box
+ * @brief Container für hilfreiche Hinweise (oft neben Formularen platziert).
+ */
 /* ─── Tip Box ─── */
 .auth__tip {
     margin-top: 14px;
@@ -374,10 +477,17 @@
     color: #ffffff;
 }
 
+/**
+ * @section AccountPage ACCOUNT PAGE
+ * @brief Layout und spezifische Stile für die Account-Ansicht (Profil & Einstellungen).
+ */
 /* ==========================================================
    ACCOUNT PAGE – Profile + Settings Layout
    ========================================================== */
 
+/**
+ * @brief Modulares Grid-Layout für die Profilübersicht.
+ */
 /* ─── Main Grid ─── */
 .account {
     display: grid;
@@ -393,6 +503,10 @@
     grid-column: 1 / -1;
 }
 
+/**
+ * @section AccountProfile Profil-Sidebar
+ * @brief Der seitliche Bereich in der Account-Seite, der Profilbild und Name anzeigt.
+ */
 /* ─── Profile Sidebar ─── */
 .account__profile {
     position: sticky;
@@ -401,6 +515,9 @@
     padding: 2rem 1.5rem !important;
 }
 
+/**
+ * @brief Äußerer Container für das Profilbild auf der Profilseite mit Hover-Effekten.
+ */
 .account__avatar-wrapper {
     width: 140px;
     height: 140px;
@@ -425,6 +542,9 @@
     display: block;
 }
 
+/**
+ * @brief Der angezeigte Name auf dem Benutzerprofil.
+ */
 .account__displayname {
     margin: 0 0 1.25rem;
     font-size: 1.35rem;
@@ -433,6 +553,10 @@
     color: #ffffff;
 }
 
+/**
+ * @section AccountDetails Benutzerinformationen
+ * @brief Zeilenbasiertes Layout für die Auflistung von Profil-Details (wie E-Mail, Beitrittsdatum).
+ */
 /* ─── Detail Rows (User info) ─── */
 .account__details {
     margin: 0;
@@ -466,6 +590,10 @@
     font-weight: 500;
 }
 
+/**
+ * @section AccountSettings Account-Einstellungen
+ * @brief Der Hautpbereich für sämtliche Account-bezogene Aktionen und Einstellungen.
+ */
 /* ─── Settings Column ─── */
 .account__settings {
     display: flex;
@@ -473,11 +601,17 @@
     gap: 1.25rem;
 }
 
+/**
+ * @brief Karten-Container in den Account-Einstellungen.
+ */
 /* ─── Section Cards ─── */
 .account__section {
     padding: 1.5rem !important;
 }
 
+/**
+ * @brief Bereichstitel mit optionalem Icon (Nutzt Flexlayout).
+ */
 .account__section-title {
     display: flex;
     align-items: center;
@@ -497,6 +631,10 @@
     color: var(--color-danger);
 }
 
+/**
+ * @section QuickActions Quick Actions
+ * @brief Verknüpfungen zu bestimmten Aktionen oder externen Seiten im Profil.
+ */
 /* ─── Quick Actions ─── */
 .account__quick-actions {
     display: flex;
@@ -520,6 +658,10 @@
     opacity: 0.9;
 }
 
+/**
+ * @section DangerSection Danger Zone
+ * @brief Rote Warnbereiche für unwiderrufliche Aktionen (z.B. Profil löschen).
+ */
 /* ─── Danger Section ─── */
 .account__section--danger {
     border-color: rgba(217, 45, 32, 0.15);
@@ -537,6 +679,10 @@
     line-height: 1.5;
 }
 
+/**
+ * @section Responsive Responsive Design
+ * @brief Media-Queries für mobile Endgeräte und Tablet-Optimierungen.
+ */
 /* ==========================================================
    RESPONSIVE
    ========================================================== */
@@ -597,6 +743,9 @@
     }
 }
 
+/**
+ * @brief Optimierungen für Smartphones (max-width: 520px).
+ */
 @media (max-width: 520px) {
     .auth {
         padding: 1rem 0.75rem 2rem;
@@ -650,6 +799,9 @@
     }
 }
 
+/**
+ * @brief Optimierungen für sehr schmale Bildschirme (max-width: 380px).
+ */
 @media (max-width: 380px) {
     .auth {
         padding: 0.75rem 0.5rem 1.5rem;
diff --git a/assets/css/productAdder.css b/assets/css/productAdder.css
index 2e03e80..ab8dfb2 100644
--- a/assets/css/productAdder.css
+++ b/assets/css/productAdder.css
@@ -1,8 +1,26 @@
+/**
+ * @file productAdder.css
+ * @brief Stylesheet für die Produkt-Hinzufügen-Seite (Product Adder).
+ * @details Enthält spezielle Stile für Dropdowns (Select-Elemente) und Formulare,
+ * die für die Dateneingabe beim Hinzufügen von Produkten benötigt werden.
+ * Das grundlegende Layout basiert auf den gleichen Prinzipien wie die Auth-Bereiche,
+ * wurde jedoch für breitere Formulare (bis zu 1100px) angepasst.
+ */
+
 /* ==========================================================
    PRODUCT ADDER – Dropdown & Form Styles
    ========================================================== */
 
+/**
+ * @section SelectDropdown Dropdown-Auswahl
+ * @brief Stile für den Container und die Elemente eines Dropdown-Menüs.
+ */
 /* ─── Select Wrapper ─── */
+/**
+ * @brief Umhüllender Container für das Select-Element.
+ * @details Zentriert das Element, beschränkt die Maximalbreite auf 520px und
+ * verwendet ein CSS-Grid für saubere Abstände (gap) zwischen Label und Feld.
+ */
 .auth__select__wrap {
     width: min(520px, 100%);
     display: grid;
@@ -11,11 +29,20 @@
     margin-top: 12px;
 }
 
+/**
+ * @brief Label-Text für die Dropdown-Auswahl.
+ */
 .auth__select__label {
     font-size: 0.95rem;
     color: #ffffff;
 }
 
+/**
+ * @brief Hauptstil für das Dropdown-/Select-Feld.
+ * @details Beinhaltet Customizing des nativen Aussehens (appearance: none) und
+ * fügt ein eigenes Pfeil-Icon via Hintergrund-Gradient (background-image) hinzu.
+ * Das Feld besitzt Übergangseffekte für den Hover- und Focus-State.
+ */
 .auth__select {
     width: 100%;
     box-sizing: border-box;
@@ -39,17 +66,31 @@
     background-repeat: no-repeat;
 }
 
+/**
+ * @brief Fokus-Status für das Dropdown-Feld.
+ * @details Erhält den gleichen leuchtenden Rand (Glow) wie die Standard-Eingabefelder.
+ */
 .auth__select:focus {
     border-color: rgba(37, 99, 235, 0.75);
     box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.28);
 }
 
+/**
+ * @brief Stil der Auswahloptionen (options) innerhalb des Selects.
+ */
 .auth__select option {
     background: #1e2537;
     color: #ffffff;
 }
 
+/**
+ * @section ProductAdderLayout Seiten-Layout
+ * @brief Definition der Haupt-Grid-Strukturen auf der Product-Adder-Seite.
+ */
 /* ─── Product Adder Layout ─── */
+/**
+ * @brief Äußerer Container für das Formular, der die volle Viewport-Höhe einnimmt.
+ */
 .auth {
     min-height: 100vh;
     display: grid;
@@ -58,6 +99,11 @@
     gap: 16px;
 }
 
+/**
+ * @brief Das Raster für die Formular-Zellen/Karten.
+ * @details Erlaubt eine maximale Breite von 1100px. Bietet genügend Platz für
+ * umfangreiche Produkt-Eigenschaften und Beschreibungen.
+ */
 .auth__grid {
     width: min(1100px, 100%);
     display: grid;
@@ -65,6 +111,10 @@
     gap: 20px;
 }
 
+/**
+ * @brief Die Kachel/Karte für einzelne Bereiche des Formulars.
+ * @details Hebt Formularabschnitte visuell mit Hintergrundfarbe, Rand und Schatteneffekt ab.
+ */
 .auth__card {
     background: #1f2937;
     border: 1px solid #5e6075;
@@ -73,27 +123,47 @@
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
 }
 
+/**
+ * @brief Kopfbereich innerhalb einer Kachel (auth__card).
+ */
 .auth__header {
     margin-bottom: 12px;
 }
 
+/**
+ * @brief Titeltext der Kachel.
+ */
 .auth__title {
     margin: 0;
     font-size: 1.1rem;
     color: #ffffff;
 }
 
+/**
+ * @section FormularElemente Formulare und Eingabefelder
+ * @brief Spezifische Layout-Vorgaben für die Formular-Bestandteile.
+ */
+/**
+ * @brief Ein einzelner Formular-Eintrag (Label + Input).
+ */
 .auth__form {
     display: grid;
     gap: 8px;
     margin-bottom: 12px;
 }
 
+/**
+ * @brief Labels, die sich im Product-Adder-Formular befinden.
+ */
 .auth__form label {
     font-size: 0.95rem;
     color: #ffffff;
 }
 
+/**
+ * @brief Standard-Text-Eingabefeld.
+ * @details Verfügt über anpassbare Abstände, Randfarben und einen sanften Übergang bei Interaktionen.
+ */
 .auth__input {
     width: 100%;
     box-sizing: border-box;
@@ -106,26 +176,47 @@
     transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
 }
 
+/**
+ * @brief Zustand bei aktivem Feld (Fokus).
+ */
 .auth__input:focus {
     border-color: rgba(37, 99, 235, 0.75);
     box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.28);
 }
 
+/**
+ * @brief Aussehen des Platzhalter-Textes.
+ */
 .auth__input::placeholder {
     color: #cbd5e1;
 }
 
+/**
+ * @brief Mehrzeilige Textarea für die Beschreibung.
+ * @details Mindesthöhe definiert, nur vertikal anpassbar, verbesserte Zeilenhöhe für besseren Lesefluss.
+ */
 textarea.auth__input {
     min-height: 80px;
     resize: vertical;
     line-height: 1.5;
 }
 
+/**
+ * @brief Verhindert unnötigen Abstand beim letzten Formular-Element innerhalb der Karte.
+ */
 .auth__card .auth__form:last-child {
     margin-bottom: 0;
 }
 
+/**
+ * @section Responsive Responsive Design
+ * @brief Anpassungen für Tabets und mobile Geräte.
+ */
 /* ─── Responsive ─── */
+/**
+ * @brief Ansichten bis zu 720px Breite (Tablets/kleine Bildschirme).
+ * @details Reduziert die Paddings, um mehr Platz für den Inhalt zu schaffen.
+ */
 @media (max-width: 720px) {
     .auth {
         padding: 24px 12px;
@@ -136,6 +227,11 @@ textarea.auth__input {
     }
 }
 
+/**
+ * @brief Ansichten bis zu 480px Breite (Smartphones).
+ * @details Stark reduzierte Abstände (Padding, Gaps) und angepasste Schriftgrößen
+ * zur Sicherstellung der Lesbarkeit auf mobilen Displays.
+ */
 @media (max-width: 480px) {
     .auth {
         padding: 1rem 0.5rem;
diff --git a/assets/css/productpage.css b/assets/css/productpage.css
index cf1f5bd..b51eb24 100644
--- a/assets/css/productpage.css
+++ b/assets/css/productpage.css
@@ -1,8 +1,24 @@
-/* ==========================================================
-   PRODUCT PAGE – Animated Detail View & Shop Offers
-   ========================================================== */
+/**
+ * @file productpage.css
+ * @brief Stylesheet für die Produktdetailseite
+ * @details Diese Datei enthält alle CSS-Regeln für die Darstellung der Produktdetails, der Shop-Angebote sowie der Bewertungsbereiche.
+ * Es werden moderne CSS-Features wie Flexbox, Grid, CSS-Variablen und Keyframe-Animationen verwendet.
+ * @version 1.0
+ */
 
-/* ─── Wrapper ─── */
+/**
+ * ==========================================================
+ * @section PRODUCT PAGE – Animated Detail View & Shop Offers
+ * @brief Hauptbereich der Produktseite, der das Bild und die Details umschließt.
+ * ==========================================================
+ */
+
+/**
+ * @class .product-wrapper
+ * @brief Haupt-Container für die Produktpräsentation.
+ * @details Setzt eine maximale Breite, zentriert den Inhalt und ordnet die linke und rechte Spalte nebeneinander an.
+ * Nutzt eine Fade-In-Animation beim Laden.
+ */
 .product-wrapper {
     max-width: 1200px;
     margin: 3rem auto;
@@ -12,12 +28,25 @@
     animation: fadeInUp 0.6s ease both;
 }
 
-/* ─── Left Column (Image) ─── */
+/**
+ * ─── Left Column (Image) ───
+ */
+
+/**
+ * @class .product-left
+ * @brief Linke Spalte, die das Produktbild enthält.
+ * @details Nimmt 1 Teil des Flex-Containers ein und wird mit einer leichten Verzögerung eingeblendet.
+ */
 .product-left {
     flex: 1;
     animation: fadeInUp 0.5s ease 0.1s both;
 }
 
+/**
+ * @class .product-image-box
+ * @brief Box-Container für das eigentliche Produktbild.
+ * @details Beinhaltet Hintergrund, Schatten, Abrundungen und positioniert pseudo-Elemente für Hover-Effekte.
+ */
 .product-image-box {
     background: #ffffff;
     padding: 40px;
@@ -29,7 +58,11 @@
     overflow: hidden;
 }
 
-/* Animated gradient border on hover */
+/**
+ * @pseudo .product-image-box::before
+ * @brief Animierter Gradient-Rahmen beim Hover.
+ * @details Nutzt Maskierungen (-webkit-mask), um einen leuchtenden Rahmen über den bestehenden Border zu zeichnen, der weich eingeblendet wird.
+ */
 .product-image-box::before {
     content: "";
     position: absolute;
@@ -44,15 +77,29 @@
     transition: opacity var(--transition-smooth);
 }
 
+/**
+ * @state .product-image-box:hover
+ * @brief Hover-Zustand für die Bild-Box.
+ * @details Verstärkt den Schatten und hebt das Element leicht an (TranslateY).
+ */
 .product-image-box:hover {
     box-shadow: var(--shadow-lg), var(--shadow-glow-blue);
     transform: translateY(-4px);
 }
 
+/**
+ * @state .product-image-box:hover::before
+ * @brief Macht den Gradient-Rahmen beim Hover sichtbar.
+ */
 .product-image-box:hover::before {
     opacity: 1;
 }
 
+/**
+ * @element .product-image-box img
+ * @brief Das Produktbild selbst.
+ * @details Skaliert sich weich beim Hovern.
+ */
 .product-image-box img {
     max-width: 100%;
     height: auto;
@@ -60,16 +107,33 @@
     transition: transform var(--transition-smooth);
 }
 
+/**
+ * @state .product-image-box:hover img
+ * @brief Vergrößert das Bild beim Hover leicht (Scale).
+ */
 .product-image-box:hover img {
     transform: scale(1.03);
 }
 
-/* ─── Right Column (Details) ─── */
+/**
+ * ─── Right Column (Details) ───
+ */
+
+/**
+ * @class .product-right
+ * @brief Rechte Spalte für die Produktdetails (Titel, Beschreibung, Spezifikationen).
+ * @details Nimmt 1.2 Teile des Flex-Platzes ein, etwas mehr als das Bild. Besitzt ebenfalls eine Fade-In Animation.
+ */
 .product-right {
     flex: 1.2;
     animation: fadeInUp 0.5s ease 0.2s both;
 }
 
+/**
+ * @class .product-title
+ * @brief Titel des Produkts.
+ * @details Große weiße Schrift mit einer Trennlinie nach unten.
+ */
 .product-title {
     font-size: 32px;
     color: white;
@@ -79,6 +143,10 @@
     padding-bottom: 15px;
 }
 
+/**
+ * @class .product-desc
+ * @brief Kurze Beschreibungstexte zum Produkt.
+ */
 .product-desc {
     font-size: 23px;
     line-height: 1.7;
@@ -86,6 +154,11 @@
     margin-bottom: 15px;
 }
 
+/**
+ * @class .product-specs
+ * @brief Container für die Haupt-Spezifikationen.
+ * @details Richtet Elemente vertikal aus (Flex-Column) mit entsprechendem Abstand (Gap).
+ */
 .product-specs {
     display: flex;
     color: #ffffff;
@@ -93,6 +166,11 @@
     gap: 12px;
 }
 
+/**
+ * @element .product-specs p
+ * @brief Einzelner Spec-Absatz.
+ * @details Halbtransparenter Hintergrund mit Blur-Effekt, um Tiefe zu simulieren.
+ */
 .product-specs p {
     padding: 0.7rem 1rem;
     background: rgba(27, 34, 48, 0.65);
@@ -103,19 +181,36 @@
     transition: all var(--transition-normal);
 }
 
+/**
+ * @state .product-specs p:hover
+ * @brief Hover-Effekt für Specs.
+ * @details Der Hintergrund wird deckender und der Text rückt leicht nach rechts ein.
+ */
 .product-specs p:hover {
     background: rgba(27, 34, 48, 0.9);
     border-color: var(--border-default);
     transform: translateX(4px);
 }
 
+/**
+ * @element .product-specs p strong
+ * @brief Hervorhebung des Spec-Labels innerhalb eines Absatzes.
+ */
 .product-specs p strong {
     color: var(--text-muted);
     font-weight: 500;
     margin-right: 0.5rem;
 }
 
-/* ─── Spec Rows ─── */
+/**
+ * ─── Spec Rows ───
+ */
+
+/**
+ * @class .spec-row
+ * @brief Zeilenbasierte Darstellung einer einzelnen Spezifikation.
+ * @details Nutzt Flexbox zur Verteilung von Label und Wert an die äußeren Ränder.
+ */
 .spec-row {
     display: flex;
     justify-content: space-between;
@@ -126,22 +221,38 @@
     transition: all var(--transition-normal);
 }
 
+/**
+ * @state .spec-row:hover
+ * @brief Hover-Verhalten einer Spec-Row.
+ * @details Ähnlich wie bei .product-specs p, leichtes Verschieben nach rechts.
+ */
 .spec-row:hover {
     background: rgba(27, 34, 48, 0.9);
     transform: translateX(4px);
 }
 
+/**
+ * @class .spec-name
+ * @brief Der Name bzw. die Bezeichnung der Spezifikation in der Zeile.
+ */
 .spec-name {
     font-weight: 500;
     color: var(--text-secondary);
 }
 
+/**
+ * @class .spec-value
+ * @brief Der tatsächliche Wert der Spezifikation, fett hervorgehoben.
+ */
 .spec-value {
     font-weight: 600;
     color: var(--text-primary);
 }
 
-/* ─── Responsive Product Page ─── */
+/**
+ * ─── Responsive Product Page ───
+ * @details Media-Queries für Tablets und Smartphones im Produkt-Bereich.
+ */
 @media (max-width: 900px) {
     .product-wrapper {
         flex-direction: column;
@@ -207,9 +318,18 @@
     }
 }
 
-/* ==========================================================
-   SHOP OFFERS – Animated List
-   ========================================================== */
+/**
+ * ==========================================================
+ * @section SHOP OFFERS – Animated List
+ * @brief Bereich für die Anzeige verfügbarer Angebote verschiedener Shops.
+ * ==========================================================
+ */
+
+/**
+ * @class .shop-offers
+ * @brief Container, der alle Shop-Angebote umschließt.
+ * @details Vertikales Flexbox-Layout mit Animation.
+ */
 .shop-offers {
     max-width: 1200px;
     margin: 0 auto 4rem;
@@ -220,6 +340,11 @@
     animation: fadeInUp 0.6s ease 0.3s both;
 }
 
+/**
+ * @class .shop-line
+ * @brief Eine einzelne Zeile für ein Shop-Angebot.
+ * @details Nutzt ein CSS Grid mit 3 Spalten (Bild, Details, Preis/Button).
+ */
 .shop-line {
     display: grid;
     grid-template-columns: 250px 1fr auto;
@@ -235,7 +360,10 @@
     overflow: hidden;
 }
 
-/* Gradient accent line on left */
+/**
+ * @pseudo .shop-line::before
+ * @brief Dekorationslinie (Gradient), die links auftaucht, wenn man über das Angebot fährt.
+ */
 .shop-line::before {
     content: "";
     position: absolute;
@@ -249,29 +377,49 @@
     transition: opacity var(--transition-smooth);
 }
 
+/**
+ * @state .shop-line:hover
+ * @brief Interaktion mit einem Shop-Angebot.
+ * @details Ändert die Hintergrundfarbe, erzeugt Schatten und animiert nach oben.
+ */
 .shop-line:hover {
     background: #243248;
     transform: translateY(-3px);
     box-shadow: 0 8px 20px rgba(0,0,0,0.25);
 }
 
+/**
+ * @state .shop-line:hover::before
+ * @brief Blendet die linke Dekorationslinie beim Hovern ein.
+ */
 .shop-line:hover::before {
     opacity: 1;
 }
 
-/* Stagger shop lines */
+/**
+ * @brief Staggered Animations
+ * @details Verzögert das Einblenden der Listenelemente sukzessive für einen Wasserfall-Effekt.
+ */
 .shop-line:nth-child(1) { animation-delay: 0.35s; }
 .shop-line:nth-child(2) { animation-delay: 0.42s; }
 .shop-line:nth-child(3) { animation-delay: 0.49s; }
 .shop-line:nth-child(4) { animation-delay: 0.56s; }
 .shop-line:nth-child(5) { animation-delay: 0.63s; }
 
+/**
+ * @class .shop-left
+ * @brief Linker Abschnitt in einem Shop-Angebot (Logo).
+ */
 .shop-left {
     display: flex;
     align-items: center;
     gap: 1rem;
 }
 
+/**
+ * @class .shop-logo
+ * @brief Container für das Shop-Logo.
+ */
 .shop-logo {
     display: flex;
     align-items: center;
@@ -279,6 +427,10 @@
     flex-shrink: 0;
 }
 
+/**
+ * @element .shop-logo img
+ * @brief Das Bild des Shop-Logos.
+ */
 .shop-logo img {
     max-height: 36px;
     max-width: 90px;
@@ -287,25 +439,45 @@
     transition: transform var(--transition-normal);
 }
 
+/**
+ * @state .shop-line:hover .shop-logo img
+ * @brief Skaliert das Logo beim Hovern über die Zeile.
+ */
 .shop-line:hover .shop-logo img {
     transform: scale(1.08);
 }
 
+/**
+ * @class .shop-name
+ * @brief Textanzeige des Shop-Namens.
+ */
 .shop-name {
     color: white;
     font-weight: 600;
     font-size: 16px;
 }
 
+/**
+ * @element .shop-name a
+ * @brief Link auf den Shop, falls der Name geklickt wird.
+ */
 .shop-name a {
     color: white;
     text-decoration: none;
 }
 
+/**
+ * @state .shop-name a:hover
+ * @brief Unterstreichung beim Hover über den Shop-Namen.
+ */
 .shop-name a:hover {
     text-decoration: underline;
 }
 
+/**
+ * @class .shop-middle
+ * @brief Mittlerer Abschnitt mit Zusatzinfos (Versand, Bestand).
+ */
 .shop-middle {
     display: flex;
     align-items: center;
@@ -314,6 +486,10 @@
     color: #cbd5e1;
 }
 
+/**
+ * @class .shop-shipping
+ * @brief Bereich für Versandinformationen.
+ */
 .shop-shipping {
     display: flex;
     flex-direction: column;
@@ -321,6 +497,10 @@
     line-height: 1.4;
 }
 
+/**
+ * @class .shop-stock
+ * @brief Lagerbestands-Anzeige.
+ */
 .shop-stock {
     font-weight: 500;
     display: flex;
@@ -328,16 +508,28 @@
     gap: 6px;
 }
 
+/**
+ * @state .shop-stock.in-stock::before
+ * @brief Prefix-Icon für vorrätige Artikel (grünes Häkchen).
+ */
 .shop-stock.in-stock::before {
     content: "✔";
     color: #22c55e;
 }
 
+/**
+ * @state .shop-stock.out-stock::before
+ * @brief Prefix-Icon für nicht vorrätige Artikel (rotes X).
+ */
 .shop-stock.out-stock::before {
     content: "✖";
     color: #ef4444;
 }
 
+/**
+ * @class .shop-price
+ * @brief Preis-Hervorhebung ganz rechts in der Shop-Zeile.
+ */
 .shop-price {
     margin-left: auto;
     font-size: 18px;
@@ -345,10 +537,18 @@
     color: #4ade80;
 }
 
+/**
+ * @state .shop-line:hover .shop-price
+ * @brief Skaliert den Preis leicht bei Interaktion.
+ */
 .shop-line:hover .shop-price {
     transform: scale(1.05);
 }
 
+/**
+ * @class .no-shop
+ * @brief Fallback-Ansicht, wenn kein Angebot vorhanden ist.
+ */
 .no-shop {
     background: #1f2a3a;
     padding: 20px;
@@ -357,7 +557,10 @@
     text-align: center;
 }
 
-/* ─── Responsive Shop Offers ─── */
+/**
+ * ─── Responsive Shop Offers ───
+ * @details Umbrüche für Shop-Zeilen bei kleineren Screens.
+ */
 @media (max-width: 900px) {
     .shop-line {
         grid-template-columns: 1fr;
@@ -431,10 +634,17 @@
 }
 
 
-/* ==========================================================
-   PRODUCT REVIEWS
-   ========================================================== */
+/**
+ * ==========================================================
+ * @section PRODUCT REVIEWS
+ * @brief Anzeige und Strukturierung der Produktbewertungen.
+ * ==========================================================
+ */
 
+/**
+ * @class .reviews
+ * @brief Wrapper für alle Bewertungen, inklusive Überschrift.
+ */
 .reviews {
     max-width: 1200px;
     margin: 3rem auto 5rem;
@@ -445,6 +655,10 @@
     animation: fadeInUp 0.6s ease 0.4s both;
 }
 
+/**
+ * @class .reviews-title
+ * @brief Titel der Bewertungs-Sektion.
+ */
 .reviews-title {
     color: white;
     font-size: 22px;
@@ -452,7 +666,11 @@
     margin-bottom: 0.5rem;
 }
 
-/* Review Card */
+/**
+ * @class .review-card
+ * @brief Einzelne Karte für eine Bewertung von einem User.
+ * @details Beinhaltet Hintergrund, Ränder und relative Positionierung für den Border-Effekt.
+ */
 .review-card {
     background: #1c2533; /* leicht dunkler als shop */
     border: 1px solid #2a374a;
@@ -463,7 +681,10 @@
     overflow: hidden;
 }
 
-/* leichter Akzent rechts statt links */
+/**
+ * @pseudo .review-card::after
+ * @brief Gradient-Rahmenkante auf der rechten Seite, die beim Hover erscheint.
+ */
 .review-card::after {
     content: "";
     position: absolute;
@@ -476,17 +697,28 @@
     transition: opacity var(--transition-smooth);
 }
 
+/**
+ * @state .review-card:hover
+ * @brief Hover-State der Bewertung, hellt Hintergrund leicht auf.
+ */
 .review-card:hover {
     background: #223047;
     transform: translateY(-3px);
     box-shadow: 0 8px 18px rgba(0,0,0,0.25);
 }
 
+/**
+ * @state .review-card:hover::after
+ * @brief Blendet den farbigen Rand rechts ein.
+ */
 .review-card:hover::after {
     opacity: 1;
 }
 
-/* Header */
+/**
+ * @class .review-header
+ * @brief Kopfzeile einer Bewertung (User links, Sterne/Datum z.B. rechts).
+ */
 .review-header {
     display: flex;
     justify-content: space-between;
@@ -494,7 +726,10 @@
     margin-bottom: 0.6rem;
 }
 
-/* User-Info (Avatar + Name/Datum) */
+/**
+ * @class .review-user-info
+ * @brief Container für Avatar, Name und ggf. Datum.
+ */
 .review-user-info {
     display: flex;
     align-items: center;
@@ -502,7 +737,10 @@
     min-width: 0; /* erlaubt Text-Ellipsis/Umbruch in flex */
 }
 
-/* Profilbild in Reviews: immer gleich groß und angenehm klein */
+/**
+ * @class .review-avatar
+ * @brief Profilbild in kleinen Abmessungen innerhalb der Review.
+ */
 .review-avatar {
     width: clamp(28px, 3.2vw, 34px);
     height: clamp(28px, 3.2vw, 34px);
@@ -515,7 +753,10 @@
     background: #0f172a; /* falls Bild transparent/fehlend */
 }
 
-/* Optional: verhindert, dass lange Namen Layout sprengen */
+/**
+ * @class .review-user
+ * @brief Benutzername des Reviewers, wird abgeschnitten (ellipsis), wenn zu lang.
+ */
 .review-user {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -528,34 +769,55 @@
     font-size: 15px;
 }
 
-/* Sterne */
+/**
+ * @class .review-rating
+ * @brief Container für die Sterne-Bewertung.
+ */
 .review-rating {
     display: flex;
     gap: 4px;
 }
 
+/**
+ * @class .star
+ * @brief Ein einzelnes Stern-Symbol.
+ */
 .star {
     font-size: 16px;
     color: #475569;
     transition: transform 0.2s ease;
 }
 
+/**
+ * @state .star.filled
+ * @brief Aktiver, goldener Stern.
+ */
 .star.filled {
     color: #fbbf24;
 }
 
+/**
+ * @state .review-card:hover .star.filled
+ * @brief Skaliert goldene Sterne innerhalb einer Karte beim Hovern.
+ */
 .review-card:hover .star.filled {
     transform: scale(1.15);
 }
 
-/* Kommentar */
+/**
+ * @class .review-comment
+ * @brief Textinhalt einer Bewertung.
+ */
 .review-comment {
     color: #cbd5e1;
     font-size: 14px;
     line-height: 1.6;
 }
 
-/* Keine Reviews */
+/**
+ * @class .no-review
+ * @brief Fallback-Text, falls noch keine Bewertungen existieren.
+ */
 .no-review {
     background: #1f2a3a;
     border: 1px solid #2f3c52;
@@ -565,10 +827,17 @@
 }
 
 
-/* ==========================================================
-   REVIEW OVERVIEW BOX (Linke Spalte) - Kompakte Version
-   ========================================================== */
+/**
+ * ==========================================================
+ * @section REVIEW OVERVIEW BOX (Linke Spalte) - Kompakte Version
+ * @brief Zusammenfassung aller Bewertungen (Durchschnittsnote und Sterne-Verteilung).
+ * ==========================================================
+ */
 
+/**
+ * @class .review-overview-box
+ * @brief Sidebar-Box zur Übersicht der Gesamtbewertung.
+ */
 .review-overview-box {
     background: #1c2533;
     border: 1px solid #2a374a;
@@ -580,6 +849,10 @@
     animation: fadeInUp 0.5s ease 0.3s both;
 }
 
+/**
+ * @class .overview-header
+ * @brief Headerbereich der Übersicht (Zentriert, Rand unten).
+ */
 .overview-header {
     text-align: center;
     /* Abstände verringert */
@@ -588,6 +861,10 @@
     border-bottom: 1px solid #2a374a;
 }
 
+/**
+ * @class .overview-avg
+ * @brief Die durchschnittliche Bewertung als große Zahl.
+ */
 .overview-avg {
     /* Schriftgröße der Durchschnittsnote von 2.5rem auf 2rem verkleinert */
     font-size: 2rem;
@@ -599,11 +876,19 @@
     gap: 0.4rem;
 }
 
+/**
+ * @element .overview-avg .star
+ * @brief Der Stern-Icon neben der Durchschnittsbewertung.
+ */
 .overview-avg .star {
     /* Stern etwas verkleinert */
     font-size: 1.5rem;
 }
 
+/**
+ * @class .overview-count
+ * @brief Anzahl der Gesamtbewertungen in kleinem Text.
+ */
 .overview-count {
     /* Textgröße leicht verkleinert */
     font-size: 0.8rem;
@@ -611,6 +896,10 @@
     margin-top: 0.2rem;
 }
 
+/**
+ * @class .overview-breakdown
+ * @brief Container für die Verteilung (Progress-Bars) der einzelnen Sterne (5,4,3,2,1).
+ */
 .overview-breakdown {
     display: flex;
     flex-direction: column;
@@ -618,6 +907,10 @@
     gap: 0.4rem;
 }
 
+/**
+ * @class .breakdown-row
+ * @brief Einzelne Zeile der Verteilung (Stellt z.B. 5 Sterne und deren Balken dar).
+ */
 .breakdown-row {
     display: flex;
     align-items: center;
@@ -626,6 +919,10 @@
     font-size: 0.8rem;
 }
 
+/**
+ * @class .breakdown-stars
+ * @brief Beschriftung am Start des Balkens ("5 Sterne").
+ */
 .breakdown-stars {
     width: 50px;
     white-space: nowrap;
@@ -633,6 +930,10 @@
     color: #cbd5e1;
 }
 
+/**
+ * @class .breakdown-bar-bg
+ * @brief Dunkler Hintergrund des Fortschrittsbalkens.
+ */
 .breakdown-bar-bg {
     flex: 1;
     /* Höhe der Balken von 8px auf 6px reduziert */
@@ -642,6 +943,11 @@
     overflow: hidden;
 }
 
+/**
+ * @class .breakdown-bar-fill
+ * @brief Goldene Füllung des Balkens, je nach prozentualer Verteilung.
+ * @details Nutzt CSS-Transitions für einen aufbauenden Lade-Effekt.
+ */
 .breakdown-bar-fill {
     height: 100%;
     background: #fbbf24;
@@ -649,12 +955,20 @@
     transition: width 0.8s ease-out;
 }
 
+/**
+ * @class .breakdown-num
+ * @brief Absolute Anzahl der Bewertungen für diese Stern-Reihe.
+ */
 .breakdown-num {
     width: 20px;
     text-align: right;
     color: #94a3b8;
 }
 
+/**
+ * @class .overview-empty
+ * @brief Nachricht in der Übersicht, wenn keine Daten vorliegen.
+ */
 .overview-empty {
     text-align: center;
     color: #94a3b8;
@@ -662,10 +976,17 @@
     font-size: 0.85rem;
 }
 
-/* ==========================================================
-   REVIEW HINZUFÜGEN (Formular)
-   ========================================================== */
+/**
+ * ==========================================================
+ * @section REVIEW HINZUFÜGEN (Formular)
+ * @brief Bereich zum Schreiben einer eigenen Bewertung.
+ * ==========================================================
+ */
 
+/**
+ * @class .review-add
+ * @brief Wrapper für das Eingabeformular.
+ */
 .review-add {
     max-width: 1200px;
     margin: 0 auto 2rem;
@@ -673,13 +994,22 @@
     animation: fadeInUp 0.5s ease 0.4s both;
 }
 
+/**
+ * @class .review-input-form
+ * @brief Das eigentliche Formular-Layout (vertikal).
+ */
 .review-input-form {
     display: flex;
     flex-direction: column;
     gap: 1.2rem;
 }
 
-/* --- Sterne-Auswahl (Radio-Button Trick) --- */
+/**
+ * --- Sterne-Auswahl (Radio-Button Trick) ---
+ * @class .rating-input
+ * @brief Behälter für die Radio-Buttons zur Sternbewertung.
+ * @details Nutzt `flex-direction: row-reverse;`, um CSS-basiertes Highlighten vorheriger Sterne durch Geschwister-Selektoren zu ermöglichen.
+ */
 .rating-input {
     display: flex;
     /* Dreht die Reihenfolge um für den Hover-Effekt */
@@ -688,12 +1018,18 @@
     gap: 0.3rem;
 }
 
-/* Versteckt die eigentlichen runden Radio-Buttons */
+/**
+ * @element .rating-input input[type="radio"]
+ * @brief Die eigentlichen HTML-Radio-Elemente werden versteckt.
+ */
 .rating-input input[type="radio"] {
     display: none;
 }
 
-/* Stylt die Labels (die Sterne) */
+/**
+ * @element .rating-input label
+ * @brief Das angezeigte Label, das visuell als auswählbarer Stern fungiert.
+ */
 .rating-input label {
     font-size: 2.2rem;
     color: #475569; /* Dunkelgrau für leere Sterne */
@@ -701,19 +1037,30 @@
     transition: color 0.2s ease, transform 0.2s ease;
 }
 
-/* Hover-Logik: Färbt den gehoverten/geklickten Stern und alle "folgenden" (durch row-reverse sind das die linken) */
+/**
+ * @state .rating-input label:hover, ...
+ * @brief Hover- und Auswahl-Mechanik für die interaktiven Sterne.
+ * @details Wenn ein Stern gehovert oder angewählt (checked) wird, färben sich dieser und alle in der row-reverse-Reihenfolge nachfolgenden Sterne golden.
+ */
 .rating-input label:hover,
 .rating-input label:hover ~ label,
 .rating-input input[type="radio"]:checked ~ label {
     color: #fbbf24; /* Das gleiche Gelb wie bei deinen bestehenden Sternen */
 }
 
-/* Kleiner Pop-Effekt beim drüberfahren */
+/**
+ * @state .rating-input label:hover
+ * @brief Kleiner Skalierungseffekt beim drüberfahren.
+ */
 .rating-input label:hover {
     transform: scale(1.15);
 }
 
-/* --- Textarea --- */
+/**
+ * --- Textarea ---
+ * @class .review-comment-input
+ * @brief Das Mahrzeilen-Textfeld für den eigentlichen Kommentar.
+ */
 .review-comment-input {
     width: 100%;
     background: #1f2a3a;
@@ -727,6 +1074,10 @@
     transition: all var(--transition-smooth);
 }
 
+/**
+ * @state .review-comment-input:focus
+ * @brief Klick/Fokus-Status für das Textfeld, zeigt grünen Rahmen.
+ */
 .review-comment-input:focus {
     outline: none;
     border-color: #4ade80; /* Passt zu deinem grünen Button-Stil */
@@ -734,13 +1085,20 @@
     box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.1);
 }
 
-/* --- Button Positionierung --- */
+/**
+ * --- Button Positionierung ---
+ * @element .review-input-form .auth__submit
+ * @brief Stilisierung des Absende-Buttons innerhalb der Reviews.
+ */
 .review-input-form .auth__submit {
     align-self: flex-start; /* Button bleibt linksbündig und wird nicht über die ganze Breite gestreckt */
     padding: 0.8rem 2.5rem;
 }
 
-/* Container für alle fertigen Bewertungen */
+/**
+ * @class .reviews-all
+ * @brief Container für die Auflistung aller existierenden Bewertungen (ohne das Eingabeformular).
+ */
 .reviews-all {
     display: flex;
     flex-direction: column;
@@ -748,7 +1106,11 @@
     margin-bottom: 3rem; /* Etwas Luft nach unten zum "Hinzufügen"-Formular */
 }
 
-/* Kommentar-Text */
+/**
+ * @class .review-comment
+ * @brief (Wiederholung/Erweiterung) Anpassung des Kommentar-Texts für Wortumbrüche.
+ * @details Zwingt den Browser bei überlangen Wörtern rechtzeitig umzubrechen, damit das Layout nicht explodiert.
+ */
 .review-comment {
     color: #cbd5e1;
     font-size: 14px;
diff --git a/assets/js/search-autocomplete.js b/assets/js/search-autocomplete.js
deleted file mode 100644
index ea1da7c..0000000
--- a/assets/js/search-autocomplete.js
+++ /dev/null
@@ -1,222 +0,0 @@
-(function () {
-  'use strict';
-
-  function debounce(fn, delay) {
-    var t;
-    return function () {
-      var ctx = this;
-      var args = arguments;
-      clearTimeout(t);
-      t = setTimeout(function () { fn.apply(ctx, args); }, delay);
-    };
-  }
-
-  function createDropdownEl() {
-    var el = document.createElement('div');
-    el.className = 'searchDropdown';
-    el.hidden = true;
-    el.setAttribute('role', 'listbox');
-    return el;
-  }
-
-  function attachToInput(input) {
-    if (!input || input.dataset.autocompleteBound === '1') return;
-    input.dataset.autocompleteBound = '1';
-
-    // wrapper for positioning
-    var wrapper = input.closest('.nav__searchField');
-    if (!wrapper) return;
-    wrapper.classList.add('nav__searchField--hasDropdown');
-
-    // dropdown
-    var dropdown = createDropdownEl();
-    wrapper.appendChild(dropdown);
-
-    var activeIndex = -1;
-    var items = [];
-    var abortController = null;
-
-    function close() {
-      dropdown.hidden = true;
-      dropdown.innerHTML = '';
-      dropdown.classList.remove('is-open');
-      activeIndex = -1;
-      items = [];
-    }
-
-    function open() {
-      dropdown.hidden = false;
-      dropdown.classList.add('is-open');
-    }
-
-    function setStatus(text) {
-      dropdown.innerHTML = '';
-      var row = document.createElement('div');
-      row.className = 'searchDropdown__status';
-      row.textContent = text;
-      dropdown.appendChild(row);
-      open();
-    }
-
-    function render(list) {
-      dropdown.innerHTML = '';
-      items = list || [];
-      activeIndex = -1;
-
-      if (!items.length) {
-        setStatus('Keine Produkte gefunden.');
-        return;
-      }
-
-      for (var i = 0; i < items.length; i++) {
-        (function (idx) {
-          var it = items[idx];
-
-          var a = document.createElement('a');
-          a.className = 'searchDropdown__item';
-          a.href = it.url;
-          a.setAttribute('role', 'option');
-          a.tabIndex = -1;
-
-          var img = document.createElement('img');
-          img.className = 'searchDropdown__img';
-          img.alt = '';
-          img.loading = 'lazy';
-          img.decoding = 'async';
-          img.src = it.imagePath && it.imagePath.length ? it.imagePath : 'assets/images/placeholder.png';
-
-          var meta = document.createElement('div');
-          meta.className = 'searchDropdown__meta';
-
-          var title = document.createElement('div');
-          title.className = 'searchDropdown__title';
-          title.textContent = it.model || '';
-
-          var desc = document.createElement('div');
-          desc.className = 'searchDropdown__desc';
-          desc.textContent = it.description || '';
-
-          meta.appendChild(title);
-          meta.appendChild(desc);
-
-          a.appendChild(img);
-          a.appendChild(meta);
-
-          a.addEventListener('mouseenter', function () {
-            setActive(idx);
-          });
-
-          dropdown.appendChild(a);
-        })(i);
-      }
-
-      open();
-    }
-
-    function setActive(idx) {
-      var children = dropdown.querySelectorAll('.searchDropdown__item');
-      for (var i = 0; i < children.length; i++) {
-        children[i].classList.toggle('is-active', i === idx);
-      }
-      activeIndex = idx;
-    }
-
-    function fetchResults(q) {
-      if (abortController) {
-        abortController.abort();
-      }
-      abortController = new AbortController();
-
-      var url = 'api/search_products.php?q=' + encodeURIComponent(q) + '&limit=8';
-
-      setStatus('Suche…');
-
-      fetch(url, { signal: abortController.signal, headers: { 'Accept': 'application/json' } })
-        .then(function (r) {
-          if (!r.ok) throw new Error('HTTP ' + r.status);
-          return r.json();
-        })
-        .then(function (data) {
-          render((data && data.items) ? data.items : []);
-        })
-        .catch(function (err) {
-          if (err && err.name === 'AbortError') return;
-          setStatus('Fehler bei der Suche.');
-        });
-    }
-
-    var debounced = debounce(function () {
-      var q = (input.value || '').trim();
-      if (q.length < 1) {
-        close();
-        return;
-      }
-      fetchResults(q);
-    }, 180);
-
-    input.addEventListener('input', debounced);
-
-    input.addEventListener('focus', function () {
-      var q = (input.value || '').trim();
-      if (q.length >= 1) {
-        fetchResults(q);
-      }
-    });
-
-    input.addEventListener('keydown', function (e) {
-      if (dropdown.hidden) return;
-
-      if (e.key === 'Escape') {
-        close();
-        return;
-      }
-
-      var max = items.length - 1;
-      if (max < 0) return;
-
-      if (e.key === 'ArrowDown') {
-        e.preventDefault();
-        var next = activeIndex + 1;
-        if (next > max) next = 0;
-        setActive(next);
-      } else if (e.key === 'ArrowUp') {
-        e.preventDefault();
-        var prev = activeIndex - 1;
-        if (prev < 0) prev = max;
-        setActive(prev);
-      } else if (e.key === 'Enter') {
-        if (activeIndex >= 0) {
-          var links = dropdown.querySelectorAll('.searchDropdown__item');
-          if (links[activeIndex]) {
-            e.preventDefault();
-            window.location.href = links[activeIndex].href;
-          }
-        }
-      }
-    });
-
-    document.addEventListener('click', function (e) {
-      if (wrapper.contains(e.target)) return;
-      close();
-    });
-
-    // prevent blur-close when clicking inside dropdown until navigation happens
-    dropdown.addEventListener('mousedown', function (e) {
-      e.preventDefault();
-    });
-  }
-
-  function init() {
-    var inputs = document.querySelectorAll('input.nav__searchInput[name="search"]');
-    for (var i = 0; i < inputs.length; i++) {
-      attachToInput(inputs[i]);
-    }
-  }
-
-  if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', init);
-  } else {
-    init();
-  }
-})();
-
diff --git a/attrbar.php b/attrbar.php
index 8c233c4..112cfc9 100644
--- a/attrbar.php
+++ b/attrbar.php
@@ -1,10 +1,40 @@
 <?php
-// attrbar.php
+/**
+ * @file attrbar.php
+ * @brief Inkludierte Datei für die Darstellung und Verarbeitung der Attribut-Filterleiste (attrbar).
+ *
+ * @details Diese Datei generiert eine dynamische Filterleiste basierend auf der aktuell 
+ * ausgewählten Produktkategorie. Sie stellt eine Verbindung zur Datenbank her, ruft 
+ * zugehörige Attribute ab und generiert ein HTML-Formular zur Filterung der Produkte nach spezifischen Attributen.
+ * Das Senden des Formulars geschieht automatisch bei einer Änderung eines Auswahlfeldes (onchange) oder über 
+ * einen Button (falls JavaScript deaktiviert ist).
+ */
+
+// Binden der benötigten Bootstrap-Datei ein, welche grundlegende Konfigurationen und Hilfsfunktionen zur Verfügung stellt.
 require_once __DIR__ . '/lib/bootstrap.php';
+
+/**
+ * @var mysqli $conn
+ * @brief Stellt eine Verbindung zur Datenbank her.
+ */
 $conn = db_connect();
+
+/**
+ * @var string $currentCategory
+ * @brief Speichert die aktuell gesetzte Kategorie aus dem GET-Parameter. Standardwert ist 'all'.
+ */
 $currentCategory = isset($_GET['category']) ? $_GET['category'] : 'all';
 
+/**
+ * @var int|null $catId
+ * @brief Beinhaltet die numerische ID der aktuellen Kategorie zur Verwendung in Datenbankabfragen.
+ */
 $catId = null;
+
+/**
+ * @var array $categoriesConfig
+ * @brief Ein Mapping-Array, welches Kategorie-Slugs (Strings) auf deren entsprechende Datenbank-IDs (Integer) mappt.
+ */
 $categoriesConfig = [
     'iphone'  => 20,
     'ipad'    => 21,
@@ -13,14 +43,24 @@ $categoriesConfig = [
     'accessories' => 24,
 ];
 
+// Überprüfen, ob die gewählte Kategorie im Konfigurations-Array vorhanden ist.
 if (isset($categoriesConfig[$currentCategory])) {
+    // Falls vorhanden, wird die entsprechende Kategorie-ID für weitere Abfragen gesetzt.
     $catId = $categoriesConfig[$currentCategory];
 }
 
-// Fetch available attributes for the category if selected
+/**
+ * @var array $attributes
+ * @brief Speichert die verfügbaren Attribute (z.B. Farbe, Speichergröße) für die selektierte Kategorie.
+ */
 $attributes = [];
+
+// Attribute nur laden, wenn eine gültige Kategorie-ID gefunden wurde.
 if ($catId) {
-    // Show attributes related to the active category
+    /**
+     * @details Holt alle Attribute, die mit der aktiven Kategorie verknüpft sind, 
+     * sortiert nach ihrem Namen, um eine geordnete Filterliste anzuzeigen.
+     */
     $stmtAttr = $conn->prepare("
         SELECT a.attributeID, a.name, a.unit, a.dataType
         FROM attributes a
@@ -31,30 +71,51 @@ if ($catId) {
     $stmtAttr->bind_param("i", $catId);
     $stmtAttr->execute();
     $resAttr = $stmtAttr->get_result();
+    
+    // Iteriere über das Result-Set und speichere jedes gefundene Attribut im $attributes-Array.
     while ($row = $resAttr->fetch_assoc()) {
         $attributes[] = $row;
     }
+    // Statement schließen, um Ressourcen freizugeben.
     $stmtAttr->close();
 }
 ?>
 
-<?php if (!empty($attributes)): ?>
+<?php 
+// Wenn Attribute existieren, wird der HTML-Container für die Filterleiste gerendert.
+if (!empty($attributes)): ?>
 <div class="attrbar" aria-label="Attributfilter">
     <div class="attrbar__inner container">
+        <!-- Das Formular sendet Daten per GET an die index.php für die Filterung -->
         <form action="index.php" method="GET" class="attr-filter-form">
-            <?php if (isset($_GET['category'])): ?>
+            
+            <?php 
+            // Aktuelle Kategorie-ID im Formular versteckt mitsenden, damit man in der Kategorie bleibt.
+            if (isset($_GET['category'])): ?>
                 <input type="hidden" name="category" value="<?= htmlspecialchars($_GET['category']) ?>">
             <?php endif; ?>
-            <?php if (isset($_GET['search'])): ?>
+            
+            <?php 
+            // Einen eventuellen Suchbegriff ebenfalls beibehalten.
+            if (isset($_GET['search'])): ?>
                 <input type="hidden" name="search" value="<?= htmlspecialchars($_GET['search']) ?>">
             <?php endif; ?>
 
-            <?php foreach ($attributes as $attr): 
+            <?php 
+            /**
+             * @details Iteriert durch jedes gefundene Attribut, um ein entsprechendes
+             * HTML-Select-Feld mit seinen eindeutigen Werten zu generieren.
+             */
+            foreach ($attributes as $attr): 
+                /** @var int $attrId Die Datenbank-ID des Attributs */
                 $attrId = $attr['attributeID'];
+                
+                /** @var string $attrName Setzt sich zusammen aus dem Namen und, falls vorhanden, der Einheit (z.B. GB) */
                 $attrName = $attr['name'] . ($attr['unit'] ? ' (' . $attr['unit'] . ')' : '');
                 
-                // Fetch distinct values for this attribute based on current category
+                // SQL-Abfrage vorbereiten, um alle unterschiedlichen (DISTINCT) Werte für genau dieses Attribut abzufragen.
                 if ($catId) {
+                    // Abfrage mit Kategorie-Einschränkung
                     $vStmt = $conn->prepare("
                         SELECT DISTINCT pa.valueString, pa.valueNumber, pa.valueBool
                         FROM productAttributes pa
@@ -63,6 +124,8 @@ if ($catId) {
                     ");
                     $vStmt->bind_param("ii", $catId, $attrId);
                 } else {
+                    // Alternative Abfrage (wird in diesem Skriptteil zwar aktuell nur bei $catId aufgerufen,
+                    // aber dient als Fallback für zukünftige globale Filter).
                     $vStmt = $conn->prepare("
                         SELECT DISTINCT valueString, valueNumber, valueBool
                         FROM productAttributes
@@ -72,14 +135,23 @@ if ($catId) {
                 }
                 $vStmt->execute();
                 $vRes = $vStmt->get_result();
+                
+                /**
+                 * @var array $values 
+                 * @brief Speichert die extrahierten eindeutigen Werte (bereinigt und formatiert) für die Select-Box.
+                 */
                 $values = [];
+                
+                // Durchlaufe alle gefundenen Attributwerte für die aktuellen Produkte
                 while ($vRow = $vRes->fetch_assoc()) {
+                    // Werte je nach Datentyp (Boolean, Number, String) extrahieren
                     if ($attr['dataType'] === 'boolean' || $vRow['valueBool'] !== null) {
                         $val = $vRow['valueBool'] ? 'Ja' : 'Nein';
+                        // Duplikate vermeiden
                         if (!in_array($val, $values)) $values[] = $val;
                     } elseif ($attr['dataType'] === 'number' || $vRow['valueNumber'] !== null) {
                         $val = $vRow['valueNumber'];
-                        // strip trailing zero for decimals if desired, e.g. 5.00 -> 5
+                        // Entfernt überflüssige Nullen nach dem Komma (z.B. wird 5.00 zu 5)
                         $val = rtrim(rtrim((string)$val, '0'), '.');
                         if (!in_array($val, $values)) $values[] = $val;
                     } elseif ($vRow['valueString'] !== null) {
@@ -89,22 +161,36 @@ if ($catId) {
                 }
                 $vStmt->close();
                 
-                // Sort values
+                /**
+                 * @details Sortiert die gesammelten Werte. 
+                 * Zahlen werden numerisch sortiert (damit z.B. 10 nach 2 kommt),
+                 * Strings werden alphabetisch sortiert.
+                 */
                 if ($attr['dataType'] === 'number') {
                     usort($values, function($a, $b) { return (float)$a <=> (float)$b; });
                 } else {
                     sort($values);
                 }
                 
+                // Wenn es keine Werte für das Filterfeld gibt, überspringe dieses Attribut.
                 if (empty($values)) continue;
+                
+                /** @var string $paramName Der Name des GET-Parameters im Formular (z.B. attr_1) */
                 $paramName = "attr_" . $attrId;
+                
+                /** @var string $selectedValue Der aktuell ausgewählte Wert aus dem GET-Parameter, falls gesetzt */
                 $selectedValue = isset($_GET[$paramName]) ? $_GET[$paramName] : '';
             ?>
                 <div class="attr-filter-item">
+                    <!-- Label für das Attribut (z.B. Speichergröße (GB)) -->
                     <label for="attr_<?= $attrId ?>"><?= htmlspecialchars($attrName) ?>:</label>
+                    
+                    <!-- Dropdown-Menu zur Auswahl eines Werts. onchange sumbittet das Formular sofort via JS. -->
                     <select name="<?= $paramName ?>" id="attr_<?= $attrId ?>" onchange="this.form.submit()">
                         <option value="">Alle</option>
-                        <?php foreach ($values as $val): ?>
+                        <?php 
+                        // Liste alle aufbereiteten Optionen auf
+                        foreach ($values as $val): ?>
                             <option value="<?= htmlspecialchars($val) ?>" <?= (string)$val === (string)$selectedValue ? 'selected' : '' ?>>
                                 <?= htmlspecialchars($val) ?>
                             </option>
@@ -113,20 +199,29 @@ if ($catId) {
                 </div>
             <?php endforeach; ?>
             
+            <!-- Fallback-Button, falls der Nutzer JavaScript in seinem Browser deaktiviert hat. -->
             <noscript>
                 <button type="submit">Filtern</button>
             </noscript>
+            
             <?php 
-            // Show reset button only if at least one attr filter is active
+            /**
+             * @var bool $hasActiveFilter
+             * @brief Überprüft, ob mindestens ein Attributfilter aktiv in der URL vorkommt.
+             */
             $hasActiveFilter = false;
             foreach ($_GET as $k => $v) {
+                // Wenn der GET-Key mit "attr_" beginnt und ein Wert gesetzt ist
                 if (strpos($k, 'attr_') === 0 && $v !== '') {
                     $hasActiveFilter = true;
-                    break;
+                    break; // Sobald ein Filter gefunden ist, kann die Schleife abgebrochen werden
                 }
             }
+            
+            // Zeige den "Filter zurücksetzen"-Button nur an, wenn wirklich Filter aktiv sind.
             if ($hasActiveFilter): ?>
                 <div class="attr-filter-action">
+                    <!-- Ein Link auf die index.php (mit Kategorie), der alle Attribut-GET-Parameter verwirft -->
                     <a href="index.php<?= isset($_GET['category']) ? '?category='.urlencode($_GET['category']) : '' ?>" class="attr-filter-reset">Filter zurücksetzen</a>
                 </div>
             <?php endif; ?>
diff --git a/catbar.php b/catbar.php
index 49751b9..e1128a8 100644
--- a/catbar.php
+++ b/catbar.php
@@ -1,28 +1,80 @@
+<?php
+/**
+ * @file catbar.php
+ * @brief Category Navigation Bar / Kategorie-Navigationsleiste
+ * 
+ * This file contains the HTML structure for the main category navigation bar 
+ * used in the application. It provides links to filter products by their 
+ * respective categories.
+ * 
+ * @details
+ * Diese Datei enthält die HTML-Struktur für die Hauptkategorie-Navigationsleiste,
+ * die in der Anwendung verwendet wird. Sie stellt Links zur Verfügung, um Produkte
+ * nach ihren jeweiligen Kategorien (z.B. iPhone, iPad, MacBook) zu filtern.
+ * Jeder Link verweist auf index.php und übergibt die gewählte Kategorie als GET-Parameter.
+ */
+?>
 
+<!-- 
+  @brief Main navigation container for the home page.
+  @details Nutzt das HTML5 <nav> Tag für semantisch korrekte Navigation und enthält ein aria-label zur Barrierefreiheit.
+-->
 <nav class="home-nav" aria-label="Homenavigation">
+    <!-- 
+      @brief Inner container to restrict width and center content
+      @details Beschränkt die Breite des Inhalts und zentriert diesen.
+    -->
     <div class="home-nav__inner container">
+        <!-- 
+          @brief Unordered list representing the navigation items
+          @details Ungeordnete Liste, die die einzelnen Kategorielinks enthält.
+        -->
         <ul class="home-nav__list">
 
+            <!-- 
+              @brief Category link for 'iPhone' 
+              @details Führt zur Startseite mit dem Filter category=iphone
+            -->
             <li class="home-nav__item">
                 <a href='index.php?category=iphone'>iPhone</a>
             </li>
 
+            <!-- 
+              @brief Category link for 'iPad'
+              @details Führt zur Startseite mit dem Filter category=ipad
+            -->
             <li class="home-nav__item">
                 <a href='index.php?category=ipad'>iPad</a>
             </li>
 
+            <!-- 
+              @brief Category link for 'MacBook'
+              @details Führt zur Startseite mit dem Filter category=macbook
+            -->
             <li class="home-nav__item">
                 <a href='index.php?category=macbook'>MacBook</a>
             </li>
 
+            <!-- 
+              @brief Category link for 'AirPods'
+              @details Führt zur Startseite mit dem Filter category=airpods
+            -->
             <li class="home-nav__item">
                 <a href='index.php?category=airpods'>AirPods</a>
             </li>
 
+            <!-- 
+              @brief Category link for 'Watch'
+              @details Führt zur Startseite mit dem Filter category=watch
+            -->
             <li class="home-nav__item">
                 <a href='index.php?category=watch'>Watch</a>
             </li>
 
+            <!-- 
+              @brief Category link for 'Accessories' (Zubehör)
+              @details Führt zur Startseite mit dem Filter category=accessories
+            -->
             <li class="home-nav__item">
                 <a href='index.php?category=accessories'>Accessories</a>
             </li>
diff --git a/compare.php b/compare.php
index edbecff..5423e3f 100644
--- a/compare.php
+++ b/compare.php
@@ -1,19 +1,67 @@
 <?php
+/**
+ * @file compare.php
+ * @brief Skript zur Darstellung und Verwaltung des Produktvergleichs.
+ *
+ * @details Diese Datei rendert die Produktvergleichsseite. Sie ermöglicht dem Nutzer,
+ * Produkte aus derselben Kategorie nebeneinander tabellarisch aufzulisten, um ihre
+ * Eigenschaften (Attribute, Beschreibungen etc.) zu vergleichen. Produkte, die
+ * zuvor zur Session-Variable 'compare' hinzugefügt wurden, werden hier ausgelesen,
+ * ihre Daten und zugehörigen Attribute aus der Datenbank geladen und übersichtlich 
+ * dargestellt. Zudem bietet die Seite die Funktionalität, einzelne Produkte wieder 
+ * aus dem Vergleich zu entfernen.
+ * 
+ * Beinhaltet:
+ * - Session-Management für den Produktvergleich.
+ * - Datenbankabfragen für Kategorien, Produkte und Attribute.
+ * - HTML-Generierung der Vergleichstabellen.
+ *
+ * @author Geizkragen-Team
+ * @date 2026-04-03
+ */
+
 require_once __DIR__ . '/lib/bootstrap.php';
+
+/**
+ * @var mysqli $conn Die globale Datenbankverbindung, die durch db_connect() erstellt wird.
+ */
 $conn = db_connect();
 
+/**
+ * @var string $title Der Titel der Webseite, der im Header angezeigt wird.
+ */
 $title = "Produktvergleich | Geizkragen";
+
+// Einbinden der Header-Datei für das Layout und die Navigation.
 include 'header.php';
 
+/**
+ * @brief Behandelt das Entfernen eines Produkts aus dem Vergleich.
+ * 
+ * Überprüft, ob ein POST-Request vorliegt und das Flag 'remove_compare' gesetzt ist.
+ * Ist dies der Fall, wird die übergebene Produkt-ID aus der Session-Variable 
+ * in allen Kategorien entfernt.
+ */
 if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['remove_compare'])) {
+    /** 
+     * @var int $removeId Die zu entfernende Produkt-ID, sicher in einen Integer umgewandelt. 
+     */
     $removeId = (int)$_POST['remove_compare_id'];
+    
+    // Prüfen, ob die Session-Variable für Vergleiche existiert und ein Array ist.
     if (isset($_SESSION['compare']) && is_array($_SESSION['compare'])) {
+        // Durchsuchen aller Kategorien in der Session nach dem zu entfernenden Produkt.
         foreach ($_SESSION['compare'] as $cat => &$prodList) {
+            /** 
+             * @var int|false $key Der Array-Index der Produkt-ID in der aktuellen Kategorie-Liste. 
+             */
             $key = array_search($removeId, $prodList);
             if ($key !== false) {
+                // Das Produkt wurde gefunden und wird aus dem Array entfernt.
                 unset($prodList[$key]);
             }
         }
+        // Referenz auf $prodList löschen, um unbeabsichtigte Nebeneffekte zu vermeiden.
         unset($prodList);
     }
 }
@@ -23,18 +71,33 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['remove_compare'])) {
     <h1 class="compare-title">Produktvergleich</h1>
     
     <?php
+    /**
+     * @var bool $hasProducts Flag, welches angibt, ob aktuell Produkte für den Vergleich vorhanden sind.
+     */
     $hasProducts = false;
+    
+    // Iteration über die Session-Variable 'compare', sofern diese existiert und gültig ist.
     if (isset($_SESSION['compare']) && is_array($_SESSION['compare'])) {
         foreach ($_SESSION['compare'] as $categoryId => $productIds) {
+            // Wenn die Liste der Produkte für diese Kategorie leer ist, überspringen wir sie.
             if (empty($productIds)) continue;
+            
+            // Setze Flag auf true, da mindestens ein zu vergleichendes Produkt existiert.
             $hasProducts = true;
             
-            // Kategorie-Namen holen
+            /**
+             * @var string $catName Der Standardname der Kategorie (wird überschrieben, falls in der DB gefunden).
+             */
             $catName = "Kategorie $categoryId";
+            
+            /**
+             * @brief Holt den echten Namen der Kategorie aus der Datenbank.
+             */
             $stmtCat = $conn->prepare("SELECT name FROM categories WHERE categoryID = ?");
             if ($stmtCat) {
                 $stmtCat->bind_param("i", $categoryId);
                 $stmtCat->execute();
+                /** @var mysqli_result $resCat Das Ergebnis der Abfrage des Kategorienamens. */
                 $resCat = $stmtCat->get_result();
                 if ($row = $resCat->fetch_assoc()) {
                     $catName = $row['name'];
@@ -42,8 +105,15 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['remove_compare'])) {
                 $stmtCat->close();
             }
             
-            // Attribute der Kategorie holen
+            /**
+             * @var array $attributes Sammelt alle Attribute (Eigenschaften), die zu dieser Kategorie gehören.
+             * Format: $attributes[attributeID] = [ 'attributeID' => ..., 'name' => ..., 'unit' => ..., 'dataType' => ... ]
+             */
             $attributes = [];
+            
+            /**
+             * @brief Holt die Kategorie-Attribute mit Namen, Einheit und Datentyp.
+             */
             $stmtAttr = $conn->prepare("
                 SELECT a.attributeID, a.name, a.unit, a.dataType 
                 FROM categoryAttributes ca
@@ -54,6 +124,7 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['remove_compare'])) {
             if ($stmtAttr) {
                 $stmtAttr->bind_param("i", $categoryId);
                 $stmtAttr->execute();
+                /** @var mysqli_result $resAttr Das Ergebnis der Abfrage der Kategorie-Attribute. */
                 $resAttr = $stmtAttr->get_result();
                 while ($row = $resAttr->fetch_assoc()) {
                     $attributes[$row['attributeID']] = $row;
@@ -61,9 +132,19 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['remove_compare'])) {
                 $stmtAttr->close();
             }
             
-            // Produktdaten holen
+            /**
+             * @var array $products Sammelt die Grunddaten der zugehörigen Produkte (Model, Bild, Beschreibung).
+             * Format: $products[productID] = [ ... Produktdaten ... ]
+             */
             $products = [];
+            /** 
+             * @var string $idList Kommaseparierte Liste der zu vergleichenden Produkt-IDs, escapet als Integers für den IN-Query. 
+             */
             $idList = implode(',', array_map('intval', $productIds));
+            
+            /**
+             * @brief Holt die Produktinformationen für die IN-Klausel Liste.
+             */
             $stmtProd = $conn->query("SELECT productID, model, imagePath, description FROM products WHERE productID IN ($idList)");
             if ($stmtProd) {
                 while ($row = $stmtProd->fetch_assoc()) {
@@ -71,8 +152,15 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['remove_compare'])) {
                 }
             }
             
-            // Produktattribute holen
+            /**
+             * @var array $productAttrVals Sammelt die spezifischen Attribut-Werte je Produkt.
+             * Format: $productAttrVals[productID][attributeID] = [ ... Attributwerte ... ]
+             */
             $productAttrVals = [];
+            
+            /**
+             * @brief Holt die Werte (String, Number, Bool) der Attribute für die ausgewählten Produkte.
+             */
             $stmtProdAttr = $conn->query("SELECT productID, attributeID, valueString, valueNumber, valueBool FROM productAttributes WHERE productID IN ($idList)");
             if ($stmtProdAttr) {
                 while ($row = $stmtProdAttr->fetch_assoc()) {
@@ -82,23 +170,34 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['remove_compare'])) {
             }
             ?>
             
+            <!-- Ausgabe des Kategorie-Titels -->
             <h2 class="compare-category-title"><?= htmlspecialchars($catName) ?></h2>
             
+            <!-- Beginn der Vergleichstabelle der aktuellen Kategorie -->
             <div class="compare-table-wrapper">
                 <table class="compare-table">
                     <thead>
                         <tr>
+                            <!-- Die erste Spalte enthält den Titel "Eigenschaft" -->
                             <th>Eigenschaft</th>
+                            
+                            <!-- Iteration über die Produkt-IDs zur Erzeugung der Spaltenköpfe -->
                             <?php foreach ($productIds as $pId): ?>
-                                <?php if (!isset($products[$pId])) continue; ?>
+                                <?php 
+                                // Wenn das Produkt in der DB nicht (mehr) existiert, überspringen.
+                                if (!isset($products[$pId])) continue; 
+                                ?>
                                 <th>
                                     <div>
+                                        <!-- Produktbild mit Link zur Produktdetailseite -->
                                         <a href="productpage.php?id=<?= $pId ?>">
                                             <img src="<?= htmlspecialchars($products[$pId]['imagePath'] ?? 'assets/images/placeholder.png') ?>" alt="Produktbild" class="compare-product-img">
                                         </a>
                                     </div>
+                                    <!-- Produktname mit Link zur Produktdetailseite -->
                                     <h3><a href="productpage.php?id=<?= $pId ?>" class="compare-product-name"><?= htmlspecialchars($products[$pId]['model']) ?></a></h3>
                                     
+                                    <!-- Formular zum Entfernen dieses spezifischen Produkts aus dem Vergleich -->
                                     <form method="POST" action="compare.php">
                                         <input type="hidden" name="remove_compare" value="1">
                                         <input type="hidden" name="remove_compare_id" value="<?= $pId ?>">
@@ -109,34 +208,62 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['remove_compare'])) {
                         </tr>
                     </thead>
                     <tbody>
+                        <!-- Zeile für die Produktbeschreibung -->
                         <tr>
                             <td>Beschreibung</td>
                             <?php foreach ($productIds as $pId): ?>
-                                <?php if (!isset($products[$pId])) continue; ?>
+                                <?php 
+                                // Auch hier prüfen, ob die Produktdaten valide sind
+                                if (!isset($products[$pId])) continue; 
+                                ?>
                                 <td>
+                                    <!-- Ausgabe der Produktbeschreibung -->
                                     <span class="desc-text"><?= htmlspecialchars($products[$pId]['description']) ?></span>
                                 </td>
                             <?php endforeach; ?>
                         </tr>
+                        
+                        <!-- Dynamische Iteration über alle dieser Kategorie zugeordneten Attribute -->
                         <?php foreach ($attributes as $attrId => $attr): ?>
                             <tr>
+                                <!-- Ausgabe des Attributnamens -->
                                 <td><?= htmlspecialchars($attr['name'] ?? '') ?></td>
+                                
                                 <?php foreach ($productIds as $pId): ?>
-                                    <?php if (!isset($products[$pId])) continue; ?>
+                                    <?php 
+                                    // Existenzprüfung des Produkts
+                                    if (!isset($products[$pId])) continue; 
+                                    ?>
                                     <td>
                                         <?php
+                                        /**
+                                         * @brief Logik zur Darstellung des passenden Attributwerts.
+                                         * 
+                                         * Prüft, welcher Datentyp / welches Feld im Datensatz gesetzt ist
+                                         * und wählt die angemessene Formatierung (inklusive Einheit bei Zahlen,
+                                         * 'Ja'/'Nein' bei Booleans).
+                                         */
                                         if (isset($productAttrVals[$pId][$attrId])) {
                                             $valRow = $productAttrVals[$pId][$attrId];
+                                            
+                                            // Fall: String-Wert vorhanden
                                             if (!empty($valRow['valueString'])) {
                                                 echo htmlspecialchars($valRow['valueString'] ?? '');
-                                            } elseif (!empty($valRow['valueNumber']) || $valRow['valueNumber'] === '0.00' || $valRow['valueNumber'] === 0) {
+                                            } 
+                                            // Fall: Numerischer Wert vorhanden. '0.00' oder 0 ist ebenfalls gültig.
+                                            elseif (!empty($valRow['valueNumber']) || $valRow['valueNumber'] === '0.00' || $valRow['valueNumber'] === 0) {
                                                 echo htmlspecialchars((string)floatval($valRow['valueNumber'])) . " " . htmlspecialchars($attr['unit'] ?? '');
-                                            } elseif ($valRow['valueBool'] !== null) {
+                                            } 
+                                            // Fall: Boolescher Wert (wurde in DB gesetzt, nicht null)
+                                            elseif ($valRow['valueBool'] !== null) {
                                                 echo $valRow['valueBool'] ? 'Ja' : 'Nein';
-                                            } else {
+                                            } 
+                                            // Kein verwertbarer Wert vorhanden, Ausgabe eines Platzhalters.
+                                            else {
                                                 echo '-';
                                             }
                                         } else {
+                                            // Wenn zu diesem Produkt kein Datensatz für dieses Attribut gefunden wurde.
                                             echo '-';
                                         }
                                         ?>
@@ -151,10 +278,14 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['remove_compare'])) {
         }
     }
     
+    // Meldung falls keine Produkte für den Vergleich gesetzt sind.
     if (!$hasProducts) {
         echo "<div class='compare-empty'><p>Du hast noch keine Produkte zum Vergleich hinzugefügt. Gehe auf eine Produktseite, um Produkte hinzuzufügen.</p></div>";
     }
     ?>
 </div>
 
-<?php include 'footer.php'; ?>
+<?php 
+// Einbinden der Footer-Datei am Ende der Seite.
+include 'footer.php'; 
+?>
diff --git a/compcards.php b/compcards.php
index ee6fd95..e2e5831 100644
--- a/compcards.php
+++ b/compcards.php
@@ -1,28 +1,66 @@
 <?php
+/**
+ * @file compcards.php
+ * @brief Datei compcards.php
+ *
+ * @details Diese Datei ist für die Anzeige der Produktkarten auf der Übersichts- oder Suchseite zuständig.
+ * Sie verarbeitet Suchanfragen sowie Kategorie- und Attributfilter und generiert die entsprechende HTML-Ausgabe.
+ * Es werden keine Änderungen am bestehenden Code vorgenommen, lediglich diese ausführlichen Kommentare hinzugefügt.
+ */
+
 // login.php
 
 require_once __DIR__ . '/lib/bootstrap.php';
 
+/**
+ * Fehleranzeige für Entwicklungszwecke aktivieren.
+ * Hiermit werden alle Fehler, Warnungen und Hinweise direkt ausgegeben.
+ */
 ini_set('display_errors', 1);
 ini_set('display_startup_errors', 1);
 error_reporting(E_ALL);
 
-// 1) DB-Verbindung (einmal)
+/**
+ * 1) DB-Verbindung (einmalig aufbauen)
+ * Die Funktion db_connect() muss in den eingebundenen Bibliotheken (z. B. bootstrap.php / db.php) definiert sein.
+ * @var mysqli $conn Die aktive Datenbankverbindung.
+ */
 $conn = db_connect();
 ?>
 
 <?php
-// ─────────────────────────────────────────────
-// Reine PHP-Suche (GET ?search=...)
-// Wenn ein Suchbegriff vorhanden ist, zeigen wir nur Suchergebnisse
-// (statt der Kategorie-Sektionen).
-// ─────────────────────────────────────────────
+/**
+ * ─────────────────────────────────────────────
+ * Reine PHP-Suche (GET ?search=...)
+ * ─────────────────────────────────────────────
+ * @details Wenn ein Suchbegriff über den URL-Parameter 'search' übergeben wurde,
+ * zeigen wir ausschließlich die Suchergebnisse an und überspringen die Anzeige 
+ * der standardmäßigen Kategorie-Sektionen.
+ */
+
+/**
+ * @var string $searchTerm Holt den Suchbegriff aus dem GET-Parameter, trimmt überflüssige Leerzeichen.
+ */
 $searchTerm = isset($_GET['search']) ? trim((string)$_GET['search']) : '';
+
+/**
+ * @var int $searchLen Berechnet die Länge des Suchbegriffs (multibyte-safe, falls mb_strlen existiert).
+ */
 $searchLen = function_exists('mb_strlen') ? mb_strlen($searchTerm, 'UTF-8') : strlen($searchTerm);
+
 if ($searchTerm !== '') {
+    /**
+     * @details Escaping des Suchbegriffs für die LIKE-Klausel, um SQL-Injections durch Wildcards zu verhindern.
+     * @var string $like Der für SQL präparierte Such-String mit umschließenden %-Zeichen.
+     */
     $like = addcslashes($searchTerm, "%_\\");
     $like = '%' . $like . '%';
 
+    /**
+     * @details Führt eine Suche auf die Tabelle 'products' aus. 
+     * Es wird sowohl in der Spalte 'model' als auch in 'description' gesucht.
+     * @var mysqli_stmt|false $stmtSearch Das Prepared Statement für die Suche.
+     */
     $stmtSearch = $conn->prepare("
         SELECT productID, model, description, imagePath
         FROM products
@@ -32,8 +70,13 @@ if ($searchTerm !== '') {
     ");
 
     if ($stmtSearch) {
+        // Parameterbindung: Zwei Strings ('ss') für die doppelten LIKE-Bedingungen.
         $stmtSearch->bind_param('ss', $like, $like);
         $stmtSearch->execute();
+        
+        /**
+         * @var mysqli_result $resultSearch Das ResultSet der ausgeführten Suchanfrage.
+         */
         $resultSearch = $stmtSearch->get_result();
         ?>
 
@@ -41,18 +84,28 @@ if ($searchTerm !== '') {
             <h2>Suchergebnisse für „<?= htmlspecialchars($searchTerm) ?>“</h2>
 
             <?php if ($resultSearch->num_rows <= 0): ?>
+                <!-- Wenn keine Ergebnisse gefunden wurden -->
                 <p class="search-empty">Keine Produkte gefunden.</p>
             <?php else: ?>
+                <!-- Grid für die Anzeige der Suchergebnisse -->
                 <div class="product-grid">
                     <?php while ($product = $resultSearch->fetch_assoc()): ?>
-                        <?php $productId = (int)$product['productID']; ?>
+                        <?php 
+                        /**
+                         * @var int $productId Casting der Produkt-ID auf Integer für den Link.
+                         */
+                        $productId = (int)$product['productID']; 
+                        ?>
                         <a class="product-card" href="productpage.php?id=<?= $productId ?>">
+                            <!-- Anzeige des Produktbildes mit Fallback auf ein Platzhalter-Bild -->
                             <img
                                 src="<?= !empty($product['imagePath']) ? htmlspecialchars($product['imagePath']) : 'assets/images/placeholder.png' ?>"
                                 alt="<?= htmlspecialchars($product['model'] ?? '') ?>">
 
                             <div class="product-card__content">
+                                <!-- Der Modellname des Produkts -->
                                 <h3><?= htmlspecialchars($product['model'] ?? '') ?></h3>
+                                <!-- Die Beschreibung des Produkts -->
                                 <p><?= htmlspecialchars($product['description'] ?? '') ?></p>
                             </div>
                         </a>
@@ -62,19 +115,31 @@ if ($searchTerm !== '') {
         </section>
 
         <?php
+        // Schließen des Prepared Statements zur Freigabe von Ressourcen.
         $stmtSearch->close();
     }
 
-    // Wichtig: In Suchmodus KEINE Kategorien rendern.
+    /**
+     * Wichtig: Im Suchmodus beenden wir die Einbindung dieser Datei hier (return), 
+     * damit keine weiteren Kategorie-Blöcke gerendert werden.
+     */
     return;
 }
 ?>
 
 <?php
+/**
+ * @details Ermitteln der aktiven Kategorie. Falls keine angegeben wurde, ist 'all' der Standard.
+ * @var string $activeCategory Die aktive Kategorie-ID in Textform.
+ */
 $activeCategory = isset($_GET['category']) ? $_GET['category'] : 'all';
 ?>
 
 <?php
+/**
+ * @details Mapping von Kategorie-Keys zu Datenbank-IDs und lesbaren Labels.
+ * @var array $categories Ein assoziatives Array der verfügbaren Hauptkategorien.
+ */
 $categories = [
         'iphone'  => ['id' => 20, 'label' => 'iPhone'],
         'ipad'    => ['id' => 21, 'label' => 'iPad'],
@@ -84,64 +149,128 @@ $categories = [
 ];
 ?>
 
+<?php 
+/**
+ * Iteration über alle definierten Kategorien, um jede als einzelnen Sektor anzuzeigen.
+ */
+foreach ($categories as $key => $cat): 
+?>
 
-
-
-<?php foreach ($categories as $key => $cat): ?>
-
-    <?php if ($activeCategory === 'all' || $activeCategory === $key): ?>
+    <?php 
+    /**
+     * @details Nur dann Daten laden und Sektion anzeigen, wenn entweder alle Kategorien
+     * gewünscht sind oder der key mit der aktuell gewählten Kategorie übereinstimmt.
+     */
+    if ($activeCategory === 'all' || $activeCategory === $key): 
+    ?>
 
         <?php
+        /**
+         * @var string $baseQuery Der grundlegende SELECT-Teil der dynamischen Produktsuche.
+         */
         $baseQuery = "SELECT DISTINCT p.productID, p.model, p.description, p.imagePath FROM products p ";
+        
+        /**
+         * @var array $whereClauses Array zum Sammeln aller WHERE-Bedingungen.
+         */
         $whereClauses = ["p.categoryID = ?"];
+        
+        /**
+         * @var array $params Array zur Aufnahme der Bind-Parameter für das Prepared Statement.
+         */
         $params = [$cat['id']];
+        
+        /**
+         * @var string $types Enthält den Typ-String für bind_param (z. B. 'i', 's', 'd').
+         */
         $types = "i";
         
-        // Find attribute filters from $_GET
+        /**
+         * @details Auslesen von dynamischen Attribut-Filtern aus der URL ($_GET).
+         * @var int $attrIndex Zähler zur Erzeugung eindeutiger Aliase für JOINs.
+         */
         $attrIndex = 0;
         foreach ($_GET as $k => $v) {
+            // Nur Parameter berücksichtigen, die auf 'attr_' beginnen und einen Wert haben.
             if ($v !== '' && strpos($k, 'attr_') === 0) {
                 $attrId = (int)substr($k, 5);
                 $attrAlias = "pa" . $attrIndex;
+                
+                // Dynamischer JOIN der productAttributes-Tabelle für jedes gefilterte Attribut.
                 $baseQuery .= " JOIN productAttributes $attrAlias ON p.productID = $attrAlias.productID ";
                 
-                // Assume string or number comparison. For simplicity, check string or number.
-                // In DB, valueString, valueNumber, valueBool can be checked.
+                /**
+                 * @details Sucht im Attribut entweder nach String, Number oder Boolean ('Ja'/'Nein').
+                 */
                 $whereClauses[] = "($attrAlias.attributeID = ? AND ($attrAlias.valueString = ? OR $attrAlias.valueNumber = ? OR ($attrAlias.valueBool = 1 AND ? = 'Ja') OR ($attrAlias.valueBool = 0 AND ? = 'Nein')))";
 
+                // Parameter für bind_param befüllen
                 $params[] = $attrId;
                 $params[] = $v;
                 $params[] = is_numeric($v) ? (float)$v : 0;
                 $params[] = $v;
                 $params[] = $v;
+                
+                // Typen ergänzen: Integer, String, Double, String, String an SQL übergeben
                 $types .= "isdss";
                 
                 $attrIndex++;
             }
         }
         
+        /**
+         * @var string $sql Zusammensetzen der kompletten SQL-Abfrage aus Base, JOINs und WHEREs.
+         */
         $sql = $baseQuery . " WHERE " . implode(" AND ", $whereClauses);
         
+        /**
+         * @var mysqli_stmt $stmt Das Prepared Statement für die Kategorieabfrage.
+         */
         $stmt = $conn->prepare($sql);
+        // Bind Parameter per Spread-Operator aus dem Params-Array.
         $stmt->bind_param($types, ...$params);
         $stmt->execute();
+        
+        /**
+         * @var mysqli_result $result Das Ergebnis-Set mit den gefundenen Produkten dieser Kategorie.
+         */
         $result = $stmt->get_result();
         ?>
 
-        <?php if ($result->num_rows > 0): ?>
+        <?php 
+        /**
+         * Rendern der Produktsektion nur, falls auch Produkte in dieser Kategorie gefunden wurden.
+         */
+        if ($result->num_rows > 0): 
+        ?>
             <section class="product-section">
+                <!-- Ausgabe des Kategorie-Labels als Überschrift -->
                 <h2><?= htmlspecialchars($cat['label']) ?></h2>
 
+                <!-- Horizontaler Scroll-Bereich für die Produktkarten einer Kategorie -->
                 <div class="product-scroll">
-                    <?php while ($product = $result->fetch_assoc()): ?>
-                        <?php $productId = (int)$product['productID']; ?>
+                    <?php 
+                    /**
+                     * Fetch-Schleife über jedes Produkt im Result-Set.
+                     */
+                    while ($product = $result->fetch_assoc()): 
+                    ?>
+                        <?php 
+                        /**
+                         * @var int $productId Casting der Produkt-ID
+                         */
+                        $productId = (int)$product['productID']; 
+                        ?>
                         <a class="product-card" href="productpage.php?id=<?= $productId ?>">
+                            <!-- Produktbild und Fallback auf Platzhalter -->
                             <img
                                     src="<?= isset($product['imagePath']) ? $product['imagePath'] : 'assets/images/placeholder.png' ?>"
                                     alt="<?= htmlspecialchars($product['model']) ?>">
 
                             <div class="product-card__content">
+                                <!-- Anzeige des Produktnamens -->
                                 <h3><?= htmlspecialchars($product['model']) ?></h3>
+                                <!-- Anzeige der Produktbeschreibung -->
                                 <p><?= htmlspecialchars($product['description']) ?></p>
                             </div>
                         </a>
@@ -150,9 +279,11 @@ $categories = [
             </section>
         <?php endif; ?>
 
-        <?php $stmt->close(); ?>
+        <?php 
+        // Schließen des Prepared Statements der Kategorie, um Ressourcen freizugeben.
+        $stmt->close(); 
+        ?>
 
     <?php endif; ?>
 
 <?php endforeach; ?>
-
diff --git a/file.php b/file.php
deleted file mode 100644
index b3d9bbc..0000000
--- a/file.php
+++ /dev/null
@@ -1 +0,0 @@
-<?php
diff --git a/footer.php b/footer.php
index dfcd542..42ac6c4 100755
--- a/footer.php
+++ b/footer.php
@@ -1,12 +1,54 @@
+<?php
+/**
+ * @file footer.php
+ * @brief Enthält den Footer-Bereich der Geizkragen-Anwendung.
+ *
+ * Diese Datei wird am Ende der Seiten eingebunden, um den Footer darzustellen.
+ * Sie schließt die grundlegenden HTML-Strukturen ab und enthält das Copyright
+ * mit dem sich dynamisch aktualisierenden Jahr, sowie sekundäre Navigationslinks
+ * (wie z.B. das Impressum).
+ */
+?>
+<!-- 
+  ======================================================================
+  Footer Sektion
+  
+  Das <footer/> Element stellt den Abschluss der Webseitenstruktur dar.
+  Die Rolle 'contentinfo' ist für die Barrierefreiheit (Screenreader) wichtig 
+  und weist darauf hin, dass hier Metainformationen wie Copyright und rechtliche 
+  Hinweise zu finden sind.
+  ======================================================================
+-->
 <footer class="footer" role="contentinfo">
+    <!-- 
+      Container-DIV 
+      Dient zur Zentrierung und Breitenbegrenzung des Footer-Inhalts,
+      um ein konsistentes Layout zu gewährleisten.
+    -->
     <div class="container">
+        <!-- 
+          Copyright-Absatz
+          Zeigt das Copyright-Zeichen, das aktuelle Jahr (dynamisch erzeugt 
+          durch PHP date('Y')) und den Namen der Plattform an.
+        -->
         <p>&copy; <?= date('Y') ?> Geizkragen</p>
 
+        <!-- 
+          Footer-Navigation
+          Stellt sekundäre Links bereit.
+          Das Attribut aria-label="Footer Navigation" verbessert die 
+          Barrierefreiheit (Accessibility) für assistive Technologien.
+        -->
         <nav class="footer__nav" aria-label="Footer Navigation">
+            <!-- Link zur rechtsverbindlichen Impressumsseite -->
             <a href="impressum.php">Impressum</a>
         </nav>
     </div>
 </footer>
 
+<!-- 
+  Schließen der grundlegenden HTML-Tags.
+  Diese Tags wurden üblicherweise in der header.php geöffnet.
+-->
 </body>
 </html>
diff --git a/header.php b/header.php
index 806b0af..7f4e9cf 100644
--- a/header.php
+++ b/header.php
@@ -1,3 +1,25 @@
+<?php
+/**
+ * @file header.php
+ * @brief Globale Header-Datei für die Geizkragen-Anwendung.
+ *
+ * Diese Datei bildet den initialen HTML-Kopf (Head) der Anwendung und enthält
+ * alle grundlegenden Meta-Tags, Stylesheets und Favicon-Definitionen.
+ * Zudem definiert sie die globale Navigationsleiste, inklusive Desktop- und
+ * Mobile-Layouts, einer globalen Produktsuche sowie dem Overlay-Menü.
+ *
+ * @details
+ * Folgende Kernkomponenten sind hier implementiert:
+ * - Einbindung aller relevanten CSS-Dateien (@see style.css, @see login.css, etc.).
+ * - Setup für Viewport und Mobile-Geräte (Safe Areas für Notch-Geräte).
+ * - Eine reaktionsfähige Navigationsleiste mit Links zu Home, Vergleich, Wunschliste und Account.
+ * - Ein Mobile-Menü (Off-Canvas), das per JavaScript geöffnet und geschlossen wird.
+ * - Suchformulare, die Benutzeranfragen per GET an die index.php übermitteln.
+ *
+ * @note Diese Datei wird üblicherweise in anderen Seiten inkludiert. Sie enthält KEINEN
+ * eigenständigen PHP-Logikbereich am Anfang, um direkt die HTML-Struktur zu rendern.
+ */
+?>
 <!DOCTYPE html>
 <html lang="de">
 
@@ -20,14 +42,27 @@
     <title>Geizkragen</title>
 
     <style>
-        /* ─── Mobile tap highlight ─── */
+        /**
+         * @brief Standard-UI Anpassungen für mobile Geräte.
+         * Verhindert den blauen Tap-Highlight auf iOS und mobilen Browsern.
+         */
         * { -webkit-tap-highlight-color: transparent; }
 
-        /* ─── Safe areas (notch phones) ─── */
+        /**
+         * @brief Safe Areas für Notch-Geräte (z.B. iPhone).
+         * Sorgt dafür, dass der Header nicht in abgerundete Ecken oder die Kameraaussparung ragt.
+         */
         .header  { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
+        
+        /**
+         * @brief Safe Area für den Footer.
+         */
         .footer  { padding-bottom: env(safe-area-inset-bottom); }
 
-        /* ─── Mobile overlay ─── */
+        /**
+         * @brief Definiert das Overlay (Hintergrund-Verdunkelung/Blur) für das Mobile-Menü.
+         * Es wird unsichtbar gerendert und erst sichtbar, wenn die Klasse `is-visible` hinzugefügt wird.
+         */
         .nav__overlay {
             position: fixed;
             inset: 0;
@@ -39,6 +74,10 @@
             opacity: 0;
             transition: opacity 300ms ease, visibility 0s 300ms;
         }
+
+        /**
+         * @brief Aktiver Zustand des Overlays. Wichtig für fließende Fade-in Übergänge.
+         */
         .nav__overlay.is-visible {
             visibility: visible;
             opacity: 1;
@@ -48,7 +87,11 @@
 </head>
 <body>
 
-<!-- Overlay (klick = Menü schließen) -->
+<!--
+  @brief Overlay-Container
+  Dient der Verdunkelung des Bildschirms beim Öffnen des mobilen Menüs.
+  Ein Klick auf dieses Element schließt das Menü.
+-->
 <div class="nav__overlay" id="nav-overlay"></div>
 
 <header class="header" id="header">
@@ -138,7 +181,11 @@
         </div>
     </nav>
 
-    <!-- Mobile-Suchleiste (unterhalb der Nav-Zeile, nur auf ≤900px sichtbar) -->
+    <!--
+      @brief Mobile-Suchleiste
+      Wird unterhalb der Nav-Zeile platziert und ist per CSS in der Regel nur
+      auf Bildschirmen mit einer Breite von <=900px sichtbar.
+    -->
     <form class="nav__searchBar" action="index.php" method="GET" autocomplete="off">
         <div class="nav__searchField">
             <input class="nav__searchInput" type="text" name="search"
@@ -148,46 +195,69 @@
 </header>
 
 <script>
+/**
+ * @brief Kapselung der gesamten JavaScript-Logik für die Navigation.
+ * 
+ * Verwendet eine IIFE (Immediately Invoked Function Expression), um globale Scope-Verschmutzung zu vermeiden.
+ * Handhabt das Öffnen, Schließen und die Event-Bindungen des Slide-In/Mobile-Menüs.
+ */
 (function () {
-    var toggle  = document.getElementById('nav-toggle');
-    var closeBtn = document.getElementById('nav-close');
-    var menu    = document.getElementById('nav-menu');
-    var overlay = document.getElementById('nav-overlay');
+    // DOM Elemente für die Mobile-Menü-Steuerung
+    var toggle  = document.getElementById('nav-toggle');     /**< Button zum Öffnen des Menüs */
+    var closeBtn = document.getElementById('nav-close');     /**< Button zum Schließen des Menüs */
+    var menu    = document.getElementById('nav-menu');       /**< Container des Slide-In-Menüs */
+    var overlay = document.getElementById('nav-overlay');    /**< Das verdunkelnde Desktop-Overlay */
+    
+    // Abbruch, falls eines der essentiellen Elemente fehlt
     if (!toggle || !closeBtn || !menu || !overlay) return;
 
+    /**
+     * @brief Öffnet das Mobile-Menü.
+     * 
+     * Fügt dem Menü und dem Overlay die notwendigen Styling-Klassen hinzu,
+     * um diese sichtbar zu machen. Blockiert zudem das Scrollen der aktuellen Seite.
+     */
     function open() {
         menu.classList.add('show-menu');
         overlay.classList.add('is-visible');
         document.body.style.overflow = 'hidden';
     }
 
+    /**
+     * @brief Schließt das Mobile-Menü.
+     * 
+     * Entfernt die aktiven Zustands-Klassen und stellt das gewöhnliche
+     * Scroll-Verhalten (overflow) wieder her.
+     */
     function close() {
         menu.classList.remove('show-menu');
         overlay.classList.remove('is-visible');
         document.body.style.overflow = '';
     }
 
+    // Event-Listener für das Öffnen der Navigation
     toggle.addEventListener('click', open);
+    
+    // Event-Listener für das Schließen der Navigation über den X-Button oder Overlay-Klick
     closeBtn.addEventListener('click', close);
     overlay.addEventListener('click', close);
 
+    /**
+     * @brief Accessibility: Schließt das Menü via Escape-Taste.
+     */
     document.addEventListener('keydown', function (e) {
         if (e.key === 'Escape') close();
     });
 
-    // Links im Menü → schließen
+    /**
+     * @brief Automatisches Schließen des Menüs bei Link-Klick.
+     *
+     * Iteriert über alle im Menü vorhandenen Anchor ('a') Tags. Sobald ein Link
+     * angeklickt wird, wird das Menü geschlossen.
+     */
     var links = menu.querySelectorAll('a');
     for (var i = 0; i < links.length; i++) {
         links[i].addEventListener('click', close);
     }
 })();
 </script>
-
-
-
-
-
-
-
-
-
diff --git a/impressum.php b/impressum.php
index ddd9d10..1678c7c 100644
--- a/impressum.php
+++ b/impressum.php
@@ -1,7 +1,24 @@
-<?php include 'header.php'; ?>
+<?php
+/**
+ * @file impressum.php
+ * @brief Darstellung der Impressum-Seite für das Geizkragen-Projekt.
+ *
+ * @details Diese Datei generiert das Impressum, welches rechtliche Vorgaben gemäß § 5 TMG 
+ * und § 25 MedienG erfüllt. Hier werden die Website-Inhaber, der Server-Betreiber sowie 
+ * Informationen zu Haftungsausschluss, Urheberrecht und Datenschutz dargestellt.
+ * Die Anzeige erfolgt in einem responsiven CSS-Grid-Layout.
+ *
+ * @author Fabian Schieder, Paul Eisenbock
+ * @version 1.0
+ * @date 2026
+ */
+ include 'header.php'; ?>
 
 <style>
-    /* ─── Impressum Styles ─── */
+    /**
+     * @brief Hauptcontainer für das Impressum.
+     * @details Setzt Abstände, zentriert den Inhalt und fügt eine Einblend-Animation (fadeInUp) hinzu.
+     */
     .impressum {
         padding: 3rem 1.5rem 4rem;
         max-width: 900px;
@@ -14,6 +31,10 @@
         margin-bottom: 3rem;
     }
 
+    /**
+     * @brief Styling für das Helden-Icon.
+     * @details Definiert Größe, Form, Hintergrundverlauf und Animation des Icons.
+     */
     .impressum__hero-icon {
         display: inline-flex;
         align-items: center;
@@ -46,6 +67,10 @@
         line-height: 1.7;
     }
 
+    /**
+     * @brief Grid-Layout für die Impressum-Karten.
+     * @details Definiert ein zweispaltiges Layout mit Abstand zwischen den Karten.
+     */
     .impressum__grid {
         display: grid;
         grid-template-columns: 1fr 1fr;
@@ -53,6 +78,10 @@
         margin-bottom: 1.5rem;
     }
 
+    /**
+     * @brief Styling für die Impressum-Karten.
+     * @details Beinhaltet Hintergrund, Rahmen, Schatten und Animationseffekte beim Hover.
+     */
     .impressum__card {
         background: var(--bg-card);
         border: 1px solid var(--border-default);
@@ -89,6 +118,10 @@
         grid-column: 1 / -1;
     }
 
+    /**
+     * @brief Styling für Icons innerhalb der Impressum-Karten.
+     * @details Definiert Größe, Ausrichtung und Basis-Design der runden Icons.
+     */
     .impressum__card-icon {
         display: inline-flex;
         align-items: center;
@@ -100,26 +133,31 @@
         font-size: 1.25rem;
     }
 
+    /** @brief Modifikator für blaue Icons (Server-Betreiber, Datenschutz) */
     .impressum__card-icon--blue {
         background: var(--color-primary-soft);
         border: 1px solid rgba(59, 130, 246, 0.15);
     }
 
+    /** @brief Modifikator für grüne Icons (Website-Inhaber) */
     .impressum__card-icon--green {
         background: var(--color-accent-soft);
         border: 1px solid rgba(16, 185, 129, 0.15);
     }
 
+    /** @brief Modifikator für orange Icons (Haftungsausschluss) */
     .impressum__card-icon--orange {
         background: rgba(245, 158, 11, 0.1);
         border: 1px solid rgba(245, 158, 11, 0.15);
     }
 
+    /** @brief Modifikator für lila Icons (Projektinfo) */
     .impressum__card-icon--purple {
         background: rgba(139, 92, 246, 0.1);
         border: 1px solid rgba(139, 92, 246, 0.15);
     }
 
+    /** @brief Modifikator für rote Icons (Urheberrecht) */
     .impressum__card-icon--red {
         background: var(--color-danger-soft);
         border: 1px solid rgba(239, 68, 68, 0.15);
@@ -195,7 +233,10 @@
         line-height: 1.7;
     }
 
-    /* ─── Responsive ─── */
+    /**
+     * @brief Media Query für mobile Endgeräte.
+     * @details Bricht das zwei-spaltige Layout bei Bildschirmen unter 700px in ein ein-spaltiges Layout um.
+     */
     @media (max-width: 700px) {
         .impressum__grid {
             grid-template-columns: 1fr;
@@ -221,6 +262,12 @@
 
 <main class="impressum">
 
+    <!-- /**
+          * @section Hero-Bereich
+          * @brief Einleitende Sektion der Seite.
+          * @details Beinhaltet das animierte Waage-Icon, den Haupttitel und einen kurzen Erklärungstext 
+          * zu den rechtlichen Grundlagen des Impressums.
+          */ -->
     <!-- ═══ Hero ═══ -->
     <div class="impressum__hero">
         <div class="impressum__hero-icon">⚖️</div>
@@ -228,8 +275,20 @@
         <p>Angaben gemäß § 5 TMG und § 25 MedienG – Informationen über die Betreiber dieser Website.</p>
     </div>
 
+    <!-- /**
+          * @section Karten-Grid
+          * @brief Hauptbereich mit den rechtlichen Informationen aufgeteilt in Informationskarten.
+          * @details Verwendet ein zweispaltiges CSS-Grid zur Darstellung unterschiedlicher Bereiche 
+          * wie Seitenbetreiber, Server und Haftungsausschluss.
+          */ -->
     <!-- ═══ Karten-Grid ═══ -->
     <div class="impressum__grid">
+        
+        <!-- /**
+              * @subsection Website-Inhaber
+              * @brief Karte mit den Kontaktinformationen der Inhaber.
+              * @details Nimmt die volle Breite ein und listet die Details der Projektgründer Fabian Schieder und Paul Eisenbock auf.
+              */ -->
         <!-- Karte 1 – Website-Inhaber (volle Breite) -->
         <div class="impressum__card impressum__card--full">
             <div class="impressum__card-icon impressum__card-icon--green">🌐</div>
@@ -266,6 +325,11 @@
             </div>
         </div>
 
+        <!-- /**
+              * @subsection Server-Betreiber
+              * @brief Information zum technischen Hosting der Plattform.
+              * @details Nennt den Verantwortlichen für die technische Bereitstellung, das Hosting und die Wartung des Servers.
+              */ -->
         <!-- Karte 2 – Server-Betreiber -->
         <div class="impressum__card impressum__card--full">
             <div class="impressum__card-icon impressum__card-icon--blue">🖥️</div>
@@ -282,6 +346,11 @@
             </ul>
         </div>
 
+        <!-- /**
+              * @subsection Über das Projekt
+              * @brief Beschreibung des Projekts Geizkragen.
+              * @details Gibt Hintergrundinformationen, dass das Projekt als Schulprojekt zur Preisüberwachung entstanden ist.
+              */ -->
         <!-- Karte 3 – Projektinfo (volle Breite) -->
         <div class="impressum__card impressum__card--full">
             <div class="impressum__card-icon impressum__card-icon--purple">🚀</div>
@@ -293,6 +362,11 @@
             </p>
         </div>
 
+        <!-- /**
+              * @subsection Haftungsausschluss
+              * @brief Disclaimer bezüglich der angebotenen Inhalte.
+              * @details Schließt die Haftung für Richtigkeit, Vollständigkeit und Aktualität der Inhalte sowie für verlinkte externe Inhalte aus.
+              */ -->
         <!-- Karte 4 – Haftungsausschluss -->
         <div class="impressum__card">
             <div class="impressum__card-icon impressum__card-icon--orange">⚠️</div>
@@ -308,6 +382,11 @@
             </p>
         </div>
 
+        <!-- /**
+              * @subsection Urheberrecht
+              * @brief Regelungen bezüglich der erstellten Werke.
+              * @details Weist auf das österreichische Urheberrecht hin und klärt, dass eine Nutzung der Inhalte durch Dritte schriftlich genehmigt werden muss.
+              */ -->
         <!-- Karte 5 – Urheberrecht -->
         <div class="impressum__card">
             <div class="impressum__card-icon impressum__card-icon--red">©</div>
@@ -320,6 +399,11 @@
             </p>
         </div>
 
+        <!-- /**
+              * @subsection Datenschutzhinweis
+              * @brief Basisinformationen zur Datenerhebung.
+              * @details Informiert Benutzer über den Umgang mit personenbezogenen Daten und die Freiwilligkeit bei der Datenangabe.
+              */ -->
         <!-- Karte 6 – Datenschutz (volle Breite) -->
         <div class="impressum__card impressum__card--full">
             <div class="impressum__card-icon impressum__card-icon--blue">🔒</div>
@@ -335,6 +419,11 @@
 
     </div>
 
+    <!-- /**
+          * @section Footer-Hinweis
+          * @brief Abschließender Hinweis mit Information zum Erstellungszeitpunkt.
+          * @details Generiert dynamisch den aktuellen Monat und das Jahr der letzten Anpassung.
+          */ -->
     <!-- ═══ Footer-Note ═══ -->
     <div class="impressum__footer-note">
         <p>
@@ -345,4 +434,10 @@
 
 </main>
 
-<?php include 'footer.php'; ?>
\ No newline at end of file
+<?php 
+/**
+ * @brief Einbinden des globalen Footers.
+ * @details Lädt die Datei footer.php, welche den Abschluss des HTML-Dokuments und weitere globale Elemente enthält.
+ */
+include 'footer.php'; 
+?>
diff --git a/index.php b/index.php
index 2a7f043..a6bc373 100644
--- a/index.php
+++ b/index.php
@@ -1,20 +1,97 @@
 <?php
+/**
+ * @file index.php
+ * @brief Hauptseite der Geizkragen-Anwendung.
+ * 
+ * @details Diese Datei dient als Einstiegspunkt für die Benutzer. Sie lädt die grundlegenden
+ * Layout-Komponenten, die Navigation und zeigt, abhängig von Such- oder Kategoriefiltern,
+ * empfohlene Produkte oder gefilterte Listen an.
+ * @author Geizkragen Team
+ * @version 1.0.0
+ * 
+ * @section description_index Beschreibung
+ * Dies ist die zentrale Steuerungsdatei zur Darstellung der Homepage. 
+ * Über Includes werden Header, Kategorienleiste, Filterleiste und Produktkarten geladen.
+ */
+
+/**
+ * @brief Bindet die Bootstrap-Datei ein, um die grundlegende Konfiguration und Klassenverfügbarkeit sicherzustellen.
+ * @details Initialisiert Laufzeitumgebung, Datenbankverbindungen, Autoloader 
+ * und andere essentielle Parameter, die für die Laufzeit der Applikation benötigt werden.
+ */
 require_once __DIR__ . '/lib/bootstrap.php';
 ?>
 
-<?php include 'header.php'; ?>
-<?php include 'catbar.php'; ?>
-<?php include 'attrbar.php'; ?>
+<?php 
+/** 
+ * @brief Bindet das Header-Template der Seite ein. 
+ * @details Der Header beinhaltet typischerweise den `<head>`-Bereich, Metadaten, 
+ * CSS-Einbindungen sowie den sichtbaren Navigationskopf inklusive Logo und Menü.
+ */
+include 'header.php'; 
+?>
+<?php 
+/** 
+ * @brief Bindet die Kategorienleiste (catbar) für die Navigation ein. 
+ * @details Diese Leiste ermöglicht die Hauptnavigation über Produktkategorien.
+ */
+include 'catbar.php'; 
+?>
+<?php 
+/** 
+ * @brief Bindet die Attribut-/Filterleiste (attrbar) ein. 
+ * @details Erlaubt feingranulare Filterung der angezeigten Produkte nach diversen Eigenschaften, 
+ * wie Preis, Hersteller oder Verfügbarkeit.
+ */
+include 'attrbar.php'; 
+?>
 
 <?php
+/**
+ * @brief Ermittelt und verarbeitet den Suchbegriff aus der GET-Anfrage, falls vorhanden.
+ * @details Prüft das Array $_GET auf den Schlüssel 'search'. Falls dieser gesetzt ist,
+ * wird der Wert als String gecastet und Leerzeichen am Rand durch `trim()` entfernt.
+ * 
+ * @var string $searchTerm Der bereinigte Suchbegriff für die spätere Datenbankabfrage.
+ */
 $searchTerm = isset($_GET['search']) ? trim((string)$_GET['search']) : '';
+
+/**
+ * @brief Ermittelt und verarbeitet die ausgewählte Kategorie aus der GET-Anfrage.
+ * @details Fallback auf 'all', falls keine Kategorie spezifiziert wurde.
+ * 
+ * @var string $activeCategory Die aktuell vom Benutzer fokussierte Kategorie.
+ */
 $activeCategory = isset($_GET['category']) ? $_GET['category'] : 'all';
 
+/**
+ * @brief Prüft, ob weder ein Suchbegriff noch ein spezifischer Kategoriefilter aktiv ist (Startseiten-Bedingung).
+ * @details Wenn beides zutrifft, befindet sich der Benutzer auf der "nackten" Startseite 
+ * und bekommt spezielle Werbeanzeigen oder Empfehlungen präsentiert.
+ */
 if ($searchTerm === '' && $activeCategory === 'all') {
+    /** 
+     * @brief Bindet die Empfehlungen bzw. das Werbebanner ein. 
+     * @details Dient zur Kundenbindung auf der Startseite.
+     */
     include 'ad_recommendation.php';
 }
 ?>
 
-<?php include 'compcards.php'; ?>
+<?php 
+/** 
+ * @brief Bindet die Produktkarten zur Darstellung ein. 
+ * @details Zentrale Komponente zur Visualisierung der Produkte. Zieht Parameter wie
+ * `$searchTerm` und `$activeCategory` heran, um die gefilterte Liste zu generieren.
+ */
+include 'compcards.php'; 
+?>
 
-<?php include 'footer.php'; ?>
+<?php 
+/** 
+ * @brief Bindet das Footer-Template der Seite ein. 
+ * @details Beendet das HTML-Dokument und lädt JavaScripts sowie rechtliche Links 
+ * (Impressum, Datenschutz).
+ */
+include 'footer.php'; 
+?>
diff --git a/info/skript.sql b/info/skript.sql
new file mode 100644
index 0000000..b6761f4
--- /dev/null
+++ b/info/skript.sql
@@ -0,0 +1,350 @@
+-- MySQL Script generated by MySQL Workbench
+-- Mon Mar 30 22:13:37 2026
+-- Model: New Model    Version: 1.0
+-- MySQL Workbench Forward Engineering
+
+SET @OLD_UNIQUE_CHECKS=@@UNIQUE_CHECKS, UNIQUE_CHECKS=0;
+SET @OLD_FOREIGN_KEY_CHECKS=@@FOREIGN_KEY_CHECKS, FOREIGN_KEY_CHECKS=0;
+SET @OLD_SQL_MODE=@@SQL_MODE, SQL_MODE='ONLY_FULL_GROUP_BY,STRICT_TRANS_TABLES,NO_ZERO_IN_DATE,NO_ZERO_DATE,ERROR_FOR_DIVISION_BY_ZERO,NO_ENGINE_SUBSTITUTION';
+
+-- -----------------------------------------------------
+-- Schema mydb
+-- -----------------------------------------------------
+-- -----------------------------------------------------
+-- Schema FSST
+-- -----------------------------------------------------
+
+-- -----------------------------------------------------
+-- Schema FSST
+-- -----------------------------------------------------
+CREATE SCHEMA IF NOT EXISTS `FSST` DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci ;
+USE `FSST` ;
+
+-- -----------------------------------------------------
+-- Table `FSST`.`attributes`
+-- -----------------------------------------------------
+CREATE TABLE IF NOT EXISTS `FSST`.`attributes` (
+  `attributeID` INT NOT NULL AUTO_INCREMENT,
+  `name` VARCHAR(255) NOT NULL,
+  `unit` VARCHAR(50) NULL DEFAULT NULL,
+  `dataType` VARCHAR(20) NULL DEFAULT NULL,
+  PRIMARY KEY (`attributeID`))
+ENGINE = InnoDB
+AUTO_INCREMENT = 70
+DEFAULT CHARACTER SET = utf8mb4
+COLLATE = utf8mb4_0900_ai_ci;
+
+
+-- -----------------------------------------------------
+-- Table `FSST`.`brands`
+-- -----------------------------------------------------
+CREATE TABLE IF NOT EXISTS `FSST`.`brands` (
+  `brandID` INT NOT NULL AUTO_INCREMENT,
+  `name` VARCHAR(255) NOT NULL,
+  PRIMARY KEY (`brandID`))
+ENGINE = InnoDB
+AUTO_INCREMENT = 8
+DEFAULT CHARACTER SET = utf8mb4
+COLLATE = utf8mb4_0900_ai_ci;
+
+
+-- -----------------------------------------------------
+-- Table `FSST`.`categories`
+-- -----------------------------------------------------
+CREATE TABLE IF NOT EXISTS `FSST`.`categories` (
+  `categoryID` INT NOT NULL AUTO_INCREMENT,
+  `name` VARCHAR(255) NOT NULL,
+  `parentCategoryID` INT NULL DEFAULT NULL,
+  PRIMARY KEY (`categoryID`),
+  INDEX `categories_ibfk_1` (`parentCategoryID` ASC) VISIBLE,
+  CONSTRAINT `categories_ibfk_1`
+    FOREIGN KEY (`parentCategoryID`)
+    REFERENCES `FSST`.`categories` (`categoryID`)
+    ON DELETE CASCADE)
+ENGINE = InnoDB
+AUTO_INCREMENT = 26
+DEFAULT CHARACTER SET = utf8mb4
+COLLATE = utf8mb4_0900_ai_ci;
+
+
+-- -----------------------------------------------------
+-- Table `FSST`.`categoryAttributes`
+-- -----------------------------------------------------
+CREATE TABLE IF NOT EXISTS `FSST`.`categoryAttributes` (
+  `categoryID` INT NOT NULL,
+  `attributeID` INT NOT NULL,
+  PRIMARY KEY (`categoryID`, `attributeID`),
+  INDEX `attributeID` (`attributeID` ASC) VISIBLE,
+  CONSTRAINT `categoryAttributes_ibfk_1`
+    FOREIGN KEY (`categoryID`)
+    REFERENCES `FSST`.`categories` (`categoryID`),
+  CONSTRAINT `categoryAttributes_ibfk_2`
+    FOREIGN KEY (`attributeID`)
+    REFERENCES `FSST`.`attributes` (`attributeID`))
+ENGINE = InnoDB
+DEFAULT CHARACTER SET = utf8mb4
+COLLATE = utf8mb4_0900_ai_ci;
+
+
+-- -----------------------------------------------------
+-- Table `FSST`.`users`
+-- -----------------------------------------------------
+CREATE TABLE IF NOT EXISTS `FSST`.`users` (
+  `userID` INT NOT NULL AUTO_INCREMENT,
+  `email` VARCHAR(255) NOT NULL,
+  `passwordHash` VARCHAR(255) NOT NULL,
+  `displayName` VARCHAR(255) NULL DEFAULT NULL,
+  `isActive` TINYINT(1) NOT NULL DEFAULT '1',
+  `createdAt` TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
+  `profilePicture` VARCHAR(255) NULL DEFAULT NULL,
+  PRIMARY KEY (`userID`),
+  UNIQUE INDEX `email` (`email` ASC) VISIBLE)
+ENGINE = InnoDB
+AUTO_INCREMENT = 45
+DEFAULT CHARACTER SET = utf8mb4
+COLLATE = utf8mb4_0900_ai_ci;
+
+
+-- -----------------------------------------------------
+-- Table `FSST`.`notifications`
+-- -----------------------------------------------------
+CREATE TABLE IF NOT EXISTS `FSST`.`notifications` (
+  `notificationID` INT NOT NULL AUTO_INCREMENT,
+  `userID` INT NOT NULL,
+  `title` VARCHAR(255) NOT NULL,
+  `message` TEXT NOT NULL,
+  `isRead` TINYINT(1) NOT NULL DEFAULT '0',
+  `createdAt` TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
+  PRIMARY KEY (`notificationID`),
+  INDEX `fk_notifications_user` (`userID` ASC) VISIBLE,
+  CONSTRAINT `fk_notifications_user`
+    FOREIGN KEY (`userID`)
+    REFERENCES `FSST`.`users` (`userID`)
+    ON DELETE CASCADE)
+ENGINE = InnoDB
+AUTO_INCREMENT = 4
+DEFAULT CHARACTER SET = utf8mb4
+COLLATE = utf8mb4_0900_ai_ci;
+
+
+-- -----------------------------------------------------
+-- Table `FSST`.`products`
+-- -----------------------------------------------------
+CREATE TABLE IF NOT EXISTS `FSST`.`products` (
+  `productID` INT NOT NULL AUTO_INCREMENT,
+  `categoryID` INT NOT NULL,
+  `brandID` INT NOT NULL,
+  `model` VARCHAR(255) NOT NULL,
+  `description` TEXT NULL DEFAULT NULL,
+  `imagePath` VARCHAR(255) NULL DEFAULT NULL,
+  PRIMARY KEY (`productID`),
+  INDEX `categoryID` (`categoryID` ASC) VISIBLE,
+  INDEX `brandID` (`brandID` ASC) VISIBLE,
+  CONSTRAINT `products_ibfk_1`
+    FOREIGN KEY (`categoryID`)
+    REFERENCES `FSST`.`categories` (`categoryID`),
+  CONSTRAINT `products_ibfk_2`
+    FOREIGN KEY (`brandID`)
+    REFERENCES `FSST`.`brands` (`brandID`))
+ENGINE = InnoDB
+AUTO_INCREMENT = 1347
+DEFAULT CHARACTER SET = utf8mb4
+COLLATE = utf8mb4_0900_ai_ci;
+
+
+-- -----------------------------------------------------
+-- Table `FSST`.`shops`
+-- -----------------------------------------------------
+CREATE TABLE IF NOT EXISTS `FSST`.`shops` (
+  `shopID` INT NOT NULL AUTO_INCREMENT,
+  `name` VARCHAR(255) NOT NULL,
+  `website` VARCHAR(255) NULL DEFAULT NULL,
+  `logoPath` VARCHAR(255) NULL DEFAULT NULL,
+  `shippingTime` VARCHAR(255) NULL DEFAULT NULL,
+  PRIMARY KEY (`shopID`))
+ENGINE = InnoDB
+AUTO_INCREMENT = 7
+DEFAULT CHARACTER SET = utf8mb4
+COLLATE = utf8mb4_0900_ai_ci;
+
+
+-- -----------------------------------------------------
+-- Table `FSST`.`offers`
+-- -----------------------------------------------------
+CREATE TABLE IF NOT EXISTS `FSST`.`offers` (
+  `offerID` INT NOT NULL AUTO_INCREMENT,
+  `productID` INT NOT NULL,
+  `shopID` INT NOT NULL,
+  `price` DECIMAL(10,2) NOT NULL,
+  `shippingCost` DECIMAL(10,2) NULL DEFAULT NULL,
+  `inStock` TINYINT(1) NULL DEFAULT NULL,
+  `offerURL` VARCHAR(255) NULL DEFAULT NULL,
+  PRIMARY KEY (`offerID`),
+  INDEX `productID` (`productID` ASC) VISIBLE,
+  INDEX `shopID` (`shopID` ASC) VISIBLE,
+  CONSTRAINT `offers_ibfk_1`
+    FOREIGN KEY (`productID`)
+    REFERENCES `FSST`.`products` (`productID`),
+  CONSTRAINT `offers_ibfk_2`
+    FOREIGN KEY (`shopID`)
+    REFERENCES `FSST`.`shops` (`shopID`))
+ENGINE = InnoDB
+AUTO_INCREMENT = 10
+DEFAULT CHARACTER SET = utf8mb4
+COLLATE = utf8mb4_0900_ai_ci;
+
+
+-- -----------------------------------------------------
+-- Table `FSST`.`priceAlerts`
+-- -----------------------------------------------------
+CREATE TABLE IF NOT EXISTS `FSST`.`priceAlerts` (
+  `alertID` INT NOT NULL AUTO_INCREMENT,
+  `userID` INT NOT NULL,
+  `productID` INT NOT NULL,
+  `targetPrice` DECIMAL(10,2) NOT NULL,
+  `isActive` TINYINT(1) NOT NULL DEFAULT '1',
+  `createdAt` TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
+  PRIMARY KEY (`alertID`),
+  INDEX `fk_pricealerts_user` (`userID` ASC) VISIBLE,
+  INDEX `fk_pricealerts_product` (`productID` ASC) VISIBLE,
+  CONSTRAINT `fk_pricealerts_product`
+    FOREIGN KEY (`productID`)
+    REFERENCES `FSST`.`products` (`productID`)
+    ON DELETE CASCADE,
+  CONSTRAINT `fk_pricealerts_user`
+    FOREIGN KEY (`userID`)
+    REFERENCES `FSST`.`users` (`userID`)
+    ON DELETE CASCADE)
+ENGINE = InnoDB
+AUTO_INCREMENT = 4
+DEFAULT CHARACTER SET = utf8mb4
+COLLATE = utf8mb4_0900_ai_ci;
+
+
+-- -----------------------------------------------------
+-- Table `FSST`.`productAttributes`
+-- -----------------------------------------------------
+CREATE TABLE IF NOT EXISTS `FSST`.`productAttributes` (
+  `productID` INT NOT NULL,
+  `attributeID` INT NOT NULL,
+  `valueString` VARCHAR(255) NULL DEFAULT NULL,
+  `valueNumber` DECIMAL(10,2) NULL DEFAULT NULL,
+  `valueBool` TINYINT(1) NULL DEFAULT NULL,
+  PRIMARY KEY (`productID`, `attributeID`),
+  INDEX `attributeID` (`attributeID` ASC) VISIBLE,
+  CONSTRAINT `productAttributes_ibfk_1`
+    FOREIGN KEY (`productID`)
+    REFERENCES `FSST`.`products` (`productID`),
+  CONSTRAINT `productAttributes_ibfk_2`
+    FOREIGN KEY (`attributeID`)
+    REFERENCES `FSST`.`attributes` (`attributeID`))
+ENGINE = InnoDB
+DEFAULT CHARACTER SET = utf8mb4
+COLLATE = utf8mb4_0900_ai_ci;
+
+
+-- -----------------------------------------------------
+-- Table `FSST`.`reviews`
+-- -----------------------------------------------------
+CREATE TABLE IF NOT EXISTS `FSST`.`reviews` (
+  `reviewID` INT NOT NULL AUTO_INCREMENT,
+  `userID` INT NOT NULL,
+  `productID` INT NOT NULL,
+  `rating` INT NOT NULL,
+  `comment` TEXT NULL DEFAULT NULL,
+  `createdAt` TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
+  PRIMARY KEY (`reviewID`),
+  INDEX `fk_reviews_user` (`userID` ASC) VISIBLE,
+  INDEX `fk_reviews_product` (`productID` ASC) VISIBLE,
+  CONSTRAINT `fk_reviews_product`
+    FOREIGN KEY (`productID`)
+    REFERENCES `FSST`.`products` (`productID`)
+    ON DELETE CASCADE,
+  CONSTRAINT `fk_reviews_user`
+    FOREIGN KEY (`userID`)
+    REFERENCES `FSST`.`users` (`userID`)
+    ON DELETE CASCADE)
+ENGINE = InnoDB
+AUTO_INCREMENT = 42
+DEFAULT CHARACTER SET = utf8mb4
+COLLATE = utf8mb4_0900_ai_ci;
+
+
+-- -----------------------------------------------------
+-- Table `FSST`.`roles`
+-- -----------------------------------------------------
+CREATE TABLE IF NOT EXISTS `FSST`.`roles` (
+  `roleID` INT NOT NULL AUTO_INCREMENT,
+  `name` VARCHAR(50) NOT NULL,
+  PRIMARY KEY (`roleID`),
+  UNIQUE INDEX `name` (`name` ASC) VISIBLE)
+ENGINE = InnoDB
+AUTO_INCREMENT = 4
+DEFAULT CHARACTER SET = utf8mb4
+COLLATE = utf8mb4_0900_ai_ci;
+
+
+-- -----------------------------------------------------
+-- Table `FSST`.`userFavorites`
+-- -----------------------------------------------------
+CREATE TABLE IF NOT EXISTS `FSST`.`userFavorites` (
+  `userID` INT NOT NULL,
+  `productID` INT NOT NULL,
+  `createdAt` TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
+  PRIMARY KEY (`userID`, `productID`),
+  INDEX `fk_favorites_product` (`productID` ASC) VISIBLE,
+  CONSTRAINT `fk_favorites_product`
+    FOREIGN KEY (`productID`)
+    REFERENCES `FSST`.`products` (`productID`)
+    ON DELETE CASCADE,
+  CONSTRAINT `fk_favorites_user`
+    FOREIGN KEY (`userID`)
+    REFERENCES `FSST`.`users` (`userID`)
+    ON DELETE CASCADE)
+ENGINE = InnoDB
+DEFAULT CHARACTER SET = utf8mb4
+COLLATE = utf8mb4_0900_ai_ci;
+
+
+-- -----------------------------------------------------
+-- Table `FSST`.`userRoles`
+-- -----------------------------------------------------
+CREATE TABLE IF NOT EXISTS `FSST`.`userRoles` (
+  `userID` INT NOT NULL,
+  `roleID` INT NOT NULL,
+  PRIMARY KEY (`userID`, `roleID`),
+  INDEX `fk_userroles_role` (`roleID` ASC) VISIBLE,
+  CONSTRAINT `fk_userroles_role`
+    FOREIGN KEY (`roleID`)
+REFERENCES `FSST`.`roles` (`roleID`)
+    ON DELETE CASCADE,
+  CONSTRAINT `fk_userroles_user`
+    FOREIGN KEY (`userID`)
+    REFERENCES `FSST`.`users` (`userID`)
+    ON DELETE CASCADE)
+ENGINE = InnoDB
+DEFAULT CHARACTER SET = utf8mb4
+COLLATE = utf8mb4_0900_ai_ci;
+
+
+-- -----------------------------------------------------
+-- Table `FSST`.`userSessions`
+-- -----------------------------------------------------
+CREATE TABLE IF NOT EXISTS `FSST`.`userSessions` (
+  `sessionID` VARCHAR(128) NOT NULL,
+  `userID` INT NOT NULL,
+  `expiresAt` TIMESTAMP NOT NULL,
+  PRIMARY KEY (`sessionID`),
+  INDEX `fk_sessions_user` (`userID` ASC) VISIBLE,
+  CONSTRAINT `fk_sessions_user`
+    FOREIGN KEY (`userID`)
+    REFERENCES `FSST`.`users` (`userID`)
+    ON DELETE CASCADE)
+ENGINE = InnoDB
+DEFAULT CHARACTER SET = utf8mb4
+COLLATE = utf8mb4_0900_ai_ci;
+
+
+SET SQL_MODE=@OLD_SQL_MODE;
+SET FOREIGN_KEY_CHECKS=@OLD_FOREIGN_KEY_CHECKS;
+SET UNIQUE_CHECKS=@OLD_UNIQUE_CHECKS;
diff --git a/lib/bootstrap.php b/lib/bootstrap.php
index 454b9e6..0623f4b 100644
--- a/lib/bootstrap.php
+++ b/lib/bootstrap.php
@@ -1,19 +1,48 @@
 <?php
-
 /**
  * @file bootstrap.php
- * @brief Zentrale Initialisierung der Anwendung
+ * @brief Zentrale Initialisierungsdatei der Anwendung.
  *
- * Startet die Session, lädt die Datenbankverbindung
- * und aktualisiert die Benutzerrollen.
+ * @details Diese Datei dient als Bootstrap-Skript für die gesamte Webanwendung. 
+ * Sie ist dafür verantwortlich, grundlegende Konfigurationen vorzunehmen, 
+ * die Session-Verwaltung zu initiieren und die Datenbankverbindung herzustellen. 
+ * Zudem werden hier die Rollen eines aktuell angemeldeten Benutzers bei jedem 
+ * Request frisch aus der Datenbank geladen und in der Session gespeichert, 
+ * um eine konsistente und sichere Rechteverwaltung zu gewährleisten.
+ *
+ * @author Automatisch generierter Doxygen-Header / Erweitert durch Entwickler
+ * @date 2026-04-04
  */
 
+/**
+ * Einbinden der grundlegenden Datenbankfunktionen.
+ * 
+ * Beinhaltet die Funktion db_connect() und weitere für den Datenbankzugriff
+ * notwendige Konfigurationen.
+ */
 require_once __DIR__ . '/db.php';
 
+/**
+ * Aktivierung der Fehlerausgabe für Entwicklungszwecke.
+ * 
+ * Diese Einstellungen sorgen dafür, dass alle Arten von Fehlern, Warnungen 
+ * und Parse-Fehlern direkt im Browser angezeigt werden. Dies ist besonders 
+ * nützlich während der Entwicklung, sollte aber in einer Produktionsumgebung 
+ * idealerweise deaktiviert oder durch ein entsprechendes Logging ersetzt werden.
+ */
 ini_set('display_errors', '1');
 ini_set('display_startup_errors', '1');
 error_reporting(E_ALL);
 
+/**
+ * Initialisierung der PHP-Session.
+ * 
+ * Es wird geprüft, ob bereits eine aktive Session existiert. Falls nicht, 
+ * werden spezifische Cookie-Parameter gesetzt (z.B. eine Lebensdauer von 30 Tagen) 
+ * und die Session wird gestartet. Diese Konfiguration erhöht die Sicherheit 
+ * (mittels httponly und samesite=Lax) und verbessert das Benutzererlebnis 
+ * durch ein langlebiges Session-Cookie.
+ */
 if (session_status() !== PHP_SESSION_ACTIVE)
 {
     // Session-Cookie Lifetime auf 30 Tage setzen
@@ -29,32 +58,76 @@ if (session_status() !== PHP_SESSION_ACTIVE)
 }
 
 
-// Rollen bei jedem Request aus der DB aktualisieren
+/**
+ * @brief Aktualisierung der Benutzerrollen aus der Datenbank.
+ * 
+ * @details Dieser Block wird ausgeführt, um zu Beginn jedes HTTP-Requests 
+ * die aktuellen Rechte/Rollen des eingeloggten Nutzers zu evaluieren.
+ * Ist eine `user_id` in der Session vorhanden, wird eine Datenbankabfrage 
+ * durchgeführt, um alle verknüpften Rollen des entsprechenden Nutzers zu ermitteln.
+ * Die gefundenen Rollen werden danach als Array in `$_SESSION['user_roles']` gespeichert.
+ * Ist kein Benutzer eingeloggt, wird das Array leer gelassen.
+ */
 if (!empty($_SESSION['user_id']))
 {
+    /**
+     * @var mysqli $__bsConn 
+     * @brief Die aktive Datenbankverbindung für den Bootstrap-Prozess.
+     */
     $__bsConn = db_connect();
+
+    /**
+     * @var mysqli_stmt|false $__bsStmt
+     * @brief Prepared Statement zum Abfragen der Benutzerrollen.
+     * 
+     * Hierbei werden die Tabellen `userRoles` (ur) und `roles` (r) miteinander verknüpft,
+     * um anhand der `userID` die textuellen Namen der Rollen zu selektieren.
+     */
     $__bsStmt = $__bsConn->prepare('SELECT r.name FROM userRoles ur JOIN roles r ON r.roleID = ur.roleID WHERE ur.userID = ?');
 
     if ($__bsStmt)
     {
+        /**
+         * @var int $__bsUid
+         * @brief Typisierte Benutzer-ID, gecastet aus der Session.
+         */
         $__bsUid = (int)$_SESSION['user_id'];
+        
+        // Parameterbindung (Interger) an das Prepared Statement
         $__bsStmt->bind_param('i', $__bsUid);
+        
+        // Ausführung der Abfrage
         $__bsStmt->execute();
+        
+        /**
+         * @var mysqli_result $__bsResult
+         * @brief Das Resultset der ausgeführten Datenbankabfrage.
+         */
         $__bsResult = $__bsStmt->get_result();
+        
+        // Reset des Rollen-Arrays in der Session
         $_SESSION['user_roles'] = [];
 
+        /**
+         * Iteration durch die zurückgegebenen Datensätze und Speicherung in der Session.
+         */
         while ($__bsRow = $__bsResult->fetch_assoc())
         {
             $_SESSION['user_roles'][] = $__bsRow['name'];
         }
 
+        // Schließen des Statements, um Ressourcen freizugeben
         $__bsStmt->close();
     }
 
+    // Schließen der Datenbankverbindung nach erfolgreicher Abfrage
     $__bsConn->close();
 }
 else
 {
+    /**
+     * Für Gäste (nicht eingeloggte Benutzer) wird das Rollen-Array explizit geleert.
+     */
     $_SESSION['user_roles'] = [];
 }
 
diff --git a/lib/config.php b/lib/config.php
index 3f57003..7187a4c 100644
--- a/lib/config.php
+++ b/lib/config.php
@@ -1,16 +1,72 @@
 <?php
-// Zentrale Konfiguration
+/**
+ * @file config.php
+ * @brief Zentrale Konfigurationsdatei für das Geizkragen-Projekt.
+ *
+ * @details Diese Datei liefert die Basis-Konfigurationseinstellungen für die gesamte Anwendung,
+ * insbesondere die erforderlichen Verbindungsdaten für die Datenbank. Die Werte werden primär
+ * über Umgebungsvariablen (Environment Variables) dynamisch ausgelesen. Sind diese Variablen
+ * auf dem jeweiligen System nicht gesetzt, wird auf standardisierte Fallback-Werte (Defaults)
+ * zurückgegriffen. Dies ermöglicht eine sichere und flexible Trennung von Quellcode und
+ * umgebungsspezifischen Konfigurationen.
+ */
 
+// Zentrale Konfiguration der Anwendung
 declare(strict_types=1);
 
+/**
+ * @brief Konfigurations-Array der Anwendung.
+ *
+ * @details Gibt ein mehrdimensionales, assoziatives Array zurück, welches alle
+ * betriebsrelevanten Konfigurationsparameter der Anwendung kapselt. Aktuell umfasst
+ * dies im Wesentlichen die Datenbank-Konfiguration unter dem Schlüssel 'db'.
+ *
+ * @return array Assoziatives Array mit den Systemeinstellungen.
+ */
 return [
+    /**
+     * @brief Datenbank-Konfigurationseinstellungen.
+     * @details Enthält alle Parameter, die zum Aufbau einer PDO- oder MySQLi-Verbindung notwendig sind.
+     */
     'db' => [
-        'host' => getenv('GEIZKRAGEN_DB_HOST') ?: 'HOST',
+        /**
+         * @brief Der Hostname oder die IP-Adresse des Datenbankservers.
+         * @details Ausgelesen aus der Umgebungsvariable 'GEIZKRAGEN_DB_HOST'.
+         * Fallback ist 'localhost'.
+         */
+        'host' => getenv('GEIZKRAGEN_DB_HOST') ?: 'localhost',
+
+        /**
+         * @brief Der TCP-Port des Datenbankservers.
+         * @details Ausgelesen aus 'GEIZKRAGEN_DB_PORT'. Der Wert wird für Typsicherheit strikt in
+         * einen Integer umgewandelt. Fallback ist der Standard-MySQL/MariaDB Port 3306.
+         */
         'port' => (int)(getenv('GEIZKRAGEN_DB_PORT') ?: 3306),
-        'user' => getenv('GEIZKRAGEN_DB_USER') ?: 'USER',
-        'pass' => getenv('GEIZKRAGEN_DB_PASS') ?: 'PASSWORD',
-        'name' => getenv('GEIZKRAGEN_DB_NAME') ?: 'DATABASE',
+
+        /**
+         * @brief Der Benutzername zur Authentifizierung an der Datenbank.
+         * @details Ausgelesen aus 'GEIZKRAGEN_DB_USER'. Fallback ist 'FSST'.
+         */
+        'user' => getenv('GEIZKRAGEN_DB_USER') ?: 'FSST',
+
+        /**
+         * @brief Das Passwort zur Authentifizierung an der Datenbank.
+         * @details Ausgelesen aus 'GEIZKRAGEN_DB_PASS'. Das Fallback-Passwort dient nur für lokale
+         * oder vordefinierte Entwicklungsumgebungen.
+         */
+        'pass' => getenv('GEIZKRAGEN_DB_PASS') ?: 'L9wUNZZ9Qkbt',
+
+        /**
+         * @brief Der Name der verwendeten Datenbankstruktur/Schema.
+         * @details Ausgelesen aus 'GEIZKRAGEN_DB_NAME'. Fallback ist 'FSST'.
+         */
+        'name' => getenv('GEIZKRAGEN_DB_NAME') ?: 'FSST',
+
+        /**
+         * @brief Der verwendete Zeichensatz (Charset) für die Datenbankverbindung.
+         * @details Ausgelesen aus 'GEIZKRAGEN_DB_CHARSET'. Fallback ist 'utf8mb4',
+         * was empfohlen wird, um vollständige Unicode-Unterstützung (inkl. Emojis) zu garantieren.
+         */
         'charset' => getenv('GEIZKRAGEN_DB_CHARSET') ?: 'utf8mb4',
     ],
 ];
-
diff --git a/lib/db.php b/lib/db.php
index 0d8b52e..1084e34 100644
--- a/lib/db.php
+++ b/lib/db.php
@@ -1,36 +1,107 @@
 <?php
 
-declare(strict_types=1); // Erzwingt strikte Typenprüfung für Parameter und Rückgabewerte -> keine automatische Typenumwandlung
+/**
+ * @file db.php
+ * @brief Enthält grundlegende Funktionen und Initialisierungen für die Datenbankinteraktion.
+ * 
+ * @details Diese Datei kapselt den gesamten Prozess des Verbindungsaufbaus zur MySQL/MariaDB-Datenbank.
+ * Sie nutzt die zentralen Konfigurationseinstellungen (wie Host, Benutzer, Passwort, Datenbankname und Port),
+ * die in der Datei config.php hinterlegt sind. Durch die Auslagerung in diese Datei wird eine einheitliche 
+ * und zentrale Stelle für das Verbindungsmanagement geschaffen, was die Wartbarkeit, Sicherheit und
+ * Erweiterbarkeit des Gesamtsystems signifikant verbessert.
+ * 
+ * Besonderes Augenmerk liegt auf der Fehlerbehandlung beim Verbindungsaufbau: Schlägt dieser fehl,
+ * so wird der Ausführungskontext sicher terminiert und ein HTTP-Statuscode 500 generiert. Zudem wird
+ * der Zeichensatz streng konfiguriert (meist utf8mb4), was für die fehlerfreie Verarbeitung von 
+ * Sonderzeichen und Emojis essenziell ist und Schutz vor bestimmten SQL-Injection-Vektoren bietet.
+ *
+ * @author Geizkragen Entwicklerteam
+ * @version 1.1
+ * @date 2026-04-04
+ */
+
+declare(strict_types=1); ///< Erzwingt auf Sprachebene strikte Typenprüfung für Parameter und Rückgabewerte dieses Skripts. Dies verhindert fehleranfällige, implizite automatische Typenumwandlungen.
 
 /**
- * Liefert eine MySQLi-Verbindung anhand der zentralen Konfiguration.
+ * @brief Baut eine MySQLi-Datenbankverbindung anhand der zentralen Konfiguration auf und liefert diese zurück.
  *
- * Nutzung:
- *   $conn = db_connect();
+ * @details Diese essenzielle Funktion greift auf die zentrale Konfigurationsdatei (config.php) zu,
+ * lädt deren Parameterstruktur und initialisiert eine neue Instanz der Klasse mysqli, sofern dies 
+ * für den aktuellen Ausführungskontext notwendig ist. Um Performance zu optimieren, nutzt sie 
+ * das Singleton-ähnliche Konzept mittels einer statischen Variablen, sodass die Konfiguration
+ * (und die Datei-Lese-Operation) nur genau einmal pro Skriptlauf ausgeführt wird.
+ * 
+ * @attention Bei einem Verbindungsfehler bricht das System das Skript mittels die() hart ab.
+ * Sensible Datenbankfehler (wie falsche Zugangsdaten) werden dabei absichtlich nicht ausgegeben,
+ * um so genannte Information Disclosure-Vulnerabilities zu vermeiden. Stattdessen wird lediglich
+ * der neutrale Text "Datenbankfehler" gezeigt und der HTTP Header auf Status 500 gesetzt.
+ *
+ * @b Anwendungsbeispiel:
+ * @code
+ *   // Verbindung zur Datenbank aufbauen
+ *   $mysqli_connection = db_connect();
+ *   
+ *   // Abfrage ausführen
+ *   $result = $mysqli_connection->query("SELECT * FROM users");
+ * @endcode
+ *
+ * @return mysqli Das erfolgreich aufgebaute und vollständig konfigurierte Datenbankverbindungs-Objekt.
+ *
+ * @throws Exception Löst im Hintergrund potenziell Ausnahmen aus, fängt diese durch manuelle Fehlerabfragen ($conn->connect_error) aber sauber ab.
  */
 function db_connect(): mysqli
 {
+    /** 
+     * @var array|null $cfg Statische Variable zur Wiederverwendung der Systemkonfiguration.
+     * Durch das Schlüsselwort 'static' behält diese Variable ihren Wert auch über 
+     * multiple Funktionsaufrufe hinweg und verhindert mehrfaches Einlesen der config.php.
+     */
     static $cfg;
 
+    /// Prüft, ob die Konfiguration im aktuellen Skriptlauf bereits geladen und im Speicher abgelegt wurde.
     if ($cfg === null)
     {
-        /** @var array{db: array{host:string,port:int,user:string,pass:string,name:string,charset:string}} $cfg */
+        /** 
+         * @var array{db: array{host:string,port:int,user:string,pass:string,name:string,charset:string}} $cfg 
+         * @brief Bindet die Konfigurationsdaten ein und lädt das rückgegebene Array in die statische Variable $cfg.
+         * Der Dateipfad wird hierbei relativ und sicher über die magische Konstante __DIR__ dynamisch aufgelöst.
+         */
         $cfg = require __DIR__ . '/config.php';
     }
 
+    /// Extrahiert aus Leistungs- und Lesbarkeitsgründen den spezifischen Datenbankbereich der geladenen Gesamt-Konfiguration in die lokale Variable $db.
     $db = $cfg['db'];
 
+    /// Initialisiert direkt eine neue, native mysqli-Verbindung mit den extrahierten Zugangsdaten (Host, Benutzer, Passwort, DB-Name, Port).
     $conn = new mysqli($db['host'], $db['user'], $db['pass'], $db['name'], $db['port']);
 
+    /**
+     * @brief Überprüft unmittelbar, ob beim Versuch des Verbindungsaufbaus durch die MySQLi-Extension ein Fehler aufgetreten ist.
+     * Wenn der Wert von $conn->connect_error einen String enthält (und somit nicht null ist), war der Verbindungsversuch erfolglos.
+     */
     if ($conn->connect_error)
     {
+        /**
+         * @brief Ein fataler Fehler ist aufgetreten: Setzt den HTTP-Response-Statuscode auf 500 (Internal Server Error).
+         * Dies teilt dem Browser oder API-Konsumenten strukturiert mit, dass der Server ein internes Problem hat.
+         */
         http_response_code(500);
+        
+        /**
+         * @brief Bricht die Ausführung des gesamten PHP-Skripts unwiderruflich ab.
+         * Aus Sicherheitsgründen wird dem Client lediglich eine maskierte, generelle String-Fehlermeldung ("Datenbankfehler") ausgegeben.
+         */
         die('Datenbankfehler');
     }
 
-    // Einheitliches Charset (wichtig für Umlaute/Emojis & Sicherheit)
+    /**
+     * @brief Setzt für die nun erfolgreich initiierte Verbindung ein einheitliches, konfiguriertes Charset.
+     * Dies ist (insbesondere bei utf8mb4) aus Sicherheits- und Stabilitätsgründen äußerst wichtig, um Encoding-Probleme, 
+     * abgeschnittene Texte und potenzielle SQL-Sicherheitslücken beim Escaping vollständig auszuschließen.
+     */
     $conn->set_charset($db['charset']);
 
+    /// Der Aufbau war erfolgreich. Gibt die einsatzbereite und abgesicherte MySQLi-Klasseninstanz an den aufrufenden Kontext zurück.
     return $conn;
 }
 
diff --git a/lib/strings.php b/lib/strings.php
index 444bc81..d5f5a95 100644
--- a/lib/strings.php
+++ b/lib/strings.php
@@ -1,45 +1,83 @@
 <?php
+/**
+ * @file strings.php
+ * @brief Enthält String-Hilfsfunktionen ohne harte Abhängigkeit von Erweiterungen wie mbstring.
+ *
+ * @details Diese Datei stellt nützliche Helfer-Funktionen für die Zeichenkettenverarbeitung bereit, 
+ * insbesondere zur Ermittlung der tatsächlichen Zeichenlänge in UTF-8. Das Hauptziel ist es,
+ * Längenvalidierungen zeichenbasiert anstatt bytebasiert durchzuführen, um korrekte Ergebnisse
+ * in einer Multibyte-Umgebung wie UTF-8 zu gewährleisten, selbst wenn bestimmte PHP-Extensions fehlen.
+ */
+
 
 // lib/strings.php
 // Kleine String-Helper ohne harte Abhängigkeit von mbstring.
 // Ziel: Längenvalidierung möglichst „zeichenbasiert“ und UTF-8-tauglich.
 
 /**
- * Liefert die Länge eines Strings in Zeichen (nicht Bytes), wenn möglich.
+ * @brief Ermittelt die Länge eines Strings in tatsächlichen Zeichen (nicht Bytes), wenn möglich.
  *
- * Priorität:
- * 1) mb_strlen (mbstring)
- * 2) grapheme_strlen (intl)
- * 3) UTF-8 Codepoint-Zählung via PCRE
- * 4) Fallback: strlen (Bytes)
+ * @details Diese Funktion versucht, die genaueste und sicherste Methode zur Bestimmung der 
+ * Zeichenanzahl eines Strings in einer UTF-8-codierten Multibyte-Zeichenkette zu verwenden.
+ * Dabei bedient sie sich mehrerer Mechanismen in einer festgelegten Prioritätenfolge:
+ * - Priorität 1: Nutzung von mb_strlen() (sofern die mbstring-Erweiterung aktiv ist).
+ * - Priorität 2: Nutzung von grapheme_strlen() (sofern die intl-Erweiterung aktiv ist).
+ * - Priorität 3: Nutzung regulärer Ausdrücke zur UTF-8 Codepoint-Zählung via PCRE.
+ * - Priorität 4: Fallback auf die native strlen()-Funktion (welche lediglich Bytes zählt, was
+ *                bei Multibyte-Zeichen ungenau ist, aber sicher nicht fehlschlägt).
+ *
+ * @param string $s Die Eingabe-Zeichenkette, deren Länge bestimmt werden soll.
+ * 
+ * @return int Die ermittelte Länge der Zeichenkette. Im Idealfall entspricht dies der Anzahl der Zeichen.
+ *             Im Fallback-Szenario entspricht dies der Anzahl der Bytes.
  */
-
 function str_length(string $s): int
 {
+    /**
+     * Prüfen, ob die Funktion mb_strlen verfügbar ist. 
+     * Dies ist die sicherste und schnellste Methode, da sie für Multibyte-Strings gemacht ist.
+     */
     if (function_exists('mb_strlen'))
     {
+        // Rückgabe der Zeichenlänge unter expliziter Angabe des Encodings UTF-8.
         return (int)mb_strlen($s, 'UTF-8');
     }
 
+    /**
+     * Falls mb_strlen nicht verfügbar ist, prüfen wir, ob die intl-Extension aktiviert ist 
+     * und grapheme_strlen zur Verfügung stellt.
+     */
     if (function_exists('grapheme_strlen'))
     {
+        // Ermittlung der Anzahl der Grapheme in der Zeichenfolge.
         $len = grapheme_strlen($s);
 
+        // Überprüfung, ob ein gültiges Ergebnis zurückgeliefert wurde (nicht false).
         if ($len !== false)
         {
             return (int)$len;
         }
     }
 
-    // UTF-8 Codepoints zählen (best-effort ohne Extensions)
+    /**
+     * Falls weder mb_strlen noch grapheme_strlen nutzbar sind, 
+     * versuchen wir die UTF-8 Codepoints manuell via Regex (PCRE) zu zählen.
+     */
     $m = [];
+    // Der Modifier 'u' steht für UTF-8-Behandlung, 's' sorgt dafür, dass der Punkt (.) auch Zeilenumbrüche matched.
     $ok = @preg_match_all('/./us', $s, $m);
 
+    // Wenn preg_match_all erfolgreich war, enthält $ok die Anzahl der Matches (also die Zeichenlänge).
     if ($ok !== false)
     {
         return (int)$ok;
     }
 
-    // Letzter Fallback (Bytes)
+    /**
+     * Letzter Fallback-Mechanismus: 
+     * Wenn alle UTF-8 spezifischen Ansätze fehlschlagen, zählen wir einfach die Bytes.
+     * Dies kann bei Zeichenketten mit Sonderzeichen zu längeren Ergebnissen führen,
+     * stellt aber sicher, dass in jedem Fall eine Ganzzahl (int) zurückgegeben wird.
+     */
     return strlen($s);
 }
diff --git a/login.php b/login.php
index 1537df5..18871bb 100644
--- a/login.php
+++ b/login.php
@@ -1,103 +1,180 @@
 <?php
+/**
+ * @file login.php
+ * @brief Steuert den Login-Vorgang und baut eine Benutzersitzung auf.
+ *
+ * @details Enthält das Formular und die Verarbeitung des POST-Requests,
+ * verifiziert Passwort-Hashes, veranlasst ggf. einen Re-Hash und speichert Attribute in der Session.
+ */
+
 // login.php
 
+/** 
+ * @brief Bindet die Bootstrap-Datei ein, um Session und Basiskonfigurationen zu gewährleisten.
+ */
 require_once __DIR__ . '/lib/bootstrap.php';
 
-// 1) DB-Verbindung (einmal)
+/**
+ * 1) DB-Verbindung (einmal)
+ * @brief Stellt eine Datenbankverbindung her.
+ * @var mysqli $conn Die etablierte Datenbankverbindung.
+ */
 $conn = db_connect();
 
-// 2) POST-Verarbeitung VOR jeglicher Ausgabe
+/**
+ * 2) POST-Verarbeitung VOR jeglicher Ausgabe
+ * @brief Initialisierung von Fehler- und Infomeldungen.
+ */
+/** @var string|null $loginError Speichert mögliche Fehlermeldungen während des Login-Prozesses. */
 $loginError = null;
+/** @var string|null $loginInfo Speichert mögliche Informationsmeldungen für den Benutzer aus. */
 $loginInfo = null;
 
+/**
+ * @brief Prüft, ob der Nutzer frisch von der Registrierungsseite kommt.
+ * @details Die Variable $_GET['registered'] wird gesetzt, wenn eine erfolgreiche Weiterleitung von register.php stattfand.
+ */
 if (isset($_GET['registered']) && $_GET['registered'] === '1')
 {
+    /** @brief Setzt eine Info-Nachricht für die UI, dass die Registrierung erfolgreich war. */
     $loginInfo = 'Registrierung erfolgreich. Du kannst dich jetzt einloggen.';
 }
 
+/**
+ * @brief Fängt das Formular-Submit ab, wenn die Anfrage-Methode POST ist.
+ * @details Überprüft, ob Daten aus dem Formular abgesendet wurden.
+ */
 if ($_SERVER['REQUEST_METHOD'] === 'POST')
 {
+    /** @var string $uname Speichert den eingegebenen Nutzernamen vor der Validierung. */
     $uname = '';
 
+    /**
+     * @brief Prüft, ob das Feld `uname` übermittelt wurde und weist es zu.
+     */
     if (isset($_POST['uname']))
     {
+        /** @details Führt zudem ein trim() aus, um überschüssige Leerzeichen am Anfang und Ende zu entfernen. */
         $uname = trim($_POST['uname']);
     }
 
+    /**
+     * @brief Prüft, ob das Feld `pw` übermittelt wurde und weist es zu.
+     */
     if (isset($_POST['pw']))
     {
+        /** @var string $pw Speichert das eingegebene Passwort im Klartext. */
         $pw = $_POST['pw'];
     }
     else
     {
+        /** @details Falls kein Passwort übergeben wurde, wird ein leerer String zugewiesen. */
         $pw = '';
     }
 
-
-    // Basic Validierung
+    /**
+     * @brief Basic Validierung vor dem Datenbank-Look-Up.
+     * @details Prüft, ob Nutzername oder Passwort komplett leer sind.
+     */
     if ($uname === '' || $pw === '')
     {
+        /** @brief Fehler-Status setzen, wenn mindestens eins der benötigten Felder leer ist. */
         $loginError = "Bitte Username und Passwort eingeben.";
     }
     else
     {
-        // Login ist SELECT, mit Prepared Statement (sicher) und ?-Platzhalter
+        /**
+         * @brief Login ist SELECT, mit Prepared Statement (sicher) und ?-Platzhalter
+         * @details Es werden die Felder userID, displayName und passwordHash gesucht, um den Nutzer später authentifizieren zu können.
+         * @var mysqli_stmt|false $stmt Das vorbereitete Query-Statement.
+         */
         $stmt = mysqli_prepare(
                 $conn,
                 "SELECT userID, displayName, passwordHash FROM users WHERE displayName = ? LIMIT 1"
         );
 
+        /// Prüft, ob beim Vorbereiten des Statements ein Fehler geschah.
         if (!$stmt)
         {
             $loginError = "Datenbankfehler.";
         }
         else
         {
+            /// Bindet den gesuchten Nutzernamen als String (`s`) an das SQL-Statement.
             mysqli_stmt_bind_param($stmt, "s", $uname);
+            /// Führt die Datenbankabfrage aus.
             mysqli_stmt_execute($stmt);
 
+            /// @var mysqli_result|false $result Das ResultSet der Select-Abfrage.
             $result = mysqli_stmt_get_result($stmt);
 
+            /** @var array|null $user Enthält die abgerufenen Datensätze aus der DB. */
             $user = null;
 
+            /// Sofern ein Resultat gefunden wurde, wird die erste Zeile assoziativ in `$user` geschrieben.
             if ($result)
             {
                 $user = mysqli_fetch_assoc($result);
             }
 
-            // Passwort prüfen: Eingabe gegen gespeicherten Hash (password_hash/password_verify)
+            /**
+             * @brief Passwort prüfen: Eingabe gegen gespeicherten Hash (password_hash/password_verify)
+             */
             if ($user && password_verify($pw, $user['passwordHash']))
             {
-                // Optional: Rehash, falls Algorithmus/Cost geändert wurde
+                /**
+                 * @brief Optional: Rehash, falls Algorithmus/Cost geändert wurde.
+                 * @details Überprüft, ob der bestehende Hash nicht mehr den aktuellen Anforderungen von PASSWORD_DEFAULT entspricht.
+                 */
                 if (password_needs_rehash($user['passwordHash'], PASSWORD_DEFAULT))
                 {
+                    /** @var string $newHash Erzeugt einen neuen Hash mit dem aktuellen Standard-Algorithmus. */
                     $newHash = password_hash($pw, PASSWORD_DEFAULT);
+                    /** @var mysqli_stmt|false $upd Bereitet das Statement für das Update in der DB vor. */
                     $upd = mysqli_prepare($conn, "UPDATE users SET passwordHash = ? WHERE userID = ?");
                     if ($upd)
                     {
+                        /// @var int $userID Konvertiert die ID sicher in einen Integer.
                         $userID = (int)$user['userID'];
+                        /// Bindet Parameter für das Update-Query (s = string, i = int).
                         mysqli_stmt_bind_param($upd, "si", $newHash, $userID);
+                        /// Führt das Update auf den Passworthash durch.
                         mysqli_stmt_execute($upd);
+                        /// Schließt das Update-Statement.
                         mysqli_stmt_close($upd);
                     }
                 }
 
+                /**
+                 * @brief Setzt die Session-Werte zur Authentifizierung des Nutzers.
+                 */
                 $_SESSION['user_id'] = (int)$user['userID'];
                 $_SESSION['displayName'] = $user['displayName'];
 
+                /** @brief Schließt das Query-Statement und die DB-Verbindung (falls nicht gepoolt) sauber ab. */
                 mysqli_stmt_close($stmt);
                 mysqli_close($conn);
 
+                /**
+                 * @brief Leitet den Benutzer ins Profil/Konto weiter.
+                 * @details Bricht zudem die Skriptausführung mittels exit ab, nachdem der Header gesendet wurde.
+                 */
                 header("Location: account.php");
                 exit;
             }
 
-            $loginError = "Ungültige Zugangsdaten.";
+            /**
+             * @brief Fallback, falls Authentifizierung am PW oder fehlendem Nutzer scheitert.
+             */
+            $loginError = "Ungltige Zugangsdaten.";
             mysqli_stmt_close($stmt);
         }
     }
 }
 
+/** 
+ * @brief Bindet die Header-HTML-Komponente ein. 
+ */
 include 'header.php';
 ?>
 
@@ -108,12 +185,16 @@ include 'header.php';
                 <h2 class="auth__title">Login</h2>
             </header>
 
-            <?php if ($loginInfo): ?>
+            <?php 
+            /** @brief Rendert optional Erfolgsnachrichten (z.B. nach Registrierung). */
+            if ($loginInfo): ?>
                 <p class="auth__alert__sucess"
                    role="status"><?php echo htmlspecialchars($loginInfo, ENT_QUOTES, 'UTF-8'); ?></p>
             <?php endif; ?>
 
-            <?php if ($loginError): ?>
+            <?php 
+            /** @brief Rendert optional aufgetretene Fehler beim Login-Versuch. */
+            if ($loginError): ?>
                 <p class="auth__alert__error"
                    role="alert"><?php echo htmlspecialchars($loginError, ENT_QUOTES, 'UTF-8'); ?></p>
             <?php endif; ?>
@@ -142,6 +223,13 @@ include 'header.php';
 </main>
 
 <?php
+/** 
+ * @brief Schließt die Datenbankbindung, bevor der Footer geladen und die Seite an den Client geschickt wird.
+ */
 mysqli_close($conn);
+
+/** 
+ * @brief Bindet die Footer-HTML-Komponente ein.
+ */
 include 'footer.php';
 ?>
diff --git a/logout.php b/logout.php
index 8bd705a..767f1bb 100644
--- a/logout.php
+++ b/logout.php
@@ -1,12 +1,36 @@
 <?php
+/**
+ * @file logout.php
+ * @brief Beendet die Sitzung des Benutzers.
+ *
+ * @details Diese Datei setzt alle Session-Parameter zurück, löscht das Session-Cookie
+ * und leitet den Benutzer auf die Anmeldeseite um.
+ */
+
+/** 
+ * @brief Bindet die Bootstrap-Datei ein, um Session-Start und Basiskonfigurationen zu gewährleisten.
+ */
 require_once __DIR__ . '/lib/bootstrap.php';
 
-/* Alle Session-Variablen löschen */
+/**
+ * @brief Leert das komplette Session-Array.
+ * @details Setzt `$_SESSION` als leeres Array, um alle nutzerbezogenen Daten der Sitzung zu entfernen.
+ */
 $_SESSION = [];
 
-/* Session-Cookie löschen (wichtig!) */
+/**
+ * @brief Prüft, ob Sessions über Cookies abgewickelt werden.
+ * @details Falls ja, wird das dazugehörige Session-Cookie aktiv im Client des Benutzers invalidiert.
+ */
 if (ini_get("session.use_cookies")) {
+    /** 
+     * @var array $params Liest die aktuellen Parameter zum Verwalten der Cookies aus.
+     */
     $params = session_get_cookie_params();
+    
+    /**
+     * @brief Setzt ein invalides und abgelaufenes Cookie, um das bestehende Cookie des Nutzers zu verwerfen.
+     */
     setcookie(
         session_name(),
         '',
@@ -18,13 +42,22 @@ if (ini_get("session.use_cookies")) {
     );
 }
 
-/* Session zerstören */
+/**
+ * @brief Zerstört die serverseitige Sitzung final.
+ */
 session_destroy();
 
-/* Optional: Remember-Me Cookie löschen (falls vorhanden)
+/* Optional: Remember-Me Cookie lschen (falls vorhanden)
 setcookie("remember_token", "", time() - 3600, "/");
 */
 
+/**
+ * @brief Weiterleitung auf die Login-Seite.
+ */
 header("Location: login.php");
-exit();
 
+/**
+ * @brief Stoppt das Skript nach erfolgtem Redirect.
+ */
+exit();
+?>
diff --git a/other/login.html b/other/login.html
deleted file mode 100644
index 569507b..0000000
--- a/other/login.html
+++ /dev/null
@@ -1,13 +0,0 @@
-<html>
-  <body>
-    <h2>TestProjekt-Login</h2>
-	<form action="login.php" method="POST">
-	  <label for="fname">Username:</label>
-      <input type="text" id="uname" name="uname"><br>
-      <label for="lname">Password:</label>
-      <input type="text" id="pw" name="pw"><br><br>
-      <input type="submit" value="Login">
-	</form>
-	<p><a href="register.html">Register</a></p>
-  </body>
-</html>
\ No newline at end of file
diff --git a/productAdder.php b/productAdder.php
index 6dfac30..1fa71cd 100644
--- a/productAdder.php
+++ b/productAdder.php
@@ -1,8 +1,30 @@
 <?php
+/**
+ * @file productAdder.php
+ * @brief Datei productAdder.php zur Anlage neuer Produkte im System.
+ *
+ * @details Diese Datei stellt ein Formular sowie die serverseitige Logik bereit, 
+ * um neue Produkte in die Datenbank einzufügen. Dabei werden Kategorien, 
+ * Marken und dynamische Attribute berücksichtigt. Ein Bild-Upload oder 
+ * die Angabe einer Bild-URL sind ebenfalls möglich.
+ * Automatisch generierter Doxygen-Header wurde erweitert.
+ * 
+ * @author Fabian
+ * @date 2026-04-04
+ */
+
 // product_add.php
 
 require_once __DIR__ . '/lib/bootstrap.php';
 
+/**
+ * @section Zugriffskontrolle
+ * @brief Überprüfung der Administrator-Rechte.
+ * 
+ * Falls der Benutzer nicht eingeloggt ist oder die Rolle 'ADMIN' nicht besitzt,
+ * wird der Zugriff mit einem HTTP-Status 403 (Forbidden) verweigert und eine 
+ * Fehlermeldung ausgegeben.
+ */
 /* =======================
    0) Zugriffskontrolle – nur ADMIN
    ======================= */
@@ -17,6 +39,13 @@ if (empty($_SESSION['user_id']) || empty($_SESSION['user_roles']) || !in_array('
     exit;
 }
 
+/**
+ * @section Kategorie-Auswahl
+ * @brief Ermittlung der ausgewählten Kategorie-ID.
+ * 
+ * Die Kategorie-ID wird entweder aus den GET- oder POST-Parametern bezogen.
+ * Es wird sichergestellt, dass die ID aus Ziffern besteht (ctype_digit).
+ */
 /* =======================
    1) Kategorie aus GET
    ======================= */
@@ -27,11 +56,25 @@ if (isset($_GET['categoryID']) && ctype_digit($_GET['categoryID'])) {
     $categoryID = (int)$_POST['categoryID'];
 }
 
+/**
+ * @section Datenbankverbindung
+ * @brief Initialisierung der Datenbankverbindung.
+ * 
+ * Nutzt die globale Funktion db_connect() aus bootstrap.php / db.php, 
+ * um eine Verbindung zur MySQL-Datenbank herzustellen.
+ */
 /* =======================
    2) DB-Verbindung
    ======================= */
 $conn = db_connect();
 
+/**
+ * @section Kategorien-Laden
+ * @brief Abrufen aller verfügbaren Kategorien.
+ * 
+ * Die Kategorien werden für das Dropdown-Menü im Formular benötigt 
+ * und alphabetisch sortiert geladen.
+ */
 /* =======================
    3) Kategorien laden
    ======================= */
@@ -45,6 +88,13 @@ while ($row = $result->fetch_assoc()) {
     $categories[] = $row;
 }
 
+/**
+ * @section Marken-Laden
+ * @brief Abrufen aller verfügbaren Marken.
+ * 
+ * Lädt die Marken alphabetisch sortiert aus der Datenbank, 
+ * damit sie bei der Produkterstellung ausgewählt werden können.
+ */
 /* =======================
    3b) Marken laden
    ======================= */
@@ -58,6 +108,13 @@ while ($row = $result->fetch_assoc()) {
     $brands[] = $row;
 }
 
+/**
+ * @section Attribute-Laden
+ * @brief Abrufen der kategoriespezifischen Attribute.
+ * 
+ * Falls eine Kategorie ausgewählt wurde ($categoryID > 0), werden 
+ * die zugehörigen Attribute (inklusive Einheit und Datentyp) geladen.
+ */
 /* =======================
    4) Attribute zur Kategorie
    ======================= */
@@ -78,21 +135,35 @@ if ($categoryID > 0) {
     }
 }
 
+/**
+ * @section Produkt-Speicherung
+ * @brief Verarbeitung des abgesendeten Formulars zum Speichern eines Produkts.
+ * 
+ * Diese Sektion verarbeitet alle übergebenen Formulardaten (Modell, Beschreibung,
+ * Kategorie, Marke, Bild-Upload/URL, Attribute), validiert sie und fügt das 
+ * neue Produkt in die Datenbank ein.
+ */
 /* =======================
    5) Produkt speichern
    ======================= */
 $saveError = null;
+/** @var bool $debugMode Aktiviert den Debug-Modus für zusätzliche Fehlerausgaben, wenn ?debug=1 übergeben wird. */
 $debugMode = isset($_GET['debug']) && $_GET['debug'] === '1';
 $debugDetails = [];
 if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['saveProduct'])) {
 
+    /** @var string $model Der Name bzw. das Modell des Produkts */
     $model = trim($_POST['model']);
+    /** @var string|null $description Optionale Produktbeschreibung */
     $description = $_POST['description'] ?? null;
     $categoryID = (int)$_POST['categoryID'];
     $brandID = (int)($_POST['brandID'] ?? 0);
 
+    /** @var string $imageUrl Optionale Bild-URL */
     $imageUrl = trim((string)($_POST['imageUrl'] ?? ''));
+    /** @var array|null $imageFile Das hochgeladene Dateiobjekt aus $_FILES */
     $imageFile = (isset($_FILES['productImage']) && is_array($_FILES['productImage'])) ? $_FILES['productImage'] : null;
+    /** @var bool $hasUpload Wahr, wenn eine Datei hochgeladen wurde und kein Fehler UPLOAD_ERR_NO_FILE vorliegt */
     $hasUpload = $imageFile && isset($imageFile['error']) && (int)$imageFile['error'] !== UPLOAD_ERR_NO_FILE;
     $uploadMime = null;
 
@@ -109,6 +180,7 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['saveProduct'])) {
         $debugDetails['post_max_size'] = ini_get('post_max_size');
     }
 
+    // Validierung der Pflichtfelder und hochgeladenen Dateien
     if ($categoryID <= 0) {
         $saveError = 'Bitte eine Kategorie auswählen.';
     } elseif ($brandID <= 0) {
@@ -168,6 +240,10 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['saveProduct'])) {
     }
 
     if ($saveError === null) {
+        /**
+         * @brief Produkt anlegen
+         * Speichert die grundlegenden Produktdaten in der Tabelle 'products'.
+         */
         // --- Produkt anlegen ---
         $stmt = $conn->prepare("
             INSERT INTO products (categoryID, brandID, model, description)
@@ -186,11 +262,14 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['saveProduct'])) {
                     $debugDetails['db_error'] = $stmt->error;
                 }
             } else {
+                /** @var int $productID Die ID des neu erstellten Produkts (Last Insert ID) */
                 $productID = $stmt->insert_id;
 
+                /** @var string|null $publicImagePath Der öffentliche Pfad zum gespeicherten Produktbild */
                 $publicImagePath = null;
 
                 if ($hasUpload) {
+                    // Verarbeitung des hochgeladenen Bildes und Generierung des Zielpfades
                     $relativeTargetDir = 'assets/images/products';
                     $dirTargetDir = rtrim(__DIR__, "\\/") . DIRECTORY_SEPARATOR . str_replace('/', DIRECTORY_SEPARATOR, $relativeTargetDir);
                     $documentRoot = isset($_SERVER['DOCUMENT_ROOT']) ? (string)$_SERVER['DOCUMENT_ROOT'] : '';
@@ -241,6 +320,10 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['saveProduct'])) {
                 }
 
                 if ($saveError === null && $publicImagePath !== null) {
+                    /**
+                     * @brief Bildpfad aktualisieren
+                     * Aktualisiert den Datensatz des Produkts mit dem korrekten Bildpfad.
+                     */
                     $stmtImg = $conn->prepare("UPDATE products SET imagePath = ? WHERE productID = ?");
                     if ($stmtImg) {
                         $stmtImg->bind_param("si", $publicImagePath, $productID);
@@ -248,6 +331,11 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['saveProduct'])) {
                     }
                 }
 
+                /**
+                 * @brief Dynamische Attribute speichern
+                 * Iteriert über die übergebenen Attribute und speichert sie 
+                 * typgerecht in der Tabelle 'productAttributes'.
+                 */
                 // --- Attribute speichern ---
                 if (!empty($_POST['attributes'])) {
 
@@ -288,6 +376,7 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['saveProduct'])) {
                 }
 
                 if ($saveError === null) {
+                    // Nach erfolgreichem Speichern wird die Seite neu geladen (Post/Redirect/Get-Pattern)
                     header("Location: productAdder.php?categoryID=" . $categoryID);
                     exit;
                 }
@@ -296,6 +385,7 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['saveProduct'])) {
     }
 }
 
+// Inkludiert den Header-Bereich des HTML-Dokuments
 include 'header.php';
 ?>
 
@@ -398,6 +488,9 @@ include 'header.php';
 </main>
 
 <?php
+/**
+ * @brief Datenbankverbindung schließen und Footer inkludieren.
+ */
 $conn->close();
 include 'footer.php';
 ?>
diff --git a/productpage.php b/productpage.php
index 82e93b4..158b1a3 100644
--- a/productpage.php
+++ b/productpage.php
@@ -1,11 +1,31 @@
 <?php
+/**
+ * @file productpage.php
+ * @brief Darstellung der Detailseite eines spezifischen Produkts.
+ *
+ * @details Diese Datei generiert die Produktdetailseite. Sie umfasst das Laden der Produktdaten
+ * anhand der übergebenen ID, Behandeln von POST-Anfragen (Bewertung löschen, Wunschliste bearbeiten,
+ * Vergleiche verwalten) und die Darstellung der zugehörigen Shops, Attribute sowie Bewertungen.
+ * 
+ * @author System
+ * @version 1.0
+ */
+
 // productpage.php
 
 require_once __DIR__ . '/lib/bootstrap.php';
 
+/**
+ * @brief Initiiert die Datenbankverbindung.
+ * @details Stellt eine globale Verbindung zur Datenbank her, um die nachfolgenden Queries ausführen zu können.
+ */
 // 1) DB-Verbindung (einmal)
 $conn = db_connect();
 
+/**
+ * @brief Holt die Produkt-ID aus dem GET-Parameter.
+ * @details Validierung der ID, Rückfall auf 0, wenn kein valider Wert übergeben wurde.
+ */
 $productId = isset($_GET['id']) ? (int)$_GET['id'] : 0;
 
 if ($productId <= 0) {
@@ -13,6 +33,10 @@ if ($productId <= 0) {
     exit;
 }
 
+/**
+ * @brief Überprüft, ob das Produkt in der Datenbank existiert.
+ * @details Falls kein Datensatz für die gegebene productID gefunden wird, wird der Nutzer auf eine 404-Seite umgeleitet.
+ */
 $checkStmt = $conn->prepare("SELECT productID FROM products WHERE productID = ?");
 $checkStmt->bind_param("i", $productId);
 $checkStmt->execute();
@@ -22,6 +46,11 @@ if ($checkResult->num_rows === 0) {
     exit;
 }
 
+/**
+ * @brief Behandelt das Löschen von Bewertungen.
+ * @details Administrator-Nutzer können Bewertungen über einen POST-Request löschen.
+ * Überprüft die Nutzerrolle in der Session und führt das DELETE-Statement aus.
+ */
 if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['delete_review']) && isset($_POST['delete_review_id'])) {
     if (!empty($_SESSION['user_roles']) && in_array('ADMIN', $_SESSION['user_roles'], true)) {
         $deleteId = (int)$_POST['delete_review_id'];
@@ -40,6 +69,11 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['delete_review']) && i
 <?php include 'header.php'; ?>
 
     <?php
+    /**
+     * @brief Holt die detaillierten Produktdaten und -attribute.
+     * @details Führt einen JOIN über products, categoryAttributes, attributes und productAttributes aus,
+     * um alle Eigenschaften für die Anzeige abzurufen.
+     */
     $stmt = $conn->prepare("
     SELECT 
         a.name,
@@ -77,8 +111,15 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['delete_review']) && i
     $product = $result->fetch_assoc();
     $categoryId = $product['categoryID'];
 
+    /**
+     * @brief Initialer Status für die Wunschliste.
+     */
     $alreadyInWishlist = false;
 
+    /**
+     * @brief Prüft, ob sich das Produkt bereits auf der Wunschliste des angemeldeten Nutzers befindet.
+     * @details Falls der Nutzer angemeldet ist (`user_id` ist gesetzt), wird in `userFavorites` gesucht.
+     */
     if (isset($_SESSION['user_id'])) {
 
         $stmtCheck = mysqli_prepare(
@@ -109,6 +150,11 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['delete_review']) && i
     ?>
 
 <?php
+/**
+ * @brief Verarbeitet POST-Requests für die Wunschliste.
+ * @details Benutzer können das Produkt der Wunschliste hinzufügen oder daraus entfernen.
+ * Benötigt eine aktive Session mit gültiger `user_id`.
+ */
 // PRÜFEN: POST-Request und Nutzer ist eingeloggt
 if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_SESSION['user_id'])) {
 
@@ -138,6 +184,11 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_SESSION['user_id'])) {
     }
 }
 
+/**
+ * @brief Logik für das Produktvergleichs-Feature.
+ * @details Speichert Produkte nach `categoryID` gruppiert in der Session-Variable `compare`,
+ * um später mehrere Produkte vergleichen zu können. POST-Requests updaten dieses Array.
+ */
 // Vergleichslogik
 if (!isset($_SESSION['compare'])) {
     $_SESSION['compare'] = [];
@@ -160,6 +211,11 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
 
 
     <?php
+    /**
+     * @brief Berechnet Bewertungs-Statistiken für dieses Produkt.
+     * @details Holt den Durchschnitt und zählt, wie viele Bewertungen je Sterne-Kategorie existieren, 
+     * um die Bewertungsübersicht (Balkendiagramm) darzustellen.
+     */
     // SQL korrigiert: SUM statt COUNT für die bedingten Zählungen
     $stmtRevOv = mysqli_prepare($conn,
             "SELECT ROUND(AVG(rating), 1) as avgRating, 
@@ -295,6 +351,11 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
                 </div>
 
                 <?php
+                /**
+                 * @brief Gibt die Produktattribute (Specs) dynamisch aus.
+                 * @details Iteriert durch die vorab geladenen Attribute und formatiert die Ausgabe 
+                 * entsprechend den Datentypen (String, Number, Boolean).
+                 */
                 while ($row = $result->fetch_assoc()) {
                     echo "<p><strong>{$row['name']}:</strong> ";
                     if (!empty($row['valueString'])) echo $row['valueString'];
@@ -308,6 +369,11 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
     </div>
 
     <?php
+    /**
+     * @brief Holt die anbietenden Shops inkl. Preisen und Links zum Produkt.
+     * @details Abhängig von der bestehenden Datenbankstruktur ('productURL' vs 'offerURL') wird
+     * die korrekte Spalte per Fallback ermittelt und abgefragt.
+     */
     // Unterschiedliche DB-Stände: URL-Spalte heißt je nach Schema z.B. productURL oder offerURL.
     // Wir ermitteln die existierende Spalte dynamisch, damit die Seite nicht mit "Unknown column" crasht.
     $urlColumn = '';
@@ -335,6 +401,9 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
 
     $shopInfo = [];
 
+    /**
+     * @brief Speichert die Shop-Ergebnisseingebungen in einem Array für die spätere Iteration.
+     */
     while ($row = $result->fetch_assoc()) {
         $shopInfo[] = $row;
     }
@@ -389,6 +458,10 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
 
 
     <?php
+    /**
+     * @brief Holt alle Nutzer-Bewertungen zu diesem Produkt.
+     * @details Liefert Bewertungstexte, Anzahl vergebener Sterne und die nutzerspezifischen Profileigenschaften.
+     */
     // HIER ANGEPASST: profilePicture und createdAt zum SELECT hinzugefügt
     $stmt = mysqli_prepare($conn,
             " SELECT reviews.reviewID, rating, comment, users.displayname, users.profilePicture, reviews.createdAt 
@@ -402,6 +475,9 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
 
     $reviews = [];
 
+    /**
+     * @brief Speichert alle ermittelten Bewertungen im Array für die Ansicht.
+     */
     while ($row = $result->fetch_assoc()) {
         $reviews[] = $row;
     }
@@ -471,6 +547,11 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
         <h2 class="reviews-title">Füge deine Bewertung hinzu!</h2>
 
         <?php
+        /**
+         * @brief Steuert den Logik-Fluss zum Hinzufügen einer eigenen Bewertung.
+         * @details Prüft zunächst, ob der momentan eingeloggte Nutzer das Produkt bereits
+         * bewertet hat. Falls nicht, kann eine neue Bewertung über einen POST-Request verarbeitet werden.
+         */
         $userHasReviewed = false;
 
         // 1. Prüfen, ob der eingeloggte Nutzer schon bewertet hat
@@ -517,7 +598,7 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
                     mysqli_stmt_execute($stmtInsertRev);
                     mysqli_stmt_close($stmtInsertRev);
 
-                    // JS Weiterleitung
+                    // JS Weiterleitung nach dem erfolgreichen Anlegen der Bewertung
                     echo "<script>window.location.href = 'productpage.php?id=" . $productId . "';</script>";
                     exit;
                 }
@@ -540,6 +621,10 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
                 </div>
 
             <?php else: ?>
+                <!--
+                 * @brief Eingabeformular für Bewertungen.
+                 * @details Bietet ein Feld für den Kommentartext sowie Radio-Buttons für das Sterne-Rating (1-5).
+                 -->
                 <form class="review-input-form" method="post" autocomplete="off">
                     <input type="hidden" name="submit_review" value="1">
 
@@ -569,4 +654,4 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
         </div>
     </div>
 
-<?php include 'footer.php'; ?>
\ No newline at end of file
+<?php include 'footer.php'; ?>
diff --git a/register.php b/register.php
index ce8c16d..4348956 100644
--- a/register.php
+++ b/register.php
@@ -1,50 +1,109 @@
 <?php
+/**
+ * @file register.php
+ * @brief Behandelt die Registrierung neuer Benutzer.
+ *
+ * @details Diese Datei stellt das Registrierungsformular bereit und verarbeitet die 
+ * abgesendeten POST-Daten. Sie validiert die Eingaben (E-Mail, Benutzername, Passwort),
+ * prüft auf Duplikate in der Datenbank und legt bei erfolgreicher Validierung einen neuen 
+ * Benutzer samt zugehöriger Standard-Rolle ("USER") in der Datenbank an.
+ * 
+ * @author System
+ * @version 1.0
+ */
+
 // register.php
 
 require_once __DIR__ . '/lib/bootstrap.php';
-
 require_once __DIR__ . '/lib/strings.php';
 
+/**
+ * @brief Initiiert die globale Datenbankverbindung.
+ * @details Ruft die Funktion db_connect() auf, um eine Verbindung zur konfigurierten 
+ * Datenbank herzustellen. Diese Verbindung wird für alle folgenden Queries verwendet.
+ */
 // 1) DB-Verbindung (einmal)
 $conn = db_connect();
 
+/**
+ * @brief Array zur Speicherung möglicher Validierungs- oder Datenbankfehler.
+ * @var array $errors
+ */
 $errors = [];
+
+/**
+ * @brief Array zur Zwischenspeicherung der eingegebenen Formulardaten.
+ * @details Dient dazu, die Eingaben des Nutzers (E-Mail und Anzeigename) nach 
+ * einem fehlerhaften Submit-Versuch wieder im Formularfeld anzeigen zu können.
+ * @var array $values
+ */
 $values = [
         'email' => '',
         'displayName' => ''
 ];
 
+/**
+ * @brief Prüft, ob das Formular per POST-Methode abgesendet wurde.
+ * @details Alle Validierungs- und Registrierungsschritte werden nur ausgeführt, 
+ * wenn Daten via POST übermittelt wurden.
+ */
 if ($_SERVER['REQUEST_METHOD'] === 'POST')
 {
+    /**
+     * @brief Holt und bereinigt die eingegebene E-Mail-Adresse.
+     * @var string $email
+     */
     $email = '';
     if (isset($_POST['email']))
     {
         $email = trim((string)$_POST['email']);
     }
 
+    /**
+     * @brief Holt und bereinigt den eingegebenen Benutzernamen.
+     * @var string $displayName
+     */
     $displayName = '';
     if (isset($_POST['displayName']))
     {
         $displayName = trim((string)$_POST['displayName']);
     }
 
+    /**
+     * @brief Holt das eingegebene Passwort.
+     * @var string $pw
+     */
     $pw = '';
     if (isset($_POST['pw']))
     {
         $pw = (string)$_POST['pw'];
     }
 
+    /**
+     * @brief Holt die Wiederholung des eingegebenen Passworts.
+     * @var string $pw2
+     */
     $pw2 = '';
     if (isset($_POST['pw2']))
     {
         $pw2 = (string)$_POST['pw2'];
     }
 
+    /**
+     * @brief Standard-Profilbild für neu registrierte Nutzer.
+     * @var string $profilePicture
+     */
     $profilePicture = 'assets/images/profilePictures/default.png';
 
+    // Aktualisiere das $values-Array für die erneute Anzeige bei Fehlern
     $values['email'] = $email;
     $values['displayName'] = $displayName;
 
+    /**
+     * @brief Validierung der Eingabedaten.
+     * @details Prüft E-Mail-Format, Länge des Benutzernamens (3-50 Zeichen), 
+     * Passwortlänge (min. 8 Zeichen) und Übereinstimmung der Passwörter.
+     */
     // Validierung
     if ($email === '' || !filter_var($email, FILTER_VALIDATE_EMAIL))
     {
@@ -66,6 +125,11 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST')
         $errors[] = 'Die Passwörter stimmen nicht überein.';
     }
 
+    /**
+     * @brief Prüfung auf bereits existierende E-Mail.
+     * @details Falls bisher keine Fehler aufgetreten sind, wird in der Datenbank 
+     * geprüft, ob die angegebene E-Mail bereits von einem anderen Account genutzt wird.
+     */
     // Duplicate-Checks
     if (!$errors)
     {
@@ -87,6 +151,11 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST')
         }
     }
 
+    /**
+     * @brief Prüfung auf bereits existierenden Benutzernamen.
+     * @details Führt eine Datenbankabfrage durch, um sicherzustellen, dass 
+     * der gewählte Anzeigename (displayName) noch verfügbar ist.
+     */
     if (!$errors)
     {
         $stmt = mysqli_prepare($conn, 'SELECT userID FROM users WHERE displayName = ? LIMIT 1');
@@ -107,6 +176,13 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST')
         }
     }
 
+    /**
+     * @brief Finaler Insert-Vorgang für den neuen Benutzer.
+     * @details Wenn keine Fehler vorliegen, wird das Passwort gehasht und der 
+     * Benutzer in der Tabelle `users` gespeichert. Anschließend wird ihm die  
+     * Standard-Rolle (USER) auf der Tabelle `userRoles` zugewiesen und 
+     * auf die Login-Seite weitergeleitet.
+     */
     // Insert
     if (!$errors)
     {
@@ -127,8 +203,17 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST')
             
             if ($ok)
             {
+                /**
+                 * @brief ID des soeben neu erstellten Benutzers.
+                 * @var int $newUserId
+                 */
                 $newUserId = mysqli_insert_id($conn);
                 
+                /**
+                 * @brief Zuweisung der initialen Benutzerrolle "USER".
+                 * @details Sucht die ID der "USER"-Rolle aus der Tabelle `roles` 
+                 * und verknüpft sie mit der neuen Benutzer-ID in `userRoles`.
+                 */
                 // Get USER roleID
                 $roleStmt = mysqli_prepare($conn, "SELECT roleID FROM roles WHERE name = 'USER' LIMIT 1");
                 if ($roleStmt) {
@@ -150,6 +235,12 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST')
                 mysqli_stmt_close($stmt);
 
                 mysqli_close($conn);
+                
+                /**
+                 * @brief Weiterleitung nach erfolgreicher Registrierung.
+                 * @details Leitet zurück auf login.php mit dem GET-Parameter `registered=1`,
+                 * damit der Nutzer eine Erfolgsmeldung erhält.
+                 */
                 header('Location: login.php?registered=1');
                 exit;
             }
@@ -160,9 +251,18 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST')
     }
 }
 
+/**
+ * @brief Einbinden des Seiten-Headers.
+ * @details Lädt die globale Navigationstruktur für die visuelle Darstellung (HTML/CSS).
+ */
 include 'header.php';
 ?>
 
+<!--
+  @brief Start des HTML-Hauptbereichs für die Registrierung.
+  @details Beinhaltet das Registrierungsformular, die Ausgabe etwaiger Fehler
+  sowie Links zum Login für bereits angemeldete Benutzer.
+-->
 <main class="auth" role="main">
     <section class="auth__grid" aria-label="Registrierung Bereich">
         <div class="auth__card">
@@ -217,6 +317,11 @@ include 'header.php';
 </main>
 
 <?php
+/**
+ * @brief Schließt die Datenbankverbindung und bindet den Footer ein.
+ * @details Säubert die offene MySQLi-Verbindung. Der Footer schließt 
+ * das HTML-Dokument korrekt ab.
+ */
 mysqli_close($conn);
 include 'footer.php';
 ?>
diff --git a/stats.json b/stats.json
deleted file mode 100644
index b6ab221..0000000
--- a/stats.json
+++ /dev/null
@@ -1 +0,0 @@
-{"Css":{"blanks":480,"code":2610,"comments":231,"reports":[{"stats":{"blanks":158,"code":904,"comments":102,"blobs":{}},"name":"./style.css"},{"stats":{"blanks":23,"code":93,"comments":18,"blobs":{}},"name":"./assets/css/catbar.css"},{"stats":{"blanks":24,"code":129,"comments":6,"blobs":{}},"name":"./assets/css/productAdder.css"},{"stats":{"blanks":59,"code":350,"comments":20,"blobs":{}},"name":"./assets/css/compcard.css"},{"stats":{"blanks":114,"code":595,"comments":53,"blobs":{}},"name":"./assets/css/productpage.css"},{"stats":{"blanks":102,"code":539,"comments":32,"blobs":{}},"name":"./assets/css/login.css"}],"children":{},"inaccurate":false},"Html":{"blanks":0,"code":13,"comments":0,"reports":[{"stats":{"blanks":0,"code":13,"comments":0,"blobs":{}},"name":"./other/login.html"}],"children":{},"inaccurate":false},"JavaScript":{"blanks":39,"code":180,"comments":3,"reports":[{"stats":{"blanks":39,"code":180,"comments":3,"blobs":{}},"name":"./assets/js/search-autocomplete.js"}],"children":{},"inaccurate":false},"Json":{"blanks":0,"code":0,"comments":0,"reports":[{"stats":{"blanks":0,"code":0,"comments":0,"blobs":{}},"name":"./stats.json"}],"children":{},"inaccurate":false},"Php":{"blanks":436,"code":2219,"comments":124,"reports":[{"stats":{"blanks":3,"code":12,"comments":2,"blobs":{}},"name":"./lib/config.php"},{"stats":{"blanks":3,"code":7,"comments":0,"blobs":{}},"name":"./index.php"},{"stats":{"blanks":5,"code":28,"comments":5,"blobs":{}},"name":"./lib/bootstrap.php"},{"stats":{"blanks":7,"code":17,"comments":8,"blobs":{}},"name":"./lib/db.php"},{"stats":{"blanks":4,"code":23,"comments":14,"blobs":{}},"name":"./lib/strings.php"},{"stats":{"blanks":15,"code":59,"comments":5,"blobs":{}},"name":"./api/search_products.php"},{"stats":{"blanks":0,"code":1,"comments":0,"blobs":{}},"name":"./file.php"},{"stats":{"blanks":2,"code":10,"comments":0,"blobs":{}},"name":"./footer.php"},{"stats":{"blanks":28,"code":98,"comments":8,"blobs":{}},"name":"./compcards.php"},{"stats":{"blanks":23,"code":137,"comments":4,"blobs":{}},"name":"./header.php"},{"stats":{"blanks":27,"code":113,"comments":7,"blobs":{}},"name":"./login.php"},{"stats":{"blanks":22,"code":117,"comments":0,"blobs":{}},"name":"./account.php"},{"stats":{"blanks":27,"code":109,"comments":11,"blobs":{}},"name":"./upload.php"},{"stats":{"blanks":10,"code":44,"comments":4,"blobs":{}},"name":"./wunschliste.php"},{"stats":{"blanks":6,"code":18,"comments":6,"blobs":{}},"name":"./logout.php"},{"stats":{"blanks":44,"code":302,"comments":2,"blobs":{}},"name":"./impressum.php"},{"stats":{"blanks":92,"code":391,"comments":12,"blobs":{}},"name":"./productpage.php"},{"stats":{"blanks":54,"code":325,"comments":24,"blobs":{}},"name":"./productAdder.php"},{"stats":{"blanks":8,"code":24,"comments":0,"blobs":{}},"name":"./catbar.php"},{"stats":{"blanks":26,"code":219,"comments":7,"blobs":{}},"name":"./404.php"},{"stats":{"blanks":30,"code":165,"comments":5,"blobs":{}},"name":"./register.php"}],"children":{},"inaccurate":false},"Svg":{"blanks":0,"code":6,"comments":0,"reports":[{"stats":{"blanks":0,"code":4,"comments":0,"blobs":{}},"name":"./assets/icons/wishlist.svg"},{"stats":{"blanks":0,"code":1,"comments":0,"blobs":{}},"name":"./assets/icons/bookmark.svg"},{"stats":{"blanks":0,"code":1,"comments":0,"blobs":{}},"name":"./assets/icons/user.svg"}],"children":{},"inaccurate":false},"Total":{"blanks":955,"code":5028,"comments":358,"reports":[],"children":{"Css":[{"stats":{"blanks":158,"code":904,"comments":102,"blobs":{}},"name":"./style.css"},{"stats":{"blanks":23,"code":93,"comments":18,"blobs":{}},"name":"./assets/css/catbar.css"},{"stats":{"blanks":24,"code":129,"comments":6,"blobs":{}},"name":"./assets/css/productAdder.css"},{"stats":{"blanks":59,"code":350,"comments":20,"blobs":{}},"name":"./assets/css/compcard.css"},{"stats":{"blanks":114,"code":595,"comments":53,"blobs":{}},"name":"./assets/css/productpage.css"},{"stats":{"blanks":102,"code":539,"comments":32,"blobs":{}},"name":"./assets/css/login.css"}],"Html":[{"stats":{"blanks":0,"code":13,"comments":0,"blobs":{}},"name":"./other/login.html"}],"JavaScript":[{"stats":{"blanks":39,"code":180,"comments":3,"blobs":{}},"name":"./assets/js/search-autocomplete.js"}],"Json":[{"stats":{"blanks":0,"code":0,"comments":0,"blobs":{}},"name":"./stats.json"}],"Php":[{"stats":{"blanks":3,"code":12,"comments":2,"blobs":{}},"name":"./lib/config.php"},{"stats":{"blanks":3,"code":7,"comments":0,"blobs":{}},"name":"./index.php"},{"stats":{"blanks":5,"code":28,"comments":5,"blobs":{}},"name":"./lib/bootstrap.php"},{"stats":{"blanks":7,"code":17,"comments":8,"blobs":{}},"name":"./lib/db.php"},{"stats":{"blanks":4,"code":23,"comments":14,"blobs":{}},"name":"./lib/strings.php"},{"stats":{"blanks":15,"code":59,"comments":5,"blobs":{}},"name":"./api/search_products.php"},{"stats":{"blanks":0,"code":1,"comments":0,"blobs":{}},"name":"./file.php"},{"stats":{"blanks":2,"code":10,"comments":0,"blobs":{}},"name":"./footer.php"},{"stats":{"blanks":28,"code":98,"comments":8,"blobs":{}},"name":"./compcards.php"},{"stats":{"blanks":23,"code":137,"comments":4,"blobs":{}},"name":"./header.php"},{"stats":{"blanks":27,"code":113,"comments":7,"blobs":{}},"name":"./login.php"},{"stats":{"blanks":22,"code":117,"comments":0,"blobs":{}},"name":"./account.php"},{"stats":{"blanks":27,"code":109,"comments":11,"blobs":{}},"name":"./upload.php"},{"stats":{"blanks":10,"code":44,"comments":4,"blobs":{}},"name":"./wunschliste.php"},{"stats":{"blanks":6,"code":18,"comments":6,"blobs":{}},"name":"./logout.php"},{"stats":{"blanks":44,"code":302,"comments":2,"blobs":{}},"name":"./impressum.php"},{"stats":{"blanks":92,"code":391,"comments":12,"blobs":{}},"name":"./productpage.php"},{"stats":{"blanks":54,"code":325,"comments":24,"blobs":{}},"name":"./productAdder.php"},{"stats":{"blanks":8,"code":24,"comments":0,"blobs":{}},"name":"./catbar.php"},{"stats":{"blanks":26,"code":219,"comments":7,"blobs":{}},"name":"./404.php"},{"stats":{"blanks":30,"code":165,"comments":5,"blobs":{}},"name":"./register.php"}],"Svg":[{"stats":{"blanks":0,"code":4,"comments":0,"blobs":{}},"name":"./assets/icons/wishlist.svg"},{"stats":{"blanks":0,"code":1,"comments":0,"blobs":{}},"name":"./assets/icons/bookmark.svg"},{"stats":{"blanks":0,"code":1,"comments":0,"blobs":{}},"name":"./assets/icons/user.svg"}]},"inaccurate":false}}
\ No newline at end of file
diff --git a/style.css b/style.css
index 00dc02c..26e05f6 100755
--- a/style.css
+++ b/style.css
@@ -3,11 +3,29 @@
    Animated Dark Theme · Glassmorphism · Glow
    ========================================================== */
 
+/**
+ * @file style.css
+ * @brief Main stylesheet for the Geizkragen Design System v2.
+ *
+ * This file contains all global styles, CSS variables, keyframe animations,
+ * layout rules, typography, and component-specific styling (such as buttons,
+ * cards, navigation, and footer) for the application. It utilizes a dark theme
+ * with glassmorphism and glow effects.
+ *
+ * @version 2.0
+ */
+
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
 
 /* ==========================================================
    RESET & BASIS
    ========================================================== */
+/**
+ * @brief Global CSS reset.
+ *
+ * Resets margin and padding for all elements and sets box-sizing to border-box
+ * to ensure consistent box model calculations across the entire application.
+ */
 *,
 *::before,
 *::after {
@@ -16,6 +34,17 @@
     padding: 0;
 }
 
+/**
+ * @brief Root CSS variables defining the design token system.
+ *
+ * This pseudo-class contains all the fundamental design tokens including:
+ * - Colors (backgrounds, semantics, text, borders)
+ * - Border radii for various component sizes
+ * - Box shadows for elevation and glow effects
+ * - Transition timings for smooth animations
+ * - Layout spacing values
+ * - Primary typography settings
+ */
 :root {
     /* ─── Farben ─── */
     --bg-main:            #151923;
@@ -76,47 +105,89 @@
 /* ==========================================================
    KEYFRAME ANIMATIONS
    ========================================================== */
+/**
+ * @brief Fade in and slide up animation.
+ *
+ * Elements transition from transparent and slightly translated down
+ * to fully opaque at their original position.
+ */
 @keyframes fadeInUp {
     from { opacity: 0; transform: translateY(24px); }
     to   { opacity: 1; transform: translateY(0); }
 }
 
+/**
+ * @brief Simple fade in animation.
+ */
 @keyframes fadeIn {
     from { opacity: 0; }
     to   { opacity: 1; }
 }
 
+/**
+ * @brief Slide in from the right animation.
+ *
+ * Elements transition from transparent and translated right
+ * to fully opaque at their original position.
+ */
 @keyframes slideInRight {
     from { opacity: 0; transform: translateX(20px); }
     to   { opacity: 1; transform: translateX(0); }
 }
 
+/**
+ * @brief Scale in animation for a subtle zoom effect.
+ *
+ * Elements transition from transparent and slightly scaled down
+ * to fully opaque at their original size.
+ */
 @keyframes scaleIn {
     from { opacity: 0; transform: scale(0.95); }
     to   { opacity: 1; transform: scale(1); }
 }
 
+/**
+ * @brief Shimmering animation for loading placeholders.
+ *
+ * Creates a moving gradient effect to simulate a shimmering light.
+ */
 @keyframes shimmer {
     0%   { background-position: -200% 0; }
     100% { background-position: 200% 0; }
 }
 
+/**
+ * @brief Pulsating glow animation for emphasis.
+ *
+ * Elements receive a glowing shadow that intensifies and fades.
+ */
 @keyframes pulse-glow {
     0%, 100% { box-shadow: 0 0 20px rgba(37, 99, 235, 0.08); }
     50%      { box-shadow: 0 0 40px rgba(37, 99, 235, 0.18); }
 }
 
+/**
+ * @brief Continuous float animation for ambient background elements.
+ */
 @keyframes float {
     0%, 100% { transform: translateY(0); }
     50%      { transform: translateY(-8px); }
 }
 
+/**
+ * @brief Gradient shifting animation for vibrant backgrounds.
+ */
 @keyframes gradientShift {
     0%   { background-position: 0% 50%; }
     50%  { background-position: 100% 50%; }
     100% { background-position: 0% 50%; }
 }
 
+/**
+ * @brief Border glowing animation for emphasis.
+ *
+ * Elements' borders transition between two glow states.
+ */
 @keyframes borderGlow {
     0%, 100% { border-color: rgba(37, 99, 235, 0.15); }
     50%      { border-color: rgba(37, 99, 235, 0.35); }
@@ -125,10 +196,21 @@
 /* ==========================================================
    GLOBAL
    ========================================================== */
+/**
+ * @brief Global standard HTML element rules.
+ *
+ * Enables smooth scrolling behavior across the entire document.
+ */
 html {
     scroll-behavior: smooth;
 }
 
+/**
+ * @brief Primary body base styles.
+ *
+ * Establishes the core typography, background color, text color,
+ * and standard flexbox layout structure to ensure the footer sticks to the bottom.
+ */
 body {
     font-family: var(--font-family);
     background: var(--bg-main);
@@ -196,6 +278,12 @@ a:hover {
 /* ==========================================================
    CONTAINER
    ========================================================== */
+/**
+ * @brief Standard layout container.
+ *
+ * Centers content horizontally and limits its maximum width to maintain
+ * readability on large screens, applying standard horizontal padding.
+ */
 .container {
     max-width: 1400px;
     margin-inline: auto;
@@ -205,6 +293,12 @@ a:hover {
 /* ==========================================================
    HEADER – Glassmorphism
    ========================================================== */
+/**
+ * @brief Primary site header with glassmorphism effect.
+ *
+ * Ensures the header is sticky at the top, applies a blur filter for the
+ * glassmorphic look, and controls the initial fade-in animation.
+ */
 .header {
     position: sticky;
     top: 0;
@@ -261,10 +355,16 @@ a:hover {
 /* ==========================================================
    SEARCH AUTOCOMPLETE DROPDOWN
    ========================================================== */
+/**
+ * @brief Wrapper for the search field when it contains a dropdown.
+ */
 .nav__searchField--hasDropdown {
     position: relative;
 }
 
+/**
+ * @brief Autocomplete dropdown container styling.
+ */
 .searchDropdown {
     position: absolute;
     left: 0;
@@ -683,6 +783,11 @@ a:hover {
 /* ==========================================================
    LAYOUT (Grid mit Sidebar)
    ========================================================== */
+/**
+ * @brief Main grid layout establishing a sidebar and main content area.
+ *
+ * Employs CSS Grid to define a 260px sidebar alongside a fluid main content area.
+ */
 .layout {
     margin: 2rem auto;
     padding: 0 2rem;
@@ -694,6 +799,11 @@ a:hover {
 /* ==========================================================
    FILTER / SIDEBAR
    ========================================================== */
+/**
+ * @brief Sidebar container styles.
+ *
+ * Utilizes standard card background, subtle borders, and smooth fade-in animations.
+ */
 .sidebar {
     background: var(--bg-card);
     border: 1px solid var(--border-subtle);
@@ -744,6 +854,11 @@ a:hover {
 /* ==========================================================
    PRODUCT GRID
    ========================================================== */
+/**
+ * @brief CSS Grid setup for laying out multiple product cards.
+ *
+ * Implements an auto-fill behavior for highly responsive product grids.
+ */
 .product-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
@@ -759,6 +874,12 @@ a:hover {
 /* ==========================================================
    PRODUCT CARD (global)
    ========================================================== */
+/**
+ * @brief Main product card component styling.
+ *
+ * Sets the background, borders, border-radius, and shadow for product items.
+ * Implements hover scaling and glow transitions.
+ */
 .product-card {
     background: var(--bg-card);
     border: 1px solid var(--border-subtle);
@@ -841,6 +962,12 @@ a:hover {
 /* ==========================================================
    BUTTONS – Gradient & Glow
    ========================================================== */
+/**
+ * @brief Base styling for all button elements.
+ *
+ * Defines flexible sizing, border radius, typography, and foundational
+ * transition properties for standard interactive elements.
+ */
 .btn {
     flex: 1;
     padding: 0.6rem 1.1rem;
@@ -910,6 +1037,9 @@ a:hover {
 /* ==========================================================
    BADGES
    ========================================================== */
+/**
+ * @brief Basic aesthetic container for miniature tags or status labels.
+ */
 .badge {
     display: inline-flex;
     align-items: center;
@@ -960,6 +1090,12 @@ a:hover {
 /* ==========================================================
    FOOTER – Glassmorphism
    ========================================================== */
+/**
+ * @brief Global footer component.
+ *
+ * Adheres to the overall glassmorphism aesthetic with background blur,
+ * border separation, and sticky-to-bottom layout integration.
+ */
 .footer {
     margin-top: auto;
     background: rgba(21, 25, 35, 0.92);
diff --git a/upload.php b/upload.php
index 91ee90d..80a646b 100644
--- a/upload.php
+++ b/upload.php
@@ -1,30 +1,77 @@
 <?php
+/**
+ * @file upload.php
+ * @brief Behandelt den Dateiupload für Profilbilder der Benutzer.
+ *
+ * @details Diese Datei nimmt ein hochgeladenes Bild als POST-Request entgegen.
+ * Sie validiert den Upload-Fehlercode, stellt sicher, dass es sich um ein gültiges
+ * Bild handelt (JPEG oder PNG) und verschiebt die Datei in das entsprechende
+ * Assets-Verzeichnis. Abschließend wird der Pfad zum hochgeladenen Bild in der
+ * Datenbank des Benutzers gespeichert. Alle Fehler und Erfolgsmeldungen leiten
+ * auf die account.php mit einem entsprechenden URL-Parameter zurück.
+ */
 
+/**
+ * @brief Bindet die grundlegenden Konfigurationen und Bibliotheken ein.
+ */
 require_once __DIR__ . '/lib/bootstrap.php';
 
+/**
+ * @brief Überprüft, ob der Benutzer angemeldet ist.
+ * 
+ * @details Wenn keine Benutzer-ID in der Session vorhanden ist,
+ * wird der Benutzer sofort auf die Login-Seite umgeleitet und das Skript beendet.
+ */
 if (empty($_SESSION['user_id']))
 {
     header('Location: login.php');
     exit();
 }
 
+/**
+ * @var int $userId Die ID des aktuell angemeldeten Benutzers, ausgelesen aus der Session.
+ */
 $userId = (int)$_SESSION['user_id'];
 
+/**
+ * @brief Überprüft, ob die Anfrage über die POST-Methode gesendet wurde.
+ * 
+ * @details Auf diese Datei darf nur per HTTP POST zugegriffen werden (Formular-Upload).
+ * Andernfalls wird der Benutzer zur account.php umgeleitet.
+ */
 if ($_SERVER['REQUEST_METHOD'] !== 'POST')
 {
     header('Location: account.php');
     exit();
 }
 
+/**
+ * @brief Überprüft, ob das Feld 'uploadFile' im $_FILES Array gesetzt ist.
+ * 
+ * @details Es muss eine Datei über das erwartete Formularfeld übertragen worden sein.
+ */
 if (!isset($_FILES['uploadFile']) || !is_array($_FILES['uploadFile']))
 {
     header('Location: account.php?upload=err');
     exit();
 }
 
+/**
+ * @var array $file Referenz auf die hochgeladene Datei im $_FILES Array.
+ */
 $file = $_FILES['uploadFile'];
 
+/**
+ * @var int $fileError Ermittelt den PHP-Upload-Fehlercode (UPLOAD_ERR_OK, falls erfolgreich).
+ */
 $fileError = isset($file['error']) ? (int)$file['error'] : UPLOAD_ERR_NO_FILE;
+
+/**
+ * @brief Überprüft, ob beim Upload ein Fehler aufgetreten ist.
+ * 
+ * @details Wenn $fileError nicht UPLOAD_ERR_OK ist, wird abgebrochen, der Fehler ins 
+ * Error-Log geschrieben und zur Account-Seite mit dem Fehlercode umgeleitet.
+ */
 if ($fileError !== UPLOAD_ERR_OK)
 {
     // Serverseitiges Log ist ok, aber kein Pfad/Interna im Browser
@@ -33,8 +80,17 @@ if ($fileError !== UPLOAD_ERR_OK)
     exit();
 }
 
+/**
+ * @var string $tmp Der temporäre Dateipfad, an dem die hochgeladene Datei abgelegt wurde.
+ */
 // Basic Validierung
 $tmp = isset($file['tmp_name']) ? (string)$file['tmp_name'] : '';
+
+/**
+ * @brief Überprüft die Existenz und Gültigkeit der temporären Upload-Datei.
+ * 
+ * @details Nutzt is_uploaded_file, um Exploits und Path-Traversal-Angriffe zu verhindern.
+ */
 if ($tmp === '' || !is_uploaded_file($tmp))
 {
     // Debug-Detail (tmp-Pfad) nicht loggen
@@ -43,14 +99,29 @@ if ($tmp === '' || !is_uploaded_file($tmp))
     exit();
 }
 
+/**
+ * @var array $allowedMimeToExt Zuordnung von erlaubten MIME-Types zu deren Dateiendungen.
+ */
 $allowedMimeToExt = [
     'image/jpeg' => 'jpg',
     'image/png' => 'png',
 ];
 
+/**
+ * @var finfo $finfo PHP finfo-Instanz zur Bestimmung des tatsächlichen MIME-Types der Datei.
+ */
 $finfo = new finfo(FILEINFO_MIME_TYPE);
+
+/**
+ * @var string|false $mime Der ausgelesene MIME-Type der temporären Datei.
+ */
 $mime = $finfo->file($tmp);
 
+/**
+ * @brief Validiert den MIME-Type.
+ * 
+ * @details Erlaubt sind nur die in $allowedMimeToExt definierten Dateitypen (JPEG, PNG).
+ */
 if (!$mime || !isset($allowedMimeToExt[$mime]))
 {
     // Mime loggen ist ok (kein Secret), hilft bei Support
@@ -59,21 +130,45 @@ if (!$mime || !isset($allowedMimeToExt[$mime]))
     exit();
 }
 
+/**
+ * @var string $ext Die zur validierten Datei passende Dateiendung.
+ */
 $ext = $allowedMimeToExt[$mime];
 
+/**
+ * @var string $relativeTargetDir Relativer Pfad zum Verzeichnis der Profilbilder.
+ */
 // Zielordner: assets/images/profilePictures relativ zum Projekt (upload.php liegt im Webroot)
 $relativeTargetDir = 'assets/images/profilePictures';
 
+/**
+ * @var string $dirTargetDir Absoluter Pfad zum Zielordner, basierend auf der aktuellen Datei (__DIR__).
+ */
 // Kandidat 1: relativ zu __DIR__ (robust gegen VHost/Alias)
 $dirTargetDir = rtrim(__DIR__, "\\/") . DIRECTORY_SEPARATOR . str_replace('/', DIRECTORY_SEPARATOR, $relativeTargetDir);
 
+/**
+ * @var string $documentRoot Dokumentenwurzel des Webservers (falls gesetzt).
+ */
 // Kandidat 2: relativ zu DOCUMENT_ROOT (nur wenn gesetzt)
 $documentRoot = isset($_SERVER['DOCUMENT_ROOT']) ? (string)$_SERVER['DOCUMENT_ROOT'] : '';
+
+/**
+ * @var string $docRootTrim Formatierter Dokumenten-Root-Pfad (ohne abschließende Slashes).
+ */
 $docRootTrim = rtrim($documentRoot, "\\/");
+
+/**
+ * @var string $docTargetDir Absoluter Zielordner aus der Server-Variablen (DOCUMENT_ROOT).
+ */
 $docTargetDir = ($docRootTrim !== '')
     ? $docRootTrim . DIRECTORY_SEPARATOR . str_replace('/', DIRECTORY_SEPARATOR, $relativeTargetDir)
     : '';
 
+/**
+ * @var string $targetDir Finaler Pfad, in den die Datei verschoben wird.
+ * @details Bevorzugt wird __DIR__. Falls dieses aus Systemgründen fehlschlägt und DOCUMENT_ROOT zur Verfügung steht, wird dieser verwendet.
+ */
 // Bevorzugt __DIR__. Falls __DIR__ aus irgendeinem Grund nicht ins Projekt zeigt, und DOCUMENT_ROOT plausibel ist, nutze DOCUMENT_ROOT.
 $targetDir = $dirTargetDir;
 if ($docTargetDir !== '' && !is_dir($dirTargetDir) && is_dir($docTargetDir))
@@ -81,6 +176,11 @@ if ($docTargetDir !== '' && !is_dir($dirTargetDir) && is_dir($docTargetDir))
     $targetDir = $docTargetDir;
 }
 
+/**
+ * @brief Prüft, ob das Zielverzeichnis existiert und erstellt es gegebenenfalls.
+ * 
+ * @details Nutzt mkdir() rekursiv, um fehlende Ordnerstrukturen zu generieren.
+ */
 if (!is_dir($targetDir))
 {
     $mkOk = @mkdir($targetDir, 0755, true);
@@ -94,6 +194,9 @@ if (!is_dir($targetDir))
     }
 }
 
+/**
+ * @brief Prüft, ob in den Zielordner geschrieben werden darf.
+ */
 if (!is_writable($targetDir))
 {
     error_log('Upload: targetDir not writable: ' . $targetDir);
@@ -101,12 +204,28 @@ if (!is_writable($targetDir))
     exit();
 }
 
+/**
+ * @var string $timestamp Ein Zeitstempel zur Vergabe einmaliger Dateinamen.
+ */
 // Dateiname: user_<ID>_<Datum>.<ext>
 // Format ist dateisystem-sicher (keine Doppelpunkte) und eindeutig genug.
 $timestamp = gmdate('Ymd-His');
+
+/**
+ * @var string $filename Der zu verwendende neue Name für die hochgeladene Datei.
+ */
 $filename = 'user_' . $userId . '_' . $timestamp . '.' . $ext;
+
+/**
+ * @var string $targetPath Der genaue finale Pfad (inkl. Dateiname).
+ */
 $targetPath = rtrim($targetDir, "\\/") . DIRECTORY_SEPARATOR . $filename;
 
+/**
+ * @brief Verschiebt die hochgeladene Datei aus dem temporären Verzeichnis in den endgültigen Pfad.
+ * 
+ * @details Schlägt dieser Vorgang fehl, wird ein serverseitiges Error-Log geschrieben und eine Weiterleitung durchgeführt.
+ */
 if (!move_uploaded_file($tmp, $targetPath))
 {
     $lastErr = error_get_last();
@@ -116,15 +235,36 @@ if (!move_uploaded_file($tmp, $targetPath))
     exit();
 }
 
+/**
+ * @var string $publicPath Öffentlich zugänglicher URL-Pfad relativ zum Webroot. 
+ * Dies ist der Pfad, der in der Datenbank gespeichert wird.
+ */
 // Pfad, der in HTML genutzt wird (URL relativ zur Webroot)
 $publicPath = 'assets/images/profilePictures/' . $filename;
 
+/**
+ * @var string $servername Adresse des Datenbankservers (veraltet in diesem Skript, aber vorhanden).
+ */
 $servername = "localhost";
+
+/**
+ * @var int $port Portadresse der Datenbank (ebenfalls ungenutzt im direkten Setup hier).
+ */
 $port = 3306;
 
+/**
+ * @var mysqli|bool $conn Die per db_connect (aus lib/db.php) aufgebaute Verbindung zur Datenbank.
+ */
 $conn = db_connect();
 
+/**
+ * @var mysqli_stmt|false $stmt Das vorbereitete Statement zur Aktualisierung des Benutzer-Profilbilds.
+ */
 $stmt = mysqli_prepare($conn, "UPDATE users SET profilePicture = ? WHERE userID = ?");
+
+/**
+ * @brief Bricht ab, wenn das Prepared Statement nicht erstellt werden konnte.
+ */
 if (!$stmt)
 {
     mysqli_close($conn);
@@ -132,16 +272,26 @@ if (!$stmt)
     exit();
 }
 
+/**
+ * @brief Bindet Parameter, führt das Statement aus und schließt anschließend Verbindung und Statement.
+ */
 mysqli_stmt_bind_param($stmt, 'si', $publicPath, $userId);
 $ok = mysqli_stmt_execute($stmt);
 mysqli_stmt_close($stmt);
 $conn->close();
 
+/**
+ * @brief Leitet bei einem fehlgeschlagenen Datenbankupdate zur Error-Variante der account.php weiter.
+ */
 if (!$ok)
 {
     header('Location: account.php?upload=err');
     exit();
 }
 
+/**
+ * @brief Der Upload war erfolgreich; Umleitung zur Account-Seite mit Erfolgsmeldung.
+ */
 header('Location: account.php?upload=ok');
 exit();
+
diff --git a/wunschliste.php b/wunschliste.php
index 7bfcb27..cf3ddc5 100644
--- a/wunschliste.php
+++ b/wunschliste.php
@@ -1,37 +1,118 @@
 <?php
+/**
+ * @file wunschliste.php
+ * @brief Darstellung der persönlichen Wunschliste eines Benutzers
+ *
+ * @details Diese Datei ist dafür verantwortlich, alle Produkte anzuzeigen, 
+ * die der aktuell eingeloggte Benutzer zu seiner Wunschliste hinzugefügt hat. 
+ * Sie greift auf die Datenbank zu, um die Verknüpfung zwischen Benutzer 
+ * (über die aktuelle Session) und den favorisierten Produkten (aus der Tabelle userFavorites) 
+ * herzustellen.
+ * @author Geizkragen-Team
+ * @version 1.0
+ * @since 1.0
+ */
+
 // wunschliste.php
 
+/**
+ * @brief Einbinden der grundlegenden Bootstrapping-Konfiguration
+ * @details Die Datei bootstrap.php lädt Helferfunktionen, Konfigurationsdaten
+ * und initialisiert die Session, wodurch Zugriffe auf $_SESSION möglich werden.
+ */
 require_once __DIR__ . '/lib/bootstrap.php';
 
+/**
+ * @brief Herstellen der Datenbankverbindung
+ * @details Ruft db_connect() auf, um eine Instanz zur Datenbank aufzubauen.
+ * Diese wird für das spätere Abrufen der Wunschlisten-Elemente benötigt.
+ * @var mysqli $conn Aktives Datenbankverbindungsobjekt.
+ */
 // 1) DB-Verbindung (einmal)
 $conn = db_connect();
 
+/**
+ * @brief Einschränkung des Datenzugriffs und Weiterleitung unbefugter Benutzer
+ * @details Prüft, ob ein Benutzer aktuell eingeloggt ist. Die Weiterleitung 
+ * (HTTP-Header Location) muss zwingend erfolgen, bevor jegliche HTML-Struktur 
+ * gerendert wurde. Danach beendet exit() sofort die Ausführung dieses Skripts.
+ */
 // Login-Check + Redirect MUSS vor jeglicher HTML-Ausgabe passieren
 if (!isset($_SESSION['user_id'])) {
     header("Location: login.php");
     exit();
 }
 
+/**
+ * @brief Laden der Wunschlisten-Daten aus der Datenbank
+ * @details Ein "Prepared Statement" wird aufgebaut, um die Produktdaten (ID, Modell, 
+ * Beschreibung, Bildpfad) sicher aus der Datenbank abzufragen. Hierbei werden die 
+ * Tabellen 'userFavorites' und 'products' per INNER JOIN anhand der productID zusammengeführt.
+ * @var mysqli_stmt $stmt Das vorbereitete SQL-Statement Objekt.
+ */
 // Daten laden
 $stmt = $conn->prepare("
     SELECT products.productID, products.model, products.description, products.imagePath
     FROM userFavorites INNER JOIN products ON userFavorites.productID = products.productID 
     WHERE userID = ?
 ");
+
+/**
+ * @brief Binden der Nutzer-ID an das SQL-Statement
+ * @details Verbindet den Typ 'i' (Integer) mit dem tatsächlichen Wert der aktuellen Session-ID.
+ */
 $stmt->bind_param("i", $_SESSION['user_id']);
+
+/**
+ * @brief Ausführung der vorbereiteten Abfrage
+ */
 $stmt->execute();
+
+/**
+ * @brief Extrahieren der Ergebnismenge
+ * @details Speichert das Resulat der Abfrage, welches in der GUI anschließend durchlaufen wird.
+ * @var mysqli_result $result Die vom Datenbankserver zurückgelieferte Ergebnismenge.
+ */
 $result = $stmt->get_result();
 ?>
 
-<?php include 'header.php'; ?>
+<?php 
+/**
+ * @brief Einbinden des HTML-Headers
+ * @details Lädt die globale Navigation, CSS-Dateien und nötige Meta-Informationen.
+ */
+include 'header.php'; 
+?>
 
-<?php if ($result->num_rows > 0): ?>
+<?php 
+/**
+ * @brief Bedingung zur Anzeige der Produktliste
+ * @details Evaluiert, ob das vorherige Statement mindestens ein favorisiertes 
+ * Produkt für den Benutzer zurückgeliefert hat. Ist dies der Fall, wird die 
+ * Liste gerendert. Andernfalls erscheint ein leerer Hinweisbildschirm.
+ */
+if ($result->num_rows > 0): 
+?>
     <main>
     <section class="product-section">
         <h2>Deine Wunschliste</h2>
         <div class="wishlist-grid">
-            <?php while ($product = $result->fetch_assoc()): ?>
-                <?php $productId = (int)$product['productID']; ?>
+            <?php 
+            /**
+             * @brief Iteration über alle favorisierten Produkte
+             * @details In jedem Durchlauf wird ein Produkt als assoziatives Array 
+             * zurückgegeben und direkt per HTML im Frontend abgebildet.
+             */
+            while ($product = $result->fetch_assoc()): 
+            ?>
+                <?php 
+                /**
+                 * @brief Casting der Produkt ID
+                 * @var int $productId Stellt sicher, dass die Produkt-ID als strenger Integer 
+                 * zur Erzeugung der Link-URL vorliegt.
+                 */
+                $productId = (int)$product['productID']; 
+                ?>
                 <a class="product-card wishlist-card" href="productpage.php?id=<?= $productId ?>">
                     <img
                             src="<?= isset($product['imagePath']) ? $product['imagePath'] : 'assets/images/placeholder.png' ?>"
@@ -47,12 +128,30 @@ $result = $stmt->get_result();
     </section>
     </main>
 <?php else: ?>
+    <?php 
+    /**
+     * @brief Fallback Ansicht
+     * @details Dieser Abschnitt wird angezeigt, wenn der Nutzer noch 
+     * keine Artikel als Favoriten markiert hat.
+     */
+    ?>
     <main style="padding: 2rem 1rem; text-align: center; animation: fadeInUp 0.5s ease both;">
         <p style="color: var(--text-secondary); font-size: 1rem;">Deine Wunschliste ist noch leer.</p>
     </main>
 <?php endif; ?>
 
-<?php $stmt->close(); ?>
+<?php 
+/**
+ * @brief Freigabe der SQL-Ressourcen
+ * @details Schließt das PreparedStatement sicher und räumt belegten Speicher wieder auf.
+ */
+$stmt->close(); 
+?>
 
-
-<?php include 'footer.php'; ?>
\ No newline at end of file
+<?php 
+/**
+ * @brief Einbinden des HTML-Footers
+ * @details Rendert rechtliche Links sowie abschließende Skripte für die Seite.
+ */
+include 'footer.php'; 
+?>

From 20f9b444cdf9b1ce689d241fd89b0f3773a20b59 Mon Sep 17 00:00:00 2001
From: Fabian Schieder <fabian.schieder.1010@gmail.com>
Date: Sat, 4 Apr 2026 00:39:47 +0200
Subject: [PATCH 2/4] Update compcards.php to change 'accessories' ID and add
 'watch' entry

---
 compcards.php | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/compcards.php b/compcards.php
index e2e5831..2f14c58 100644
--- a/compcards.php
+++ b/compcards.php
@@ -145,7 +145,8 @@ $categories = [
         'ipad'    => ['id' => 21, 'label' => 'iPad'],
         'macbook' => ['id' => 22, 'label' => 'MacBook'],
         'airpods' => ['id' => 23, 'label' => 'AirPods'],
-        'accessories' => ['id' => 24, 'label' => 'Accessories'],
+        'watch'   => ['id' => 24, 'label' => 'Watch'],
+        'accessories' => ['id' => 25, 'label' => 'Accessories'],
 ];
 ?>
 

From 5fca8b8b940e171c54d826d3ad5032702c7e7359 Mon Sep 17 00:00:00 2001
From: Fabian Schieder <fabian.schieder.1010@gmail.com>
Date: Sat, 4 Apr 2026 00:41:47 +0200
Subject: [PATCH 3/4] Update compcards.php to swap IDs for 'watch' and
 'accessories'

---
 compcards.php | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/compcards.php b/compcards.php
index 2f14c58..e4f119a 100644
--- a/compcards.php
+++ b/compcards.php
@@ -145,8 +145,8 @@ $categories = [
         'ipad'    => ['id' => 21, 'label' => 'iPad'],
         'macbook' => ['id' => 22, 'label' => 'MacBook'],
         'airpods' => ['id' => 23, 'label' => 'AirPods'],
-        'watch'   => ['id' => 24, 'label' => 'Watch'],
-        'accessories' => ['id' => 25, 'label' => 'Accessories'],
+        'watch'   => ['id' => 25, 'label' => 'Watch'],
+        'accessories' => ['id' => 24, 'label' => 'Accessories'],
 ];
 ?>
 

From df9d9aa588da50bf0af61909122b3739fd572705 Mon Sep 17 00:00:00 2001
From: Fabian Schieder <fabian.schieder.1010@gmail.com>
Date: Sat, 4 Apr 2026 00:45:13 +0200
Subject: [PATCH 4/4] removed profile picture

---
 .../profilePictures/user_20_20260211-150621.jpg  | Bin 4491 -> 0 bytes
 1 file changed, 0 insertions(+), 0 deletions(-)
 delete mode 100644 assets/images/profilePictures/user_20_20260211-150621.jpg

diff --git a/assets/images/profilePictures/user_20_20260211-150621.jpg b/assets/images/profilePictures/user_20_20260211-150621.jpg
deleted file mode 100644
index d558368b101d27f3caa31198843e5c7f4168c17e..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 4491
zcmbW)XHe5kw*c^eLPA0ZAsQfb)KEmKbOau0KD1DzBUJ$bDbhunSR#aufEYl6fDknl
zL7E^0LNQ2(fYJ%Q*eD{rJnuVm@67#l?>#fSGdpMZ%>L$l*xBRp<5}ReUby!S05CBD
zBmn?`pNx|@o&^2^;EaqgMkpKxgE29|nOS+*SXo$Dc~5b3@Cfh;2@3F`P{QIe=Y>V3
z#ZV};vV^p(oT8$l(0Nr&6?qLA1x5LPih!7ym{?g@k!);8c@dO|{Qo(QTLCUOKmigN
zK%xMc3&g+$I_?03000C9{X711;gdC(0Rm-&!I_v@PBzqX0$>mW0~o>pg+d@F+31rz
z0O5k35|Ptk<i@zdL<4!`<I;-YV!EU@gvG$NxPn_yJQMTjGe};(v**sEB_tJ<E-9<1
zs{M6EPv5}M=&Gfa^)(w?J9~Ez&l@+rynTZ2goK8LM?@yvPkiw3(PM0SMrKy_)12JA
z7sZ5<m!)Opud1qRYTwn>zi;^1-a+o{qICBR4h@ftj*U;yX6NP?7MJMDE2}%-zW@07
zYj<z|;2#$VVE7N~Wd4urf4I0#Twn-<0RsES1p<ft1LuN3MdTPy>0n^4f!w0<ac~~p
zv?5X)lbC|VHo`4vfcdnz;_TU-e`x=f{qJD$|1a5p!T#Gt16UbAC(UEv0xknX$Wok%
zJ~1yf*cmJ5kvSt#oR$~9rkx16AUT)U&Qqby(aB*St%%WvYTS7lXbJ&)fs7c4vfl?2
zKA{WYJ37d6Hf5}fY@VMAR$JCPwozvlT^g^6E^$$apBa8)vXsd{yASCJG^6@(vZ>ru
z1YJfFBHZK8XWLjMGuq|MfXqLk>k=2!-aabHO>vQ;hNN&kzd@&P?}xS?ZE(6|{FyV`
zr(-*b)+PveumF4U{5kc`XTDBWF~n3Cp;C=djU(%a!R4!COfAt@QmtmiOkS04cdqt?
z8!Ir~*Ny%VPLVf5xuz%r9%<q!{!<01ji`IPM_F`g<zk~6kHvUH!)t=0+A7pT<$Bg5
z)lEZ9vpPiRSVsdsS6%71#;+Mb_j|%>FlA%!&n<~*aX%G37du32*BeISq_5u&liiCP
z_t&9<Gq_`5!K#z+Vl&rNlJ;DyU_Oc^_q0TUeh?@?3*)2_WT5CRZXwk<FWD0WKN!Or
zxoXIh7uP?&n;<RQ&XRsW=HD^idbLe`J$hDbYKx^HpHqL}&+LIvQ72o7C0U(z!-CKt
z_@s*{JC`c33fB+}LJQ9m!%%a4_FjznIt)ZP914Tk(5f+q8e1mHNVG-{$71p=cMPrO
z6<cQxqbe^Ku;bDryhXRN8Z!Qj90VR<7d8sN3+-;xhuD(BX80;z`&=l$RcGU#B5!d9
zABux5L(Tle`%ejbbjsDcAl}GV<`X7HpdNN2b0P3!;5^6y!l|&9mlxH>Gp!hecD&nT
z)HSBUSl$&V)!CL+;yNUVFU1=)JH~HIgFJL%4ZiRmsvZNEueKFiNs~%`FOAaWH~Ph(
z&B1HO!048hyF$f%Z)<T~4k}zQm%g^FW|{a+e8S?ip7?_<)02Zg1&4okZ*18tnpDXc
zhAg*Fx5N}gIxy%xHu+(pu^ZUA>LN)kRh<H^Q<9Dl{@pL@zX|`vH5CR}(KS{6u;~=9
zatq(G%hWL2eGt)go1WM3Zh!_S*KJaI80XUxQs{ddJo4<{+s7=X?5|emHw7V3?kus|
zhw=uWna9Nv9H$eV@|_gufl}RDV+ErPy2>`hhhZ;q_IXB0C`(e_rMcu<(iyhmW}bRQ
z^D~l`tpsz4d7@!EPr5w8w2#T0kRL)eR4vMsPaDSq`!ufwoW+7?aMCZOQddPCa5ta7
z#@3g^wxg^e+dYX8^@w5x<V|dZSU0bb6xU%J5qS?W)#w=lPbri%*c(fcAgojO1~Y67
zBsgomfy800IUS1#N@rxC{Vy8Zm-Vt&jfB8f(+?@cP`;S<XTADBghLFy(6?aNCZZ_(
z-n3y7MLVM3Mq|{}q?yg?)YP|#Bjhaw{qzW?`dwI>@srtX66DGIfYKJdsF(9==ASP1
z(o%Ac3~*n<4VSl1=NyuakShhpfOXL4r^!8r>#ec98TjUksh@C>mbjukr8}<i96#Pj
zjQ&s_`e}CYa>E*z*t<x}q(}K`&(GYCXNhQ4b+J;`$|c|NBsqRanAmlyK&51|YbrRY
zqsE92NAoleKJc?H3{~g3sBD<QK3`kX^*F%%-GEgB7y5)N31}J;?9io_uv+zVv9biu
zq1wlLRz?nypiM@zxiG$ohfXzdoW1CzZNqy~%2p)hF|p^wYUX<dM-B9w+n$S`nv!Vu
zQ`9JMw&%|xDDwrT^B<JvM*pVOL}n636eFL%E`<*36g_w38ZlAEjJgiJn3kDeh6c3o
z5BS%xlreneb$5Nta|}dj>KxekmDxE=-^W_d#HFjvuh}^^hN!OG6Sil<Uj3?Dwonb2
z(M@Z2LhwbxINC3Tbf6t<8fi_~4t;i;t?#mj4Q|2pn|uuGNV9T#q+eFUUjj+4V!umT
zDTfUKz#)2BePW-xv#Kd-io+83^V41nB#(TS)=@-f$hYxmyAp*6D0I1|@oxKza+Yw<
zX@a_wdQQXXXVHEolhQU?hEw)d-@3LG4#m^(Fx0httcAYi_(=05DvM6=;%PZb$4tw5
zy}#k14}UT-VByZEFc<!%Xx!Z($Fw@#cY$PdjL$Xeejj7@kySx=ln@Q;4<qux-z1m<
zSYyirtR9w$3{6%@GdPb0uy&UmuXGK3DDe_WriMOn(}W?O#$-N5v8TjG!}iH`RhbCq
zh&TMa{MT;2NvJL<zhS%kwT%z=Fp!wruD?oY0u3SheC%r)JQu<+lbU^=p;etA&$X>B
z?H#R>io4mNFQh^By<IU^>4qa;s!4V)(t$}5Syt9Ue;rGSlW`%@tO+@&8Nv4lgKbh2
zxMzr`M!YJ|CNt9+dX|kam)#^uR!k_I&v#1{7kMzuY$OTWxud#b*(gw%%u<mvYdD|$
z;HNRv8T@<H-7s=kBs6e%_k6n77w4~n*ixZO;d|Jx1CuX=n&?E{vf%Dg=4IKlhhAmN
zg@46;l2CbxjTY_b*Z3ScIA9F-FIKQOOejZ18;I>&*;~c<Xe;~8r>l)LP!0T)F{@YP
zQRVBJdJ%i8CM8OrH`+!P{W;3d4&a&MaN|{Rt)Z=lowsypx4Jqn_`3N<{|I&8=lno@
z`KV-e%FGo1vjV~yFJHXo>~^z=n!V`YrNs1zd#a;&6d9VfpN)vLZOXbKPSTtt+L}LJ
zhWT1M^b%})GFrEcsT<XztIq6^zemD7K7IV{R@B&FoT}Pgy0TMEvE7!_2?`rv%S@Bv
z2sSyFy&e%}!Etw(zhc>Ci>IGChFj1S&5`2sI45KDS<}cVyYFm>>wP~JEx_ZV`I0gZ
z@N7`gs}eP<j53lEMYuUJRDz`UVwR5h42S*wsn<--(Fazhf!N)L$U0J{(xpKe+GwbX
zGiGO4$bRf0In;=6GdJuSdn2E-VG<9x@OAX9=h14~bk{?+@DVY=uwK&2P`QkQ!e`H&
z#EOfX(}6z_&t$4E3~>?`#uRS8?Az$~&$qEIS@D5Ot0LFz@`4=;Oy8!5O`lg9X!BnD
zfnts(z{|i%?vvQM8p%|sh+}ul5Pp;KRy02H4o7OGCKD><jmi%dvWva+)0QATNV#Ss
z1kWVbA|H8YCV>iH!;MT{xg^D%6jB)#SdDq#gyJ>*svfttAGkNB$Es(jWlc)7mrD<l
z6+)BkuD(?fPU6BmMGQN653FJ`o>wP)Yx!C{J$7KD6yYB1@%v^{93C0OG4EWWMk*+8
zL#rfB<A<#r9ug7dxg})DB&(>EPV)ruLBF%1_G4}?5>;2zB&36)q1LymB3ao#miLNL
zrZVyt@FE}X(-a#si~@E!CfrdVox49)Fl8S>_#az3jvICFtFDbx8`3)8cmqqSB3U_6
z<tai3T;=2z+Z_}9#l0MwqaXDn1{Wz75We-@_fTQQfz8W6<W^p3$88fQ1kpu&cd3pj
zGJ#{WtZ}>)I9*T7F-IV0BAF8``ZU;0Y*F)rMORvvUit9VT)Ju#Adi2<p*VQkjo<L8
zMWdmcM5@Bp7_G{WHN&vacD_^qR%>CYRix_851=wu)}=6VeDKcz4ACUgljJFtZEqZ_
z2D0qZ2r9yvBL(5Ese0zpCQ4@oZ>!E#KH>g*c9M7DB5ykCCp`S}bA-Pt`&WL36+L?*
zCPZQ3F{K9kBwGbxE0_DE&h%sP`_yW`^;$O`E#3L_2%^;RQm6y>)zdb-@!>p+DMFT(
zl@S7}CF6_+B`&_&Hia*_6D;bNDoE|-436{cvH=kgyg@)9t>J?Fx53pZ{co=*#mLlH
zv%N93t_96MuZq}_>+NNbc@@{86#9Wxk3=S6w9EJNWXELEK-o`ev|4Re{l14c|DasK
zQEiZHV?LrP1HWI<%i6T*mCEX#-nD|wGT~W$cfEP+^(If{<>djPIhb?|U&U>=^{>9<
zG>7wnm(^o1N0F9=b-FW&GVPbuQyg&xrjiFqf<X?$BZTaZOB14g$&kR;!{CC>K;tPu
zbA@v@EOLmms%4~g4WmDCH-sVGM}n~5{M(X9)uAt<NIw-p<=l&r7^{xH={t!6)nBpT
zF7f0hIZeYa2XnPHOt+E!ecE6WgCArkY34{QW%ycFM{Lv8QaqIZF`u{}vg{zkEaQGZ
zQBHH2mpi6Xj8;LZziXYzo7-QC;A!7|g7X5GFZ)<mV^?LnK#BS%524CZC5_&z!JVMZ
zBv^oQ5>Jbnxk2nqDC~{OFg7>Rs2i;0$O=~kNy?h5%$0mqlQ<X&{LcO|ANc)Bs|F+!
zhN3fTHhiYat(f?$AXuqDYa!g}iPp%fspOPTq5Eagfap&cgKvXI;{i_&epSdWUBMJ&
z8EDa)0b904JU-J>M<AI8M0vFpM_DaC21fR*i-o;kxK1&ba&sPXGJs{hh3{tdW5|ZM
z^aVFgoh@S<s1c?7{4tQ?tW}FCkV|C9Ae(p390S*EcU8+u781y&vZOdNrlI*=U7pIz
zTni(RBytAju5lz9i}ndyEB$!Zi;!9E%Yy8NK^6{J8SL{+KKAp=LWAQm5BuJm2Sjh{
z1&#HMWe=^2>VwhZUK5Uo<V?iAQ73rDz36QH&usB@{`$?$Et%OV<6_^aEbWDIYq958
zkT}<F8G<?lG7T^0txRU#{I$DrF<6a4diSZtP8X-@Asm<d9y3fIt<8y5z@w3sllri8
zB^Z*X(Nf_<nZ*<x3x%7d{%BAKJ#Fw6b^fF&a?Hh=i597w0qS``d3m2Z?&G-7-u`?3
z*fo-l?~!Ya8jasQ2|f4rBJbIq3rS}g{Wg02kAdjeV}N$^J2B|UBL|kUVqkuO{2i>*
zx}kTavhTw=Fz!CS#vCR*joyFT+|HgQP#r_a)TA2F^$@~T(s+c5SgloZSP#rq520=6
zzCjMUhkkHblijvgoE_}fGmGh_zsgtOYU^eg5`Gb<ne=xVw6$K#<Rg3r&LjWr_uJw{
zbJ^>m+MCT06<j8bR=<^|>KLi2uzoQh6xfmNN1Z;e)$tAeB2FMXEBaQ*h2a5CqVyEF
z#J0=|NY!4e=UQ)#vZlLzsyq3l4#@6vvi~T&If_LiyB$(%o#k4BBImbXV1ce|^P_XQ
tja?A$l)htNeT0yk`kJG+5%%ZJ^^aHyP&l%?UD@<&CPwd!WY_V;zW|PSL)icT