feat: Severity-Tooltips mit konkreten Beispielen erweitern

Tooltip-Texte zeigen jetzt zweizeilig: Definition + reale Beispiele aus diesem Tool (axe-core Impact, SEO-Checks, Performance, Pre-Actions). max-width 240 -> 320px, white-space: pre-line fuer den Zeilenumbruch.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: mariogregor

static/css/style.css

@@ -1335,16 +1335,16 @@ body, header, .card, .console-output, select, .url-input, .text-input, .btn-seco
     transform: translateX(-50%) translateY(4px);
     background: var(--tooltip-bg);
     color: var(--tooltip-text);
-    padding: 0.4rem 0.6rem;
+    padding: 0.5rem 0.7rem;
     border-radius: 4px;
     font-size: 0.75rem;
-    line-height: 1.3;
+    line-height: 1.45;
     text-transform: none;
     font-weight: 500;
     letter-spacing: normal;
-    white-space: normal;
+    white-space: pre-line;
     width: max-content;
-    max-width: 240px;
+    max-width: 320px;
     text-align: left;
     box-shadow: var(--shadow-lg);
 }

static/js/app.js

@@ -1290,12 +1290,12 @@ function setConnectionStatus(state, customLabel) {
 
 function severityTooltip(severity) {
     const tips = {
-        critical: "Kritisch — muss sofort behoben werden, blockiert Nutzer.",
-        serious:  "Schwerwiegend — beeinträchtigt viele Nutzer, hohe Priorität.",
-        moderate: "Mittel — Verbesserung empfohlen, kein direkter Blocker.",
-        minor:    "Gering — kosmetisch oder Edge-Case, niedrige Priorität.",
-        info:     "Info — Hinweis ohne Bewertung.",
-        warning:  "Warnung — auffällig, kein Fehler.",
+        critical: "Kritisch — blockiert Nutzer komplett, sofort beheben.\nz.B. fehlender Alt-Text bei funktionalen Bildern, Tastaturfalle, Seite lädt nicht.",
+        serious:  "Schwerwiegend — beeinträchtigt viele Nutzer, hohe Priorität.\nz.B. fehlendes Form-Label, broken Link, kein H1, fehlender <title>, fehlender Login-Button.",
+        moderate: "Mittel — Verbesserung empfohlen, kein direkter Blocker.\nz.B. unklare Linktexte, niedriger Kontrast, fehlende Meta-Description, horizontaler Overflow.",
+        minor:    "Gering — kosmetisch oder Edge-Case, niedrige Priorität.\nz.B. unbenötigtes ARIA-Attribut, Performance-Wert nicht messbar.",
+        info:     "Info — Hinweis ohne Bewertung, kein Handlungsbedarf.\nz.B. Anzahl Links auf der Seite, gefundene Open-Graph-Tags, Heading-Struktur.",
+        warning:  "Warnung — auffällig, aber kein harter Fehler.\nz.B. langsame Ladezeit, kleine SEO-Optimierung möglich, Pre-Action-Fehler.",
     };
     return tips[severity] || "";
 }