{
    "categories":
    {
        "color":
        {
            "title": "FARBE",
            "rules": [
            {
                "id": "60-30-10",
                "title": "60-30-10",
                "category": "color",
                "coverImage": "assets/visuals/cover-603010.svg",
                "frames": [
                {
                    "image": "assets/visuals/60-30-10.svg",
                    "caption": "60% Dominant"
                }],
                "tldr": "60% dominant, 30% sekundär, 10% Akzent. Strukturiert die Farbhierarchie ohne visuelles Chaos.",
                "videoUrls":
                {
                    "tiktok": "https://www.tiktok.com/@designparser/video/7584082295934569760?is_from_webapp=1&sender_device=pc&web_id=7517983817683764759",
                    "instagram": "https://www.instagram.com/p/DSSQ2tvjSw1/"
                },
                "deepDive":
                {
                    "rule": [
                        "60%: Dominante Farbe für Hauptflächen, Hintergründe und Textbereiche",
                        "30%: Sekundäre Farbe für Karten, Seitenleisten und unterstützende UI-Elemente",
                        "10%: Akzentfarbe für CTAs, Hervorhebungen, Warnungen und Icons"
                    ],
                    "why": [
                        "Verhindert visuelle Ermüdung. Zu viele gleichgewichtete Farben konkurrieren um Aufmerksamkeit.",
                        "Eine Akzentfarbe funktioniert nur, weil sie selten ist. Bei 50% der Fläche verliert sie ihre Signalwirkung.",
                        "Entspricht der natürlichen Hierarchiewahrnehmung: größere Fläche signalisiert geringere Priorität."
                    ],
                    "whenItBreaks": [
                        "Monochrome Systeme: Helligkeitsvariationen statt Farbtonwechsel verwenden.",
                        "Illustrations- und Editorial-Kontexte: andere Proportionen können akzeptabel sein."
                    ],
                    "inPractice": [
                        "App mit weißem Hintergrund: 60% Weiß, 30% neutrales Grau für Karten, 10% Markenblau für Buttons und Links."
                    ]
                }
            },
            {
                "id": "saturation-control",
                "title": "Sättigungskontrolle",
                "category": "color",
                "coverImage": "assets/visuals/cover-saturation.svg",
                "frames": [
                {
                    "image": "assets/visuals/colorscale-neutrals.svg",
                    "caption": "Neutrale Farben: 0-25%"
                },
                {
                    "image": "assets/visuals/colorscale-ui.svg",
                    "caption": "UI-Elemente: 25-60%"
                },
                {
                    "image": "assets/visuals/colorscale-accents.svg",
                    "caption": "CTAs und Signale: 60-100%"
                }],
                "tldr": "0-25% für Hintergründe, 25-60% für UI-Elemente, 60-100% für CTAs.",
                "videoUrls":
                {
                    "tiktok": "https://www.tiktok.com/@designparser/video/7595594652166802710?is_from_webapp=1&sender_device=pc&web_id=7517983817683764759",
                    "instagram": "https://www.instagram.com/p/DTiN7GXDeRX/"
                },
                "deepDive":
                {
                    "rule": [
                        "Niedrig (0-25%): Hintergründe, Fließtext, Layouts. Schafft eine ruhige, professionelle Basis.",
                        "Mittel (25-60%): Buttons, Links, Karten. Ausgewogene Aufmerksamkeit ohne zu überfordern.",
                        "Hoch (60-100%): CTAs, Fehler, Warnungen. Fordert sofortige Aufmerksamkeit."
                    ],
                    "why": [
                        "Sättigung steuert Aufmerksamkeit. Stark gesättigte Farben lösen stärkere visuelle Verarbeitung aus.",
                        "Hohe Sättigung überall bedeutet, dass alles gleich wichtig wirkt und keine Hierarchie entsteht.",
                        "Für langfristige Nutzung wie Dashboards reduziert niedrige Sättigung kognitive Ermüdung."
                    ],
                    "whenItBreaks": [
                        "Stark gesättigte Hintergründe auf Marketing-Seiten mit kurzer Nutzungsdauer können funktionieren, wenn sie bewusst eingesetzt werden.",
                        "Sättigung allein reicht nie für Barrierefreiheit. WCAG-Kontrastanforderungen müssen ebenfalls erfüllt sein."
                    ],
                    "inPractice": [
                        "Ein Akzent mit 80% gesättigtem Orange + ein entsättigter Hintergrund mit 10% Grau erzeugen klaren Fokus ohne visuelles Rauschen."
                    ],
                    "keyNumbers": [
                    {
                        "value": "0-25%",
                        "label": "Hintergründe und neutrale Farben"
                    },
                    {
                        "value": "25-60%",
                        "label": "UI-Elemente"
                    },
                    {
                        "value": "60-100%",
                        "label": "CTAs und Signale"
                    }]
                }
            },
            {
                "id": "greyscale",
                "title": "Zuerst Graustufen",
                "category": "color",
                "coverImage": "assets/visuals/cover-greyscale.svg",
                "frames": [
                {
                    "image": "assets/visuals/colorscale-neutrals.svg",
                    "caption": "Zuerst Graustufen"
                },
                {
                    "image": "assets/visuals/saturation-sheet.png",
                    "caption": "Sättigungsübersicht"
                },
                {
                    "image": "assets/visuals/cheatsheet.png",
                    "caption": "Cheatsheet"
                }],
                "tldr": "Die Struktur muss in Grau funktionieren. Farbe ist eine Verbesserung, keine Lösung.",
                "videoUrls":
                {
                    "tiktok": "https://www.tiktok.com/@designparser/video/7589740892349566230",
                    "instagram": "https://www.instagram.com/reel/DS6Q5tWiC6c/"
                },
                "deepDive":
                {
                    "rule": [
                        "Design zuerst in Graustufen erstellen. Hierarchie, Kontrast und Abstände müssen ohne Farbe funktionieren.",
                        "Eine 9-stufige Skala verwenden (100-900): ausreichend Abstufungen ohne Überforderung.",
                        "Reines Grau vermeiden. 2-10% Sättigung hinzufügen, um ein warmes oder kühles neutrales Grau zu erhalten.",
                        "Aktives Set: pro Bildschirm nur 4-6 Stufen verwenden, nicht alle 9."
                    ],
                    "why": [
                        "Wenn die UI in Graustufen nicht funktioniert, ist die Struktur fehlerhaft. Farbe behebt keine strukturellen Probleme.",
                        "Über 90% des Textes ist kleingeschrieben. Der Graukontrast bestimmt die Lesbarkeit.",
                        "Dunklere Stufen (700-900) benötigen mehr Sättigung, um visuell neutral zu wirken."
                    ],
                    "whenItBreaks": [
                        "Rein dekorative Elemente wie Illustrationen und Hero-Bilder folgen anderen Regeln.",
                        "Reines Grau mit 0% Sättigung wirkt kalt und leblos. Immer einen leichten Farbton hinzufügen."
                    ],
                    "inPractice": [
                        "Schritt 1: Layout in Graustufen fertigstellen. Schritt 2: Markenfarbe nur für CTAs und Akzente einsetzen."
                    ]
                }
            },
            {
                "id": "color-scale",
                "title": "Farbskala",
                "category": "color",
                "coverImage": "assets/visuals/cover-color.svg",
                "frames": [
                {
                    "image": "assets/visuals/colorscale-ui.svg",
                    "caption": "Farbskalen-System"
                },
                {
                    "image": "assets/visuals/colorscale-500-start.svg",
                    "caption": "Start bei 500 (Basis)"
                },
                {
                    "image": "assets/visuals/colorscale-define-edges.svg",
                    "caption": "Ränder definieren"
                },
                {
                    "image": "assets/visuals/colorscale-fill-gaps.svg",
                    "caption": "Lücken füllen"
                }],
                "tldr": "100-900 Skala, bei 500 beginnen, zuerst die Ränder definieren, dann die Zwischenstufen füllen.",
                "videoUrls":
                {
                    "tiktok": "https://www.tiktok.com/@designparser/video/7584844219630636310?is_from_webapp=1&sender_device=pc&web_id=7517983817683764759",
                    "instagram": "https://www.instagram.com/p/DSYeolGiNXL/"
                },
                "deepDive":
                {
                    "rule": [
                        "Bei 500 beginnen (Basisfarbe): weder zu hell noch zu dunkel.",
                        "Ränder definieren: 900 für Text (dunkelste Stufe), 100 für Hintergründe (hellste Stufe).",
                        "Die Zwischenstufen gleichmäßig von 100 bis 900 füllen (insgesamt 9 Stufen).",
                        "HSL verwenden: gleichen Farbton beibehalten, Helligkeit und Sättigung pro Stufe anpassen."
                    ],
                    "why": [
                        "Zufällige Hex-Werte können ähnlich aussehen, folgen aber keinem System und sind nicht vorhersehbar.",
                        "Eine systematische Skala erzeugt einen konsistenten visuellen Rhythmus im gesamten Produkt.",
                        "Der Farbton muss an den extremen Stufen leicht rotieren. Reines HSL erzeugt grünliche helle Töne und gelbliche dunkle Töne."
                    ],
                    "whenItBreaks": [
                        "Farbtonrotation an extremen Stufen ist erforderlich. Andernfalls verschiebt sich ein helles Blau Richtung Grün.",
                        "Immer visuell mit WCAG-Kontrasttests prüfen, nicht nur durch Zählen numerischer Stufen."
                    ],
                    "inPractice": [
                        "100-300: Hintergründe. 400-600: Buttons und Badges. 700-900: Text und starke Hervorhebungen."
                    ],
                    "keyNumbers": [
                    {
                        "value": "500",
                        "label": "Startpunkt der Basisfarbe"
                    },
                    {
                        "value": "900",
                        "label": "Dunkelste Stufe (Text)"
                    },
                    {
                        "value": "100",
                        "label": "Hellste Stufe (Hintergrund)"
                    }]
                }
            },
            {
                "id": "luminance-vs-lightness",
                "title": "Luminanz vs. Helligkeit",
                "category": "color",
                "coverImage": "assets/visuals/cover-luminance-lightness.svg",
                "frames": [
                {
                    "image": "assets/visuals/same-lightness.svg",
                    "caption": "gleiche Helligkeit, unterschiedliche Luminanz"
                },
                {
                    "image": "assets/visuals/lightness-graph.svg",
                    "caption": "Helligkeitsdiagramm"
                },
                {
                    "image": "assets/visuals/formula-lightness.svg",
                    "caption": "Helligkeitsformel"
                },
                {
                    "image": "assets/visuals/luminance-graph.svg",
                    "caption": "Luminanzdiagramm"
                },
                {
                    "image": "assets/visuals/formula-luminance.svg",
                    "caption": "Luminanzformel"
                },
                {
                    "image": "assets/visuals/different-luminance.svg",
                    "caption": "Unterschiedliche Luminanz"
                },
                {
                    "image": "assets/visuals/lightness-saturated.svg",
                    "caption": "gleiche berechnete Helligkeit, unterschiedliche wahrgenommene Helligkeit"
                }],
                "tldr": "HSL-L ist kein Kontrastmaß. WCAG verwendet Luminanz (Y). Gelb und Blau bei HSL-L 50% ergeben ein Kontrastverhältnis von 1,07:1 – ein FAIL.",
                "videoUrls":
                {
                    "tiktok": "https://www.tiktok.com/@designparser/video/7608320055180381462?is_from_webapp=1&sender_device=pc&web_id=7605204772584801814",
                    "instagram": "https://www.instagram.com/reel/DU6hZs7jRA1/?utm_source=ig_web_copy_link&igsh=MzRlODBiNWFlZA=="
                },
                "deepDive":
                {
                    "rule": [
                        "Luminanz (Y): physikalisch, linear. Formel: Y = 0.2126R + 0.7152G + 0.0722B.",
                        "Helligkeit (L*): wahrnehmungsbasiert, nicht linear. Definiert durch CIELAB 1976.",
                        "HSL-L: ein geometrisches RGB-Modell ohne physikalische Grundlage. Es ist kein Kontrastmaß.",
                        "Der WCAG-Kontrast verwendet Y (Luminanz), nicht L* oder HSL-L."
                    ],
                    "why": [
                        "Webers Gesetz: Das Auge reagiert auf relativen Kontrast, nicht auf absolute Helligkeitswerte.",
                        "Gelb und Blau bei HSL-L 50% unterscheiden sich in der tatsächlichen Luminanz um den Faktor 12,8.",
                        "Grün dominiert die menschliche Helligkeitswahrnehmung mit einem Koeffizienten von 0.7152."
                    ],
                    "whenItBreaks": [
                        "Helmholtz-Kohlrausch-Effekt: stark gesättigte Farben wie Blau und Magenta erscheinen heller als ihr Y-Wert vermuten lässt. CIELAB modelliert diesen Effekt nicht.",
                        "WCAG ist ein Mindeststandard. Wahrnehmungsgleichmäßigkeit erfordert OKLCH oder CIECAM."
                    ],
                    "inPractice": [
                        "WCAG-Kontrast immer mit Y berechnen. Gelb (#FFFF00) auf Weiß = 1,07:1 Kontrast – ein Fail trotz HSL-L von 50%."
                    ],
                    "keyNumbers": [
                    {
                        "value": "4.5:1",
                        "label": "WCAG AA Minimum (normaler Text)"
                    },
                    {
                        "value": "3:1",
                        "label": "WCAG AA (großer Text und UI-Komponenten)"
                    }],
                    "sources": [
                    {
                        "label": "WCAG 2.2 SC 1.4.3",
                        "year": "2023"
                    },
                    {
                        "label": "CIE 1976 CIELAB Standard"
                    },
                    {
                        "label": "IEC 61966-2-1 sRGB",
                        "year": "1999"
                    }]
                }
            },
            {
                "id": "color-psychology",
                "title": "Farbpsychologie",
                "category": "color",
                "coverImage": "assets/visuals/color-psychology.svg",
                "frames": [
                {
                    "image": "assets/visuals/color-psychology.svg",
                    "caption": "Wiederholung schlägt Kreativität"
                },
                {
                    "image": "assets/visuals/color-meaning-cultural.svg",
                    "caption": "Kulturelle Bedeutungen"
                }],
                "tldr": "Farben lösen automatische emotionale Reaktionen aus. Diese sind kulturell geprägt und nicht universell.",
                "videoUrls":
                {
                    "tiktok": "https://www.tiktok.com/@designparser/video/7605000518359928086",
                    "instagram": "https://www.instagram.com/reel/DUje_dlDakf/?utm_source=ig_web_copy_link&igsh=MzRlODBiNWFlZA=="
                },
                "deepDive":
                {
                    "rule": [
                        "Rot: Energie, Dringlichkeit, Gefahr. Erhöht messbar die Herzfrequenz (Elliot et al. 2007).",
                        "Blau: Vertrauen, Ruhe, Kompetenz. Dominiert Finanz- und Technologieunternehmen (über 60% der Fortune-500-Logos).",
                        "Grün: Wachstum, Erfolg, Bestätigung. Signalisiert universell positive Aktionen.",
                        "Gelb: Optimismus, Warnung. Höchste Sichtbarkeit, aber geringster Luminanzkontrast.",
                        "Schwarz und Weiß: Premium, Minimalismus. Keine emotionale Überladung."
                    ],
                    "why": [
                        "Das limbische System verarbeitet Farbe vor der bewussten Analyse, in etwa 200 ms.",
                        "Evolutionäre Konditionierung: Rot signalisiert Blut und Gefahr, Grün sichere Vegetation.",
                        "Kulturelle Bedeutungsschichten: Weiß steht im Westen für Reinheit, in Teilen Asiens jedoch für Trauer."
                    ],
                    "whenItBreaks": [
                        "Kulturelle Unterschiede sind relevant: Grün gilt im islamischen Kontext als heilig, Violett signalisiert in Teilen Lateinamerikas Trauer.",
                        "Farbe allein kommuniziert nicht. Farbsehschwächen betreffen etwa 8% der Männer, wodurch rein farbcodierte Signale unzugänglich werden.",
                        "Zu viele Signalfarben gleichzeitig führen dazu, dass keine davon hervorsticht."
                    ],
                    "inPractice": [
                        "CTA-Mapping: Rot oder Orange für Dringlichkeit, Blau für Vertrauen, Grün für Bestätigung, Gelb für Warnungen. Niemals alle vier auf einer Seite verwenden."
                    ],
                    "sources": [
                    {
                        "label": "Elliot et al. Color and Psychological Functioning",
                        "year": "2007"
                    },
                    {
                        "label": "Labrecque and Milne. Exciting Red and Competent Blue",
                        "year": "2012"
                    }]
                }
            },
            {
                "id": "color-naming",
                "title": "Farbbenennung",
                "category": "color",
                "coverImage": "assets/visuals/cover-naming.svg",
                "frames": [
                {
                    "image": "assets/visuals/primitives.svg",
                    "caption": "Primitive"
                },
                {
                    "image": "assets/visuals/semantics.svg",
                    "caption": "Semantik"
                },
                {
                    "image": "assets/visuals/value-change.svg",
                    "caption": "Änderung des primitiven Werts"
                }],
                "tldr": "Primitive speichern Werte. Semantik definiert Bedeutung. Verwende in Designs niemals rohe Hex-Werte.",
                "videoUrls":
                {
                    "tiktok": "https://www.tiktok.com/@designparser/video/7590118285107105046?is_from_webapp=1&sender_device=pc&web_id=7517983817683764759",
                    "instagram": "https://www.instagram.com/p/DS8PMNeDc9f/"
                },
                "deepDive":
                {
                    "rule": [
                        "Primitive (100–900): speichern nur Werte. Beispiel: Primary/600, Neutral/900.",
                        "Semantik: definiert Bedeutung. Beispiel: Text/Primary, Background/Page.",
                        "Semantische Tokens referenzieren Primitive, niemals direkt Hex-Werte.",
                        "Format: [Element]/[Zweck]/[Zustand]. Beispiel: Text/Primary/Hover."
                    ],
                    "why": [
                        "Rebranding: Ändert man ein Primitive, aktualisieren sich alle semantischen Tokens automatisch.",
                        "Dark Mode: Die Semantik bleibt gleich, sie referenziert nur andere Primitive.",
                        "Die direkte Verwendung von Primitives in Designs verhindert Dark Mode, weil kein automatischer Kontrastwechsel möglich ist."
                    ],
                    "whenItBreaks": [
                        "Zu viele semantische Tokens erzeugen eine unüberschaubare Hierarchie und Entscheidungsparalyse.",
                        "Farbbasierte Namen wie DarkBlue statt funktionsbasierter Namen wie Text/Primary brechen bei einem Rebranding."
                    ],
                    "inPractice": [
                        "Text/Primary = Neutral/900 im Light Mode und Neutral/100 im Dark Mode. Ein semantischer Token, zwei Zustände."
                    ]
                }
            },
            {
                "id": "wcag-contrast",
                "title": "WCAG-Kontrastverhältnis",
                "category": "color",
                "coverImage": "assets/visuals/wcag-contrast.svg",
                "frames": [
                {
                    "image": "assets/visuals/wcag-luminanz.png",
                    "caption": "WCAG misst Kontrast über relative Luminanz"
                },
                {
                    "image": "assets/visuals/wcag-contrast-formula.png",
                    "caption": "WCAG-Kontrastformel"
                },
                {
                    "image": "assets/visuals/wcag-level.png",
                    "caption": "WCAG-Stufen"
                },
                {
                    "image": "assets/visuals/wcag-level-example.png",
                    "caption": "WCAG-Stufen Beispiel"
                },
                {
                    "image": "assets/visuals/wcag-tools.png",
                    "caption": "Tools"
                }],
                "tldr": "AA erfordert 4,5:1 für normalen Text und 3:1 für großen Text (mindestens 24px) sowie UI-Komponenten. 4,5:1 ist die gesetzliche Mindestanforderung, nicht das Designziel.",
                "videoUrls":
                {
                    "tiktok": "https://www.tiktok.com/@designparser/video/7612747532371954967?is_from_webapp=1&sender_device=pc&web_id=7605204772584801814",
                    "instagram": "https://www.instagram.com/reel/DVZPniSikfS/?utm_source=ig_web_copy_link&igsh=MzRlODBiNWFlZA=="
                },
                "deepDive":
                {
                    "rule": [
                        "Formel: (L1 + 0,05) / (L2 + 0,05), wobei L1 die relative sRGB-Luminanz der helleren Farbe und L2 die der dunkleren ist.",
                        "Bereich: 1:1 (identische Farben) bis 21:1 (Schwarz auf Weiß). Keine Rundung. #767676 auf Weiß ergibt 4,48:1 und erfüllt AA für normalen Text nicht.",
                        "WCAG 2.2 Level AA: 4,5:1 für normalen Text. Großer Text (mindestens 24px regulär oder 18,66px fett, abgeleitet aus WCAGs 18pt / 14pt Definition): 3:1.",
                        "SC 1.4.11: 3:1 für UI-Komponenten, Formularrahmen und informative Icons.",
                        "WCAG 2.2 Level AAA: 7:1 für normalen Text, 4,5:1 für großen Text. Für Nicht-Text-Kontrast existiert kein AAA-Äquivalent.",
                        "Ausnahmen: dekorative Elemente, inaktive UI-Komponenten und Logotypen haben keine Kontrastanforderung. Deaktivierte Zustände, die weiterhin wichtige Informationen vermitteln, sind nicht automatisch ausgenommen."
                    ],
                    "why": [
                        "Die Formel berücksichtigt weder Schriftgröße noch Strichstärke oder Polarität. APCA adressiert diese Einschränkungen, ist aber bis 2026 nicht normativ bindend.",
                        "Unzureichender Kontrast erhöht die kognitive Belastung beim Lesen, besonders bei kleinen Schriftgrößen, dünnen Schriftstärken und peripherer Wahrnehmung.",
                        "Kontrastprobleme sind die häufigste WCAG-Verletzung: Der WebAIM Million Report 2024 fand sie auf über 80 % der getesteten Startseiten.",
                        "Etwa 8 % der Männer und 0,4 % der Frauen haben eine Form der Farbsehschwäche.",
                        "Maximaler Kontrast (21:1) ist nicht immer optimal. Bei bestimmten kognitiven Profilen (z. B. Irlen-Syndrom) kann extremer Kontrast visuellen Stress verursachen."
                    ],
                    "whenItBreaks": [
                        "Gradient-Hintergründe: Der Kontrast muss am schlechtesten Punkt des Gradienten gemessen werden, nicht als Durchschnitt. Die meisten automatischen Tests übersehen das.",
                        "Dark Mode: Eine 1:1-Invertierung von Light-Mode-Farbpaaren schlägt häufig fehl. Beide Farbmodi müssen separat geprüft werden.",
                        "APCA wird für WCAG 3 diskutiert, ist aber nicht normativ für WCAG 2.x. Ein Wert kann WCAG 2.x bestehen und dennoch bei APCA durchfallen. APCA sollte ergänzend genutzt werden, nicht als Ersatz für Compliance."
                    ],
                    "inPractice": [
                        "Fließtext: `color: #333333; background: #ffffff;` ergibt etwa 12,6:1 und erfüllt alle WCAG-Stufen.",
                        "Input-Rahmen: #767676 auf Weiß ergibt 4,48:1 und erfüllt 3:1 für Nicht-Text, aber nicht 4,5:1 für normalen Labeltext. Verwende separate Farb-Tokens für Text- und Rahmenrollen.",
                        "Fokusrahmen: `outline: 3px solid #0066cc;` ergibt etwa 7:1 auf Weiß und erfüllt AA."
                    ],
                    "keyNumbers": [
                    {
                        "value": "4.5:1",
                        "label": "WCAG AA Mindestkontrast für normalen Text"
                    },
                    {
                        "value": "3:1",
                        "label": "WCAG AA Mindestkontrast für großen Text und UI-Komponenten"
                    },
                    {
                        "value": "7:1",
                        "label": "WCAG AAA Zielwert für normalen Text"
                    }],
                    "sources": [
                    {
                        "label": "W3C. WCAG 2.2",
                        "year": "2023"
                    },
                    {
                        "label": "WebAIM. The WebAIM Million",
                        "year": "2024"
                    },
                    {
                        "label": "Waller. Does the contrast ratio predict legibility of website text",
                        "year": "2022"
                    }]
                }
            },
            {
                "id": "rgb-vs-cmyk",
                "title": "RGB vs. CMYK",
                "category": "color",
                "coverImage": "assets/visuals/rgb-cmyk-cover.svg",
                "frames": [
                {
                    "image": "assets/visuals/rgb-cmyk.png",
                    "caption": "RGB-zu-CMYK-Konvertierung"
                },
                {
                    "image": "assets/visuals/rgb.png",
                    "caption": "RGB"
                },
                {
                    "image": "assets/visuals/cmyk.png",
                    "caption": "CMYK"
                },
                {
                    "image": "assets/visuals/rgb-cmyk-gamut.png",
                    "caption": "sRGB vs. CMYK-Farbraum"
                }],
                "tldr": "RGB emittiert Licht und addiert sich Richtung Weiß. CMYK absorbiert Licht und subtrahiert von Weiß. Ein erheblicher Teil des sRGB-Farbraums (häufig etwa 30–40 %) kann in typischen CMYK-Offsetprofilen wie FOGRA39 nicht reproduziert werden.",
                "videoUrls":
                {
                    "tiktok": "https://www.tiktok.com/@designparser/video/7613807515763019030?is_from_webapp=1&sender_device=pc&web_id=7605204772584801814",
                    "instagram": "https://www.instagram.com/reel/DVglxsBiqbW/?utm_source=ig_web_copy_link&igsh=MzRlODBiNWFlZA=="
                },
                "deepDive":
                {
                    "rule": [
                        "RGB (additiv): rotes, grünes und blaues Licht addieren sich Richtung Weiß. Wird auf allen selbstleuchtenden Displays verwendet.",
                        "CMYK (subtraktiv): Cyan-, Magenta-, Gelb- und Schwarzfarben absorbieren Licht vom reflektierten Weiß. Wird im Offset- und Digitaldruck verwendet.",
                        "Die beiden Modelle haben inkompatible Farbräume. Ein erheblicher Teil des sRGB-Farbraums (oft etwa 30–40 %) kann in typischen CMYK-Offsetprofilen wie FOGRA39 nicht reproduziert werden.",
                        "Farben außerhalb des Farbraums konzentrieren sich vor allem in gesättigten Cyan-, Grün- und Blauvioletttönen.",
                        "Ohne ICC-Farbmanagement führt das RIP eine geräteabhängige Standardkonvertierung statt eines kontrollierten perceptualen Gamut-Mappings durch.",
                        "CMYK ist kein einzelner Farbraum. ISO Coated v2 (FOGRA39), PSO Coated v3 (FOGRA51) und Zeitungsprofile besitzen völlig unterschiedliche Farbräume. CMYK ohne benanntes Profil zu definieren ist nicht eindeutig."
                    ],
                    "why": [
                        "Displays arbeiten typischerweise zwischen 80–500 cd/m² (HDR-Spezifikationen erlauben Spitzenwerte bis 10.000 cd/m²). Gedruckte Oberflächen reflektieren etwa 60–100 cd/m² unter ISO-3664-Betrachtungsbedingungen.",
                        "Dieser Luminanzunterschied erhöht die wahrgenommene Helligkeit und den Kontrast auf selbstleuchtenden Displays (Stevens-Effekt) auf eine Weise, die Druck nicht reproduzieren kann (Fairchild 2013).",
                        "Chromatische Adaption des Sehens bei D65 (Monitorstandard) und D50 (Druckstandard) führt zu unterschiedlicher Farbwahrnehmung für physisch identische Reize. Ein Lerneffekt kompensiert dies nicht (Fairchild 2013, CIECAM02).",
                        "Moderne iOS- und macOS-Geräte verwenden Display-P3, das etwa 25 % mehr Farbvolumen als sRGB abdeckt. Farben, die auf P3 lebendig wirken, können vollständig außerhalb des CMYK-Farbraums liegen.",
                        "Gamut-Mapping-Algorithmen (Perceptual, Relative Colorimetric, Saturation) sind Kompromisslösungen. Kein Algorithmus ist für alle Bildtypen optimal (Morovic 2008)."
                    ],
                    "whenItBreaks": [
                        "Sonderfarben (Pantone PMS) existieren außerhalb sowohl des sRGB- als auch des CMYK-Farbraums. Die Konvertierungskette PMS → CMYK → RGB → Display ist bei jedem Schritt verlustbehaftet.",
                        "Pantone-Color-Bridge-Konvertierungswerte sind substratspezifisch und nicht normativ garantiert.",
                        "Ein gültiger Softproof erfordert einen dafür kalibrierten Monitor (D50-Simulation, 80–120 cd/m², neutralgraue Umgebung gemäß ISO 3664:2009) mit aktivierten Optionen Simulate Paper Color und Simulate Black Ink.",
                        "WCAG-Kontrastverhältnisse sind für digitale Inhalte auf Basis der sRGB-Luminanzformel definiert und lassen sich nicht direkt auf Druckergebnisse übertragen."
                    ],
                    "inPractice": [
                        "Screen-Workflow: Dokument-Farbmodus auf RGB setzen. ICC-Profil sRGB IEC61966-2-1 einbetten.",
                        "Druck (gestrichener Offset): in CMYK mit ISO Coated v2 300 % (FOGRA39) konvertieren. Für gestrichene Papiere mit optischen Aufhellern: PSO Coated v3 (FOGRA51) verwenden.",
                        "Als PDF/X-4 exportieren und Profil einbetten. Kleiner Text unter 12 pt: 0/0/0/100 (nur Schwarz) verwenden, um Passerfehler zu vermeiden.",
                        "Visuell akzeptable Toleranz zwischen Proof und Druck: ΔE00 ≤ 3,0 (ISO 12647-2:2013; Vik et al. 2017, N=20)."
                    ],
                    "keyNumbers": [
                    {
                        "value": "~30-40%",
                        "label": "Ungefährer Anteil der sRGB-Farben außerhalb typischer CMYK-Offsetfarbräume"
                    },
                    {
                        "value": "ΔE00 ≤ 3.0",
                        "label": "Typische akzeptable Farbtoleranz zwischen Proof und Druck (ISO 12647-2)"
                    },
                    {
                        "value": "D50 / D65",
                        "label": "Standard-Weißpunkte für Druckbetrachtung und Display-Farbräume"
                    }],
                    "sources": [
                    {
                        "label": "Morovic. Color Gamut Mapping. Wiley-IS&T",
                        "year": "2008"
                    },
                    {
                        "label": "Fairchild. Color Appearance Models, 3rd Ed. Wiley-IS&T",
                        "year": "2013"
                    },
                    {
                        "label": "Hunt and Pointer. Measuring Colour, 4th Ed. Wiley-IS&T",
                        "year": "2011"
                    },
                    {
                        "label": "ISO 12647-2. Offset lithographic printing",
                        "year": "2013"
                    },
                    {
                        "label": "ISO 3664. Viewing conditions for graphic technology and photography",
                        "year": "2009"
                    },
                    {
                        "label": "IEC 61966-2-1. sRGB colour space",
                        "year": "1999"
                    },
                    {
                        "label": "ICC Profile Specification v4.4",
                        "year": "2022"
                    },
                    {
                        "label": "Vik, Lund, Nussbaum. Color Research and Application 42(1)",
                        "year": "2017"
                    }]
                }
            }]
        },
        "typography":
        {
            "title": "TYPOGRAFIE",
            "rules": [
            {
                "id": "line-height",
                "title": "Zeilenhöhe",
                "category": "typography",
                "coverImage": "assets/visuals/line-height.svg",
                "frames": [
                {
                    "image": "assets/visuals/line-height.svg",
                    "caption": "Regeln zur Zeilenhöhe"
                },
                {
                    "image": "assets/visuals/line-height-calculation.svg",
                    "caption": "Berechnung"
                }],
                "tldr": "Fließtext: 1.5–1.6. Überschriften: 1.1–1.3. Umgekehrte Beziehung: größere Schrift benötigt eine geringere Zeilenhöhe.",
                "videoUrls":
                {
                    "tiktok": "https://www.tiktok.com/@designparser/video/7585669280163712278?is_from_webapp=1&sender_device=pc&web_id=7517983817683764759",
                    "instagram": "https://www.instagram.com/p/DSdb2loDfCN/"
                },
                "deepDive":
                {
                    "rule": [
                        "Überschriften (H1–H3): 1.1–1.3. Weniger Abstand, da das visuelle Gewicht bereits die Hierarchie trägt.",
                        "Fließtext (16–18px): 1.5–1.6. Der WCAG-Mindestwert ist 1.5.",
                        "Kleine Schrift (12–14px): 1.5–1.7. Mehr Abstand kompensiert die geringere Schriftgröße.",
                        "Umgekehrte Beziehung: größere Schrift benötigt eine geringere Zeilenhöhe."
                    ],
                    "why": [
                        "Der Browser-Standard von 1.2 ist für Fließtext zu eng. Zeilen verschmelzen visuell.",
                        "Return Sweep: Die Augen benötigen klare vertikale Trennung, um die nächste Zeile zu finden.",
                        "WCAG SC 1.4.12 verlangt, dass die Zeilenhöhe auf mindestens 1.5 skalierbar sein muss."
                    ],
                    "whenItBreaks": [
                        "Schmale Spalten unter 40 CPL: 1.3–1.45 reicht aus, da weniger Rücksprünge nötig sind.",
                        "Auf mobilen Geräten sind Desktop-Zeilenhöhen oft zu groß. Werte von 1.4–1.5 funktionieren meist besser."
                    ],
                    "inPractice": [
                        "line-height als einheitenlose Zahl definieren, z. B. 1.5 statt 1.5em. Dadurch skaliert sie korrekt mit Kindelementen."
                    ],
                    "keyNumbers": [
                    {
                        "value": "1.1-1.3",
                        "label": "Überschriften"
                    },
                    {
                        "value": "1.5-1.6",
                        "label": "Fließtext"
                    },
                    {
                        "value": "1.5",
                        "label": "WCAG-Mindestwert"
                    }]
                }
            },
            {
                "id": "line-length",
                "title": "Zeilenlänge",
                "category": "typography",
                "coverImage": "assets/visuals/line-length-right.svg",
                "frames": [
                {
                    "image": "assets/visuals/line-length-wrong.svg",
                    "caption": "Zeilenlänge zu lang"
                },
                {
                    "image": "assets/visuals/line-length-right.svg",
                    "caption": "Optimale Zeilenlänge"
                }],
                "tldr": "50–75 Zeichen pro Zeile für Fließtext. Maximal 80 laut WCAG. Verwende max-width: 65ch in CSS.",
                "videoUrls":
                {
                    "tiktok": "https://www.tiktok.com/@designparser/video/7606406598478564630?is_from_webapp=1&sender_device=pc&web_id=7605204772584801814",
                    "instagram": "https://www.instagram.com/reel/DUtPYGCjdbv/?utm_source=ig_web_copy_link&igsh=MzRlODBiNWFlZA=="
                },
                "deepDive":
                {
                    "rule": [
                        "Optimal: 50–75 Zeichen pro Zeile (CPL) für Fließtext.",
                        "Sweet Spot: etwa 66 CPL laut Bringhurst (1992) und Baymard (2024).",
                        "WCAG 2.2 SC 1.4.8: maximal 80 CPL für nicht-CJK-Schriften, maximal 40 CPL für CJK-Schriften.",
                        "Mobile Geräte: 30–50 CPL sind üblich aufgrund schmalerer Viewports."
                    ],
                    "why": [
                        "Return Sweep: lange Zeilen führen dazu, dass das Auge in der falschen Zeile landet.",
                        "Zu kurze Zeilen (unter 45 CPL): fragmentierte Bedeutung, mehr Augenbewegungen, langsameres Lesen.",
                        "Bei über 80 CPL geraten Satzenden schneller aus dem semantischen Kurzzeitgedächtnis."
                    ],
                    "whenItBreaks": [
                        "UI-Microcopy wie Buttons oder Navigation: CPL-Regeln gelten hier nicht.",
                        "Editorial-Displaytext nutzt häufig bewusst 30–45 CPL für visuelle Rhythmik."
                    ],
                    "inPractice": [
                        "max-width: 65ch auf den Artikelcontainer anwenden. Passt sich automatisch jeder Schriftgröße an."
                    ],
                    "keyNumbers": [
                    {
                        "value": "50-75",
                        "label": "CPL optimal (Fließtext)"
                    },
                    {
                        "value": "66",
                        "label": "CPL Sweet Spot"
                    },
                    {
                        "value": "80",
                        "label": "CPL WCAG AAA Maximum"
                    },
                    {
                        "value": "65ch",
                        "label": "CSS max-width Empfehlung"
                    }],
                    "sources": [
                    {
                        "label": "WCAG 2.2 SC 1.4.8",
                        "year": "2023"
                    },
                    {
                        "label": "Baymard Institute",
                        "year": "2024"
                    },
                    {
                        "label": "Bringhurst. The Elements of Typographic Style",
                        "year": "2004"
                    }]
                }
            },
            {
                "id": "x-height",
                "title": "x-Höhe",
                "category": "typography",
                "coverImage": "assets/visuals/x-height.svg",
                "frames": [
                {
                    "image": "assets/visuals/x-height-comparison.svg",
                    "caption": "x-Höhen-Vergleich"
                }],
                "tldr": "Die x-Höhe bestimmt die wahrgenommene Schriftgröße. Über 90 % des Textes besteht aus Kleinbuchstaben.",
                "videoUrls":
                {
                    "tiktok": "https://www.tiktok.com/@designparser/video/7592729990379195670?is_from_webapp=1&sender_device=pc&web_id=7517983817683764759",
                    "instagram": "https://www.instagram.com/p/DTOWZeljUhF/"
                },
                "deepDive":
                {
                    "rule": [
                        "x-Höhe: der Abstand von der Grundlinie bis zur Oberkante von Kleinbuchstaben wie x, v, w oder z.",
                        "Optimales Verhältnis: etwa 50 % der Versalhöhe für Fließtext.",
                        "Kleiner Text unter 14 px: Schriften mit hoher x-Höhe wie Verdana oder Arial für bessere Lesbarkeit wählen.",
                        "Schriften mit niedriger x-Höhe wie Garamond wirken elegant, benötigen jedoch eine größere Schriftgröße als Ausgleich."
                    ],
                    "why": [
                        "Über 90 % des Textes besteht aus Kleinbuchstaben. Die x-Höhe bestimmt daher die wahrgenommene Schriftgröße.",
                        "Zwei Schriften mit derselben Punktgröße können aufgrund unterschiedlicher x-Höhen unterschiedlich groß wirken.",
                        "Studien zeigen, dass größere x-Höhen bei kleinen Schriftgrößen zu schnellerem Lesen führen."
                    ],
                    "whenItBreaks": [
                        "Sehr hohe x-Höhen über 67 %: reduzieren den Unterschied zwischen Ober- und Unterlängen. Buchstaben wie h und n werden schwerer unterscheidbar.",
                        "Das Kombinieren von Schriften mit sehr unterschiedlichen x-Höhen erzeugt visuelle Disharmonie."
                    ],
                    "inPractice": [
                        "In UI bei Schriftgrößen unter 14 px Inter oder Verdana (hohe x-Höhe) statt Garamond (niedrige x-Höhe) verwenden. Die Lesbarkeit kann sich bis zu 2× verbessern."
                    ]
                }
            },
            {
                "id": "all-caps-fatigue",
                "title": "Versalien-Ermüdung",
                "category": "typography",
                "coverImage": "assets/visuals/all-caps.svg",
                "frames": [
                {
                    "image": "assets/visuals/all-caps.svg",
                    "caption": "Versalien vs. gemischte Groß- und Kleinschreibung"
                },
                {
                    "image": "assets/visuals/reading-time.svg",
                    "caption": "Vergleich der Lesezeit"
                }],
                "tldr": "Versalien sind 9,5–19 % langsamer zu lesen (Tinker 1955). Die Wortform-Erkennung geht verloren.",
                "videoUrls":
                {
                    "tiktok": "https://www.tiktok.com/@designparser/video/7592338757697785110",
                    "instagram": "https://www.instagram.com/p/DTLoF7GjT2V/"
                },
                "deepDive":
                {
                    "rule": [
                        "Versalien werden 9,5–19 % langsamer gelesen (Tinker 1955, 20-Minuten-Lesestudie).",
                        "Benötigen etwa 35 % mehr horizontale Fläche als gemischte Groß- und Kleinschreibung.",
                        "Keine Ober- oder Unterlängen bedeutet keine Wortform-Erkennung, wodurch Buchstabe für Buchstabe gelesen werden muss.",
                        "Akzeptable Verwendung: kurze Labels, Tags, Logos und einzeilige Überschriften."
                    ],
                    "why": [
                        "Gemischte Groß- und Kleinschreibung erzeugt einzigartige Wortformen durch Oberlängen wie h und d sowie Unterlängen wie g und y.",
                        "Versalien geben jedem Wort die gleiche uniforme Höhe. Das Gehirn kann keine Wortform-Heuristik nutzen.",
                        "Das Ergebnis ist serielle Buchstabenverarbeitung statt paralleler Worterkennung."
                    ],
                    "whenItBreaks": [
                        "Niemals Versalien für Absätze, Fließtext oder lange Textpassagen verwenden. Die Erinnerungsleistung ist etwa 13 % schlechter.",
                        "Screenreader können ALL CAPS Buchstabe für Buchstabe vorlesen, als wäre es ein Akronym. Verwende CSS text-transform: uppercase statt Großbuchstaben manuell zu tippen."
                    ],
                    "inPractice": [
                        "Verwende CSS text-transform: uppercase statt Großbuchstaben manuell zu tippen. Screenreader lesen das Wort dann als Ganzes und nicht Buchstabe für Buchstabe."
                    ],
                    "keyNumbers": [
                    {
                        "value": "9.5-19%",
                        "label": "Langsamere Lesegeschwindigkeit (Tinker 1955)"
                    },
                    {
                        "value": "35%",
                        "label": "Zusätzlicher horizontaler Platzbedarf"
                    }]
                }
            },
            {
                "id": "font-pairing",
                "title": "Schriftkombinationen",
                "category": "typography",
                "coverImage": "assets/visuals/cover-fontpairing.svg",
                "frames": [
                {
                    "image": "assets/visuals/font-harmony.svg",
                    "caption": "Schriftharmonie"
                },
                {
                    "image": "assets/visuals/sans-sansserif.svg",
                    "caption": "Sans vs. Sans Serif"
                },
                {
                    "image": "assets/visuals/sansserif-sansserif.svg",
                    "caption": "Sans Serif vs. Sans Serif"
                },
                {
                    "image": "assets/visuals/display-neutral.svg",
                    "caption": "Display vs. Neutral"
                },
                {
                    "image": "assets/visuals/script-sansserif.svg",
                    "caption": "Script vs. Sans Serif"
                },
                {
                    "image": "assets/visuals/superfamilies.svg",
                    "caption": "Superfamilien"
                }],
                "tldr": "Passende Proportionen (x-Höhe, Strichstärke) + klarer funktionaler Kontrast (Überschrift vs. Fließtext).",
                "videoUrls":
                {
                    "tiktok": "https://www.tiktok.com/@designparser/video/7599774458437504278?is_from_webapp=1&sender_device=pc&web_id=7605204772584801814",
                    "instagram": "https://www.instagram.com/reel/DT_OIgPDMEc/?utm_source=ig_web_copy_link&igsh=MzRlODBiNWFlZA=="
                },
                "deepDive":
                {
                    "rule": [
                        "Serif + Sans: die klassische Kombination. Die proportionale Grundlage muss übereinstimmen.",
                        "Sans + Sans: eine neutral, eine ausdrucksstark. Ohne Kontrast entsteht keine Hierarchie.",
                        "Display + Neutral: Display-Schriften nur für kurze Akzente verwenden, niemals für Fließtext.",
                        "Superfamilien wie IBM Plex und Source: gemeinsame Metriken per Design, der sicherste Ansatz."
                    ],
                    "why": [
                        "Ähnliche x-Höhen erzeugen harmonischen Fließtext, auch wenn sich die Schriftstile unterscheiden.",
                        "Schriften, die zu ähnlich sind, erzeugen keinen Hierarchiekontrast und wirken unentschlossen.",
                        "Schriften, die zu unterschiedlich sind, erzeugen einen visuellen Bruch und zerstören die Systemkohärenz."
                    ],
                    "whenItBreaks": [
                        "Sehr unterschiedliche x-Höhen erzeugen visuelles Chaos, wenn Texte nebeneinander gesetzt werden.",
                        "Display-Schriften im Fließtext zerstören die Lesbarkeit nach etwa drei Zeilen."
                    ],
                    "inPractice": [
                        "Playfair Display für H1 und H2 kombiniert mit Source Sans für den Fließtext. Ähnliche x-Höhe, klarer stilistischer Kontrast."
                    ]
                }
            },
            {
                "id": "type-hierarchy",
                "title": "Typografische Hierarchie",
                "category": "typography",
                "coverImage": "assets/visuals/cover-type-hierarchy.svg",
                "frames": [
                {
                    "image": "assets/visuals/type-hierarchy.svg",
                    "caption": "linear vs. logarithmisch"
                },
                {
                    "image": "assets/visuals/type-hierarchy-graph.svg",
                    "caption": "Hierarchie-Diagramm"
                },
                {
                    "image": "assets/visuals/ratio-scales.svg",
                    "caption": "Verhältnis-Skalen"
                },
                {
                    "image": "assets/visuals/formula-hierarchy.svg",
                    "caption": "Hierarchie-Formel"
                },
                {
                    "image": "assets/visuals/major-third-scale.svg",
                    "caption": "Major-Third-Skala"
                },
                {
                    "image": "assets/visuals/type-hierarchy-example.svg",
                    "caption": "Beispiel für Typografie-Hierarchie"
                }],
                "tldr": "Mindestens ein Verhältnis von 1,25× zwischen benachbarten Überschriftenebenen. Fließtext bei 16 px. H1 etwa 49 px.",
                "videoUrls":
                {
                    "tiktok": "https://www.tiktok.com/@designparser/video/7609037820056947990?is_from_webapp=1&sender_device=pc&web_id=7605204772584801814",
                    "instagram": "https://www.instagram.com/reel/DU_f4IeCix7/?utm_source=ig_web_copy_link&igsh=MzRlODBiNWFlZA=="
                },
                "deepDive":
                {
                    "rule": [
                        "Verwende eine modulare Skala mit konstantem Verhältnis. Major Third (1,25×) ist der Web-Standard.",
                        "16 px Fließtext skaliert zu: 20, 25, 31, 39, 49 px für H1.",
                        "WCAG SC 2.4.6: Überschriften müssen sequenziell sein. Keine Ebenen überspringen.",
                        "Für Überschriften rem oder clamp() verwenden, niemals px. Dadurch bleibt Benutzer-Skalierung möglich."
                    ],
                    "why": [
                        "Webers Gesetz: Größenwahrnehmung ist logarithmisch. Das Hinzufügen von 2 px erzeugt keine neue Kategorie.",
                        "Ein Verhältnis von mindestens 1,20 ist erforderlich, um eine klar unterscheidbare Hierarchieebene zu erzeugen.",
                        "Zwei CSS-Custom-Properties steuern die gesamte Skala: --base: 1rem und --ratio: 1.25."
                    ],
                    "whenItBreaks": [
                        "Auf mobilen Geräten ist Major Third (1,25×) oft zu aggressiv. Verwende Minor Third (1,20×) und beschränke dich auf drei Überschriftenebenen.",
                        "Für H5 und H6 sollte die Unterscheidung über Schriftgewicht und Farbe erfolgen, nicht über weitere Größenreduktion."
                    ],
                    "inPractice": [
                        "Setze --base: 1rem und --ratio: 1.25 als CSS-Variablen. Eine Markenänderung wird so zu einer einzigen Variablenänderung."
                    ],
                    "keyNumbers": [
                    {
                        "value": "1.25x",
                        "label": "Major Third (Web-Standard)"
                    },
                    {
                        "value": "1.20x",
                        "label": "Minor Third (Mobile)"
                    },
                    {
                        "value": "16px",
                        "label": "Fließtext-Basis"
                    }],
                    "sources": [
                    {
                        "label": "WCAG 2.2 SC 2.4.6 und 1.4.4",
                        "year": "2023"
                    },
                    {
                        "label": "Material Design 3",
                        "year": "2024"
                    }]
                }
            },
            {
                "id": "text-alignment",
                "title": "Textausrichtung",
                "category": "typography",
                "coverImage": "assets/visuals/align-justify.svg",
                "frames": [
                {
                    "image": "assets/visuals/align-justify.svg",
                    "caption": "Blocksatz"
                },
                {
                    "image": "assets/visuals/justify-gap.svg",
                    "caption": "Übermäßige Wortabstände im Blocksatz"
                },
                {
                    "image": "assets/visuals/responsive-justify.svg",
                    "caption": "Blocksatz in einem responsiven Container"
                },
                {
                    "image": "assets/visuals/align-left.svg",
                    "caption": "Linksbündiger Text"
                }],
                "tldr": "Fließtext linksbündig ausrichten.\nBlocksatz kann im Web einen WCAG SC 1.4.8 (AAA)-Verstoß darstellen.\nZentrierter Text: maximal 1–3 Zeilen. Zahlen in Tabellen: rechtsbündig.",
                "videoUrls":
                {
                    "tiktok": "https://www.tiktok.com/@designparser/video/7611204591891270934?is_from_webapp=1&sender_device=pc&web_id=7605204772584801814",
                    "instagram": "https://www.instagram.com/reel/DVOiVYpivR6/?utm_source=ig_web_copy_link&igsh=MzRlODBiNWFlZA=="
                },
                "deepDive":
                {
                    "rule": [
                        "Fließtext in LTR-Interfaces linksbündig ausrichten. Eine feste linke Kante erleichtert den Zeilenrücksprung der Augen.",
                        "Blocksatz (text-align: justify) kann im Web WCAG 2.2 F88 / SC 1.4.8 (AAA) verletzen.",
                        "Responsive Container machen Wortabstände im Blocksatz über verschiedene Breakpoints hinweg unvorhersehbar.",
                        "Zentrierter Text: maximal 1–3 Zeilen. Nur für Überschriften, Bildunterschriften oder kurze CTAs. Kein mehrzeiliger Fließtext.",
                        "Numerische Tabellenspalten: rechtsbündig ausrichten. Ermöglicht Stellenwert-Vergleiche.",
                        "RTL-Sprachen (Arabisch, Hebräisch): rechtsbündig über dir='rtl' im HTML steuern, nicht manuell über CSS."
                    ],
                    "why": [
                        "Sakkadische Rücksprünge benötigen einen stabilen linken Anker. Linksbündiger Text bietet diesen in jeder Zeile.",
                        "Blocksatz: variable Wortabstände stören den Leserythmus und bieten keinen stabilen rechten Anker.",
                        "Ling & van Schaik (2007, n=65): linksbündiger Text führte zu besserer Genauigkeit und schnellerer Reaktionszeit als Blocksatz.",
                        "Dieselbe Studie zeigte: Teilnehmer bevorzugten subjektiv Blocksatz. Präferenz unterscheidet sich von tatsächlicher Leistung.",
                        "„Rivers of white“: unregelmäßige vertikale Lücken durch gedehnte Wortabstände. Werden bei über 200 % Zoom stärker sichtbar."
                    ],
                    "whenItBreaks": [
                        "Print mit Silbentrennung: Blocksatz ist akzeptabel mit professionellen Algorithmen und festen Spaltenbreiten. Im Web fehlt diese Kontrolle.",
                        "Zentrierte Überschriften: legitim für kurzen Displaytext bis etwa 3 Zeilen.",
                        "Numerische Daten: Ganzzahlen und Dezimalzahlen in Tabellenzellen rechtsbündig ausrichten. Linksbündige Zahlen erschweren Stellenwertvergleiche."
                    ],
                    "inPractice": [
                        "Fließtext: text-align: left; max-width: 80ch;",
                        "WCAG SC 1.4.8: zusätzlich line-height: 1.5 und margin-bottom: 1.5em verwenden.",
                        "Blocksatz für Print: in @media print kapseln und hyphens: auto; aktivieren. Niemals außerhalb dieses Scopes anwenden.",
                        "Numerische Spalten: .numeric { text-align: right } für alle Werte- und Header-Zellen."
                    ],
                    "keyNumbers": [
                    {
                        "value": "80ch",
                        "label": "Maximale Zeilenlänge (WCAG SC 1.4.8)"
                    },
                    {
                        "value": "1.5",
                        "label": "Minimale Zeilenhöhe für Fließtext (WCAG AAA)"
                    },
                    {
                        "value": "1–3 lines",
                        "label": "Maximale Länge für zentrierten Text (WCAG Low Vision)"
                    }],
                    "sources": [
                    {
                        "label": "WCAG 2.2 SC 1.4.8, Failure F88",
                        "year": "2023"
                    },
                    {
                        "label": "Ling and van Schaik. Displays Journal",
                        "year": "2007"
                    },
                    {
                        "label": "W3C Low Vision Accessibility Task Force — Text Justification",
                        "year": "2023"
                    }]
                }
            },
            {
                "id": "typeface-vs-font",
                "title": "Schriftfamilie vs. Font",
                "category": "typography",
                "coverImage": "assets/visuals/cover-typeface.svg",
                "frames": [
                {
                    "image": "assets/visuals/typeface.svg",
                    "caption": "Schriftfamilie"
                },
                {
                    "image": "assets/visuals/font.svg",
                    "caption": "Font"
                },
                {
                    "image": "assets/visuals/font-family.svg",
                    "caption": "Font-Familie"
                },
                {
                    "image": "assets/visuals/font-files.svg",
                    "caption": "Font-Dateien"
                }],
                "tldr": "Eine Schriftfamilie ist das Designsystem (z. B. Helvetica). Ein Font ist eine vollständig parametrisierte Instanz darin (z. B. Helvetica Neue Bold 700). CSS font-family entspricht einem Familiennamen aus @font-face, der typischerweise einer Schriftfamilie zugeordnet ist. Zwei Eigenschaften, zwei Ebenen der Hierarchie.",
                "videoUrls":
                {
                    "tiktok": "https://www.tiktok.com/@designparser/video/7611659784151960855?is_from_webapp=1&sender_device=pc&web_id=7605204772584801814",
                    "instagram": "https://www.instagram.com/reel/DVRr80kCkYA/?utm_source=ig_web_copy_link&igsh=MzRlODBiNWFlZA=="
                },
                "deepDive":
                {
                    "rule": [
                        "Schriftfamilie: visuelles Designsystem — Strichcharakter, Proportionen, Achsen, Serifengestaltung. Font: eine parametrisierte Instanz — Achsenwerte, Metriken, Glyphensatz, Feature-Tabellen.",
                        "Hierarchisch: eine Schriftfamilie enthält einen oder mehrere Fonts. Ein Font implementiert genau ein Designsystem. Ausnahme: Superfamilien (Serif + Sans mit gemeinsamer Marke) können ein erweitertes Schriftfamilien-System bilden.",
                        "CSS font-family: String-Matching gegen den @font-face Familiennamen. Meist 1:1 mit einer Schriftfamilie. font-weight, font-style und font-stretch wählen die Instanz über den Font-Matching-Algorithmus.",
                        "Fallback-Stack: kommagetrennt, von links nach rechts aufgelöst. Generische Keywords (sans-serif, serif, monospace) sind Klassifikationskategorien, keine Schriftfamilien. Kein Designsystem, keine definierten Metriken, keine Glyphengarantie.",
                        "Variable Fonts (OpenType 1.8, 2016): eine Datei, ein vollständiges Designkontinuum über 5 registrierte Achsen (wght, wdth, ital, slnt, opsz) plus unbegrenzte benutzerdefinierte Achsen. Eine Datei enthält viele Instanzen. Eine Instanz ist nicht identisch mit der Datei."
                    ],
                    "why": [
                        "Die Vermischung der Begriffe stammt aus Apple- und Microsoft-DTP-APIs der 1980er Jahre. font-family wurde für Endnutzer benannt, nicht für Typografen. Das W3C übernahm diese Benennung in CSS Fonts Level 4 und Level 5.",
                        "Consumer-Interfaces (Word, Photoshop, Canva) nennen Schriftfamilien-Auswahlfelder einfach „Font“. Eine Spezifikation, die nur den Schriftfamiliennamen angibt, lässt die konkrete Font-Instanz unter Umständen über Dutzende Schnitte hinweg undefiniert.",
                        "Optische Größen existierten schon vor Variable Fonts. Klassische Familien hatten eigene Schnitte für Größenbereiche (Caption, Text, Display). Variable Fonts formalisierten dies als opsz-Achse.",
                        "Konsistente Font-Parameter innerhalb einer Schriftfamilie können die extrinsische kognitive Belastung reduzieren (Sweller, 1988). Theoretischer Transfer, keine direkte typografische Studie."
                    ],
                    "whenItBreaks": [
                        "Variable Fonts: keine diskreten Schnitte, sondern kontinuierliche Achsenbereiche. Eine Datei enthält viele Instanzen und einen vollständigen Interpolationsraum. Die konzeptionelle Hierarchie bleibt bestehen, Dateigrenzen entsprechen ihr jedoch nicht mehr.",
                        "Kein expliziter Bold- oder Italic-Font vorhanden: der Font-Matching-Algorithmus fällt auf den nächsten Gewichtswert zurück und synthetisiert dann durch Strichverstärkung oder Schrägstellung. Diese Synthese ist qualitativ schlechter als echte gezeichnete Italics. Jede Kombination aus font-family + font-weight + font-style benötigt eine entsprechende @font-face-Definition.",
                        "Superfamilien (z. B. Grotesk + Slab-Serif als ein System): mehrere Designsysteme unter einer Marke. Ob dies eine oder zwei Schriftfamilien sind, ist eine Entscheidung der Foundry, keine technische Tatsache."
                    ],
                    "inPractice": [
                        "Variable Font: ein @font-face-Block mit font-weight: 100 900. Fließtext: 400. Überschriften: 700. font-optical-sizing: auto. Fallback: 'Inter Variable', system-ui, sans-serif. Tabellarische Daten: font-variant-numeric: tabular-nums. Legacy: @supports not (font-variation-settings: normal). Vor Nutzung von font-variation-settings immer prüfen, ob die Achse existiert — fehlende Achsen schlagen still fehl."
                    ],
                    "keyNumbers": [
                    {
                        "value": "5",
                        "label": "Registrierte OpenType-Achsen: wght, wdth, ital, slnt, opsz"
                    },
                    {
                        "value": "unlimited",
                        "label": "Benutzerdefinierte Achsen laut OpenType-1.8-Spezifikation"
                    },
                    {
                        "value": "88%",
                        "label": "Dateigrößenreduktion: 48 statische Dateien vs. 1 Variable Font (Monotype, web.dev)"
                    },
                    {
                        "value": "> 94%",
                        "label": "Globale Browserunterstützung für Variable Fonts (Can I Use, 2026)"
                    },
                    {
                        "value": "3",
                        "label": "Minimale Gewichtungsvarianten, damit Variable Fonts bei Transfergröße statische Fonts übertreffen"
                    },
                    {
                        "value": "100–900",
                        "label": "font-weight in CSS; 1–1000 laut OpenType-Spezifikation"
                    },
                    {
                        "value": "50%–200%",
                        "label": "font-stretch laut CSS Fonts Level 4; wdth-Achse 100 = normal"
                    }],
                    "sources": [
                    {
                        "label": "OpenType 1.8 Specification. Microsoft, Adobe, Google, Apple",
                        "year": "2016"
                    },
                    {
                        "label": "W3C. CSS Fonts Module Level 4",
                        "year": "2021"
                    },
                    {
                        "label": "W3C. CSS Fonts Module Level 5 (Working Draft)",
                        "year": "2026"
                    },
                    {
                        "label": "ISO/IEC 14496-22. Open Font Format",
                        "year": "2019"
                    },
                    {
                        "label": "McNeil, P. The Visual History of Type. Laurence King Publishing",
                        "year": "2017"
                    },
                    {
                        "label": "TypeType Type Foundry. Typeface vs Font",
                        "year": "2025"
                    },
                    {
                        "label": "Sweller, J. Cognitive Load During Problem Solving",
                        "year": "1988"
                    }]
                }
            },
{
    "id": "centered-text",
    "title": "Zentrierter Text 🙄",
    "category": "typography",
    "coverImage": "assets/visuals/align-center.svg",
    "frames": [
        {
            "image": "assets/visuals/align-center.svg",
            "caption": "Zentrierte Überschrift"
        },
        {
            "image": "assets/visuals/center-short.svg",
            "caption": "Kurzer zentrierter Text (1–3 Zeilen)"
        },
        {
            "image": "assets/visuals/center-long.svg",
            "caption": "Zu langer zentrierter Fließtext"
        },
        {
            "image": "assets/visuals/align-left.svg",
            "caption": "Besser: linksbündiger Fließtext"
        }
    ],
    "tldr": "Zentrierten Text nur sparsam verwenden.\nMaximal 1–3 Zeilen für Überschriften, Bildunterschriften oder kurze CTAs.\nMehrzeiliger Fließtext sollte linksbündig gesetzt werden.",
    "deepDive":
    {
        "rule": [
            "Zentrierten Text nur für kurze Textelemente verwenden: Überschriften, Bildunterschriften oder Call-to-Actions.",
            "Maximale Länge: etwa 1–3 Zeilen.",
            "Mehrzeiliger Fließtext sollte linksbündig ausgerichtet werden.",
            "Zentrierter Text ist für längere Inhalte ungeeignet, da keine stabile Lesekante vorhanden ist.",
            "Zahlen und Daten in Tabellen weiterhin rechtsbündig ausrichten."
        ],
        "why": [
            "Beim Lesen benötigen die Augen einen stabilen Startpunkt für den Zeilenanfang.",
            "Linksbündige Texte bieten eine feste linke Kante, an der sich der Blick orientieren kann.",
            "Zentrierter Text hat variable Zeilenanfänge und erschwert den visuellen Zeilenrücksprung.",
            "Bei längeren Texten steigt dadurch die kognitive Belastung und die Lesegeschwindigkeit sinkt.",
            "Kurze Textelemente profitieren dagegen visuell von zentrierter Ausrichtung."
        ],
        "whenItBreaks": [
            "Mehrzeiliger Fließtext: erschwert Lesbarkeit und Orientierung.",
            "Responsive Layouts: Zeilenumbrüche verändern sich über Breakpoints hinweg und erzeugen unruhige Formen.",
            "Lange Überschriften: stark unterschiedliche Zeilenlängen wirken visuell instabil."
        ],
        "inPractice": [
            "Überschriften oder CTAs: text-align: center; max-width: 40ch;",
            "Fließtext: text-align: left; max-width: 80ch;",
            "Bildunterschriften: figcaption { text-align: center; }"
        ],
        "keyNumbers": [
            {
                "value": "1–3 lines",
                "label": "Maximale Länge für zentrierten Text"
            },
            {
                "value": "40ch",
                "label": "Empfohlene maximale Breite für zentrierte Headlines"
            },
            {
                "value": "80ch",
                "label": "Maximale Zeilenlänge für Fließtext"
            }
        ],
        "sources": [
            {
                "label": "W3C Low Vision Accessibility Task Force — Text Layout",
                "year": "2023"
            },
            {
                "label": "WCAG 2.2 SC 1.4.8 Visual Presentation",
                "year": "2023"
            },
            {
                "label": "Nielsen Norman Group — Text Alignment & Readability",
                "year": "2022"
            }
        ]
    }
}

        ]
        },
        "spacing":
        {
            "title": "ABSTÄNDE",
            "rules": [
            {
                "id": "8pt-grid",
                "title": "8-pt-Grid-System",
                "category": "spacing",
                "coverImage": "assets/visuals/8pt-system.svg",
                "frames": [
                {
                    "image": "assets/visuals/8pt-system.svg",
                    "caption": "8-pt-Grid"
                },
                {
                    "image": "assets/visuals/8pt-example.svg",
                    "caption": "Beispielanwendung"
                }],
                "tldr": "Abstände in Vielfachen von 8: 8, 16, 24, 32, 40, 48. Pixelgenau auf allen Displaydichten.",
                "videoUrls":
                {
                    "tiktok": "https://www.tiktok.com/@designparser/video/7596838167811067158?is_from_webapp=1&sender_device=pc&web_id=7517983817683764759",
                    "instagram": "https://www.instagram.com/p/DTq2LqNjdSJ/"
                },
                "deepDive":
                {
                    "rule": [
                        "Abstände in Vielfachen von 8 anwenden: 8, 16, 24, 32, 40, 48, 56, 64.",
                        "Für Margins, Padding, Komponenten-Höhen und -Breiten verwenden.",
                        "4-pt als Halbschritt für Icons, kleine Abstände und Feinanpassungen nutzen.",
                        "Schriftgrößen müssen keine Vielfachen von 8 sein."
                    ],
                    "why": [
                        "Retina-Skalierung: 8px bei @2x werden 16px, bei @3x werden 24px. Immer ganze Zahlen.",
                        "Erzeugt klar unterscheidbare Abstände ohne zu viele Variablen im Vergleich zu 4-pt- oder 6-pt-Basen.",
                        "Die meisten Bildschirmauflösungen sind durch 4 oder 8 teilbar."
                    ],
                    "whenItBreaks": [
                        "Zeilenhöhen sollten Vielfache von 4 sein, nicht von 8. Schritte von 8 erzeugen zu große Abstände.",
                        "Keine starre Regel. Ein Border-Radius von 6px ist völlig in Ordnung. Das System ist eine Skala, kein Gefängnis."
                    ],
                    "inPractice": [
                        "15px Schriftgröße mit 24px Zeilenhöhe (ein Vielfaches von 4) ist eine korrekte Kombination."
                    ],
                    "keyNumbers": [
                    {
                        "value": "8px",
                        "label": "Basiseinheit"
                    },
                    {
                        "value": "4px",
                        "label": "Halbschritt für Icons und Feinanpassungen"
                    }]
                }
            },
            {
                "id": "4pt-system",
                "title": "4-pt-System",
                "category": "spacing",
                "coverImage": "assets/visuals/4pt-system.svg",
                "frames": [
                {
                    "image": "assets/visuals/4pt-system.svg",
                    "caption": "4-pt-System"
                }],
                "tldr": "Halbschritt des 8-pt-Grids. Für Typografie und Icons. Kein Ersatz für das 8-pt-System.",
                "videoUrls":
                {
                    "tiktok": "https://www.tiktok.com/@designparser/video/7596838167811067158?is_from_webapp=1&sender_device=pc&web_id=7517983817683764759",
                    "instagram": "https://www.instagram.com/p/DTq2LqNjdSJ/"
                },
                "deepDive":
                {
                    "rule": [
                        "4-pt-Halbschritte: 4, 8, 12, 16, 20, 24. Ergänzt das 8-pt-System, ersetzt es nicht.",
                        "Für typografische Zeilenhöhen, Icon-Padding und dichte Interfaces verwenden.",
                        "8-pt übernimmt Komponentengrößen und Abstände zwischen großen Elementen.",
                        "4-pt übernimmt Zeilenhöhen, Icon-Abstände und sekundäre Textabstände."
                    ],
                    "why": [
                        "Zeilenhöhen in 8-pt-Schritten sind oft zu groß. 4-pt bietet mehr Optionen: 20, 24, 28px.",
                        "Material Design nutzt 8-pt für Elemente und eine 4-pt-Baseline für Typografie.",
                        "Feinere Kontrolle ohne zu viele Variablen."
                    ],
                    "whenItBreaks": [
                        "4-pt überall zu verwenden erzeugt zu viele Variablen und untergräbt das System.",
                        "Ungerade Zahlen wie 5, 7 und 9 erzeugen Subpixel-Unschärfe bei 1,5× Display-Skalierung."
                    ],
                    "inPractice": [
                        "15px Schriftgröße, 24px Zeilenhöhe (4-pt-Vielfaches), 8px Icon-Abstand (4-pt), 16px Padding (8-pt)."
                    ]
                }
            },
            {
                "id": "proximity",
                "title": "Nähe",
                "category": "spacing",
                "coverImage": "assets/visuals/proximity-bind-content.svg",
                "frames": [
                {
                    "image": "assets/visuals/proximity-bind-content.svg",
                    "caption": "Bindet Inhalte"
                },
                {
                    "image": "assets/visuals/proximity-bind.svg",
                    "caption": "Nähe verbindet"
                },
                {
                    "image": "assets/visuals/proximity-no-hierachy.svg",
                    "caption": "Keine Hierarchie"
                },
                {
                    "image": "assets/visuals/proximity-hierachy.svg",
                    "caption": "Klare Hierarchie"
                }],
                "tldr": "Nähe signalisiert Beziehung. Überall gleiche Abstände bedeuten keine Hierarchie.",
                "videoUrls":
                {
                    "tiktok": "https://www.tiktok.com/@designparser/video/7593032381389376790",
                    "instagram": "https://www.instagram.com/p/DTQcm3EDUSP/"
                },
                "deepDive":
                {
                    "rule": [
                        "Verwandte Elemente: 4–8px. Zwischen Labels und Inputs, Icons und Text.",
                        "Elemente innerhalb eines Abschnitts: 16–24px.",
                        "Abschnitte voneinander trennen: 32–48px oder mehr.",
                        "Nähe übertrifft Ähnlichkeit. Sie ist stärker als Farbe, Form oder Größe."
                    ],
                    "why": [
                        "Das Gehirn gruppiert Elemente automatisch, bevor bewusste Analyse beginnt.",
                        "Überall gleiche Abstände flachen die Hierarchie ab und eliminieren Scan-Pfade.",
                        "Whitespace ist kein leerer Raum. Er ist ein Gruppierungswerkzeug."
                    ],
                    "whenItBreaks": [
                        "Labels mit mehr als 16px Abstand zum Input wirken getrennt und werden visuell falsch zugeordnet.",
                        "Abschnitte mit weniger als 24px Abstand wirken wie ein einziger Block."
                    ],
                    "inPractice": [
                        "Squint-Test: Augen leicht zusammenkneifen. Gruppen sollten sofort erkennbar sein."
                    ],
                    "keyNumbers": [
                    {
                        "value": "4-8px",
                        "label": "Verwandte Elemente"
                    },
                    {
                        "value": "16-24px",
                        "label": "Innerhalb eines Abschnitts"
                    },
                    {
                        "value": "32-48px",
                        "label": "Zwischen Abschnitten"
                    }]
                }
            },
            {
                "id": "column-grid",
                "title": "Spaltenraster",
                "category": "spacing",
                "coverImage": "assets/visuals/column-grid.svg",
                "frames": [
                {
                    "image": "assets/visuals/column-grid.svg",
                    "caption": "12-Spalten-Raster"
                }],
                "tldr": "12 Spalten (teilbar durch 2, 3, 4, 6). 24px Gutter auf Desktop, 16px auf Mobile.",
                "videoUrls":
                {
                    "tiktok": "https://www.tiktok.com/@designparser/video/7587058135047687446",
                    "instagram": "https://www.instagram.com/p/DSm--D1DWfo/"
                },
                "deepDive":
                {
                    "rule": [
                        "12-Spalten-Standard: teilbar durch 2, 3, 4 und 6 für maximale Layout-Flexibilität.",
                        "Gutters: 16px Mobile, 20–32px Desktop.",
                        "Container max-width: etwa 1200px (Bootstrap) oder 1600px für größere Designs.",
                        "Responsive Breakpoints: 12 col, 8 col, 4 col, 1 col."
                    ],
                    "why": [
                        "12 Spalten erlauben Layouts wie 4-4-4, 3-3-3-3, 6-6, 3-6-3 und 2-8-2 ohne Brüche.",
                        "Framework-Standard in Bootstrap und Material Design, reduziert Entwickler-Reibung.",
                        "Spalten kontrollieren nur die Breite. Inhalte fließen vertikal."
                    ],
                    "whenItBreaks": [
                        "Alle 12 Spalten für einen einzigen Inhaltsblock zu verwenden erzeugt Textzeilen über 80 CPL und ist schwer lesbar.",
                        "Ohne max-width breitet sich Text auf Ultra-Wide-Screens endlos aus."
                    ],
                    "inPractice": [
                        "Ein Textblock über 8 von 12 Spalten (66 %) ergibt etwa 65 CPL auf Desktop. Optimal für Lesbarkeit."
                    ]
                }
            },
            {
                "id": "modular-grid",
                "title": "Modulares Raster",
                "category": "spacing",
                "coverImage": "assets/visuals/modular-grid.svg",
                "frames": [
                {
                    "image": "assets/visuals/modular-grid.svg",
                    "caption": "Modulares Raster"
                }],
                "tldr": "Spalten + Reihen erzeugen eine Matrix. Ideal für Dashboards, Editorial-Layouts und Produktgrids.",
                "videoUrls":
                {
                    "tiktok": "https://www.tiktok.com/@designparser/video/7587058135047687446",
                    "instagram": "https://www.instagram.com/p/DSm--D1DWfo/"
                },
                "deepDive":
                {
                    "rule": [
                        "Spalten + Reihen bilden eine Modulmatrix. Jedes Modul kann Inhalte aufnehmen oder mit benachbarten Modulen kombiniert werden.",
                        "Gutters zwischen Modulen: typischerweise 16–24px.",
                        "Ideal für Dashboards, Editorial-Layouts und E-Commerce-Produktgrids."
                    ],
                    "why": [
                        "Ermöglicht gleichzeitig vertikale und horizontale Kontrolle.",
                        "Gleich große Module machen bewusstes Regelbrechen leichter umsetzbar."
                    ],
                    "whenItBreaks": [
                        "Im Web und auf Mobile werden feste Reihenhöhen selten benötigt. Ein Spaltenraster reicht meist aus.",
                        "Zu kleine Module erzeugen Entscheidungsparalyse durch zu viele Platzierungsoptionen."
                    ],
                    "inPractice": [
                        "Dashboard mit 4×4-Modulraster: 1 Modul für KPI-Karte, 2×2 für Diagramm, 4×2 für Datentabelle."
                    ]
                }
            },
            {
                "id": "baseline-grid",
                "title": "Baseline-Raster",
                "category": "spacing",
                "coverImage": "assets/visuals/baseline-grid.svg",
                "frames": [
                {
                    "image": "assets/visuals/baseline-grid.svg",
                    "caption": "Baseline-Raster"
                }],
                "tldr": "4px-Basis für typografischen Rhythmus. Zeilenhöhen müssen Vielfache von 4 sein.",
                "videoUrls":
                {
                    "tiktok": "https://www.tiktok.com/@designparser/video/7587058135047687446",
                    "instagram": "https://www.instagram.com/p/DSm--D1DWfo/"
                },
                "deepDive":
                {
                    "rule": [
                        "Horizontale Linien im 4px-Raster. Alle Text-Baselines liegen auf einer Rasterlinie.",
                        "Zeilenhöhen müssen Vielfache von 4 sein: 16, 20, 24, 28, 32px.",
                        "8-pt-UI-Grid mit 4-pt-Baseline-Raster kombinieren. Das ist der Material-Design-Standard."
                    ],
                    "why": [
                        "Eine 8px-Baseline ist für Typografie zu grob. Das 4-pt-Raster bietet bessere Optionen.",
                        "Material Design verwendet explizit eine 4-pt-Baseline für Typografie.",
                        "Die angenehmsten Zeilenhöhen (20, 24, 28px) sind alle Vielfache von 4."
                    ],
                    "whenItBreaks": [
                        "Schriftgrößen müssen keine Vielfachen von 4 sein. Nur Zeilenhöhen.",
                        "Pixelgenaue Baseline-Ausrichtung über alle Browser hinweg ist in responsiven Weblayouts schwierig."
                    ],
                    "inPractice": [
                        "16px Schriftgröße + 24px Zeilenhöhe (Vielfaches von 4) ist eine korrekte und komfortable Kombination."
                    ]
                }
            }]
        },
        "shadows":
        {
            "title": "SCHATTEN UND TIEFE",
            "rules": [
            {
                "id": "shadow-fundamentals",
                "title": "Grundlagen von Schatten",
                "category": "shadows",
                "coverImage": "assets/visuals/raised-light-direction.svg",
                "frames": [
                {
                    "image": "assets/visuals/button-raised.svg",
                    "caption": "Licht von oben"
                },
                {
                    "image": "assets/visuals/raised-light-direction.svg",
                    "caption": "Lichtrichtung"
                },
                {
                    "image": "assets/visuals/shadow-edge-depth.svg",
                    "caption": "Kantenbasierte Tiefe"
                }],
                "tldr": "Eine einzelne Lichtquelle von oben. Schatten zeigen immer nach unten. Tiefe entsteht zuerst durch Kanten, nicht durch Schatten.",
                "videoUrls":
                {
                    "tiktok": "https://www.tiktok.com/@designparser/video/7597574236005289238",
                    "instagram": "https://www.instagram.com/p/DTv9DGRjafS/"
                },
                "deepDive":
                {
                    "rule": [
                        "UI simuliert eine einzelne Lichtquelle von oben, wie Tageslicht oder Deckenbeleuchtung.",
                        "Schatten zeigen immer nach unten. Niemals nach oben.",
                        "Obere Kanten sind heller (zum Licht gerichtet). Untere Kanten sind dunkler (vom Licht abgewandt).",
                        "Tiefe durch Kantenkontrast kommt zuerst. Schatten verstärken Tiefe, sie ersetzen sie nicht."
                    ],
                    "why": [
                        "Entspricht der evolutionär verankerten Tiefenwahrnehmung durch Sonnenlicht von oben.",
                        "Inkonsistente Lichtquellen erzeugen sofort einen Bruch im wahrgenommenen Realismus.",
                        "Kantenkontrast allein ermöglicht dem Gehirn, räumliche Position auch ohne Schatten zu erkennen."
                    ],
                    "whenItBreaks": [
                        "Mehrere Lichtquellen erzeugen widersprüchliche Tiefensignale und visuelles Chaos.",
                        "Schatten zu verwenden, um schlechte Geometrie zu kaschieren, funktioniert nicht. Erst die Form korrigieren."
                    ],
                    "inPractice": [
                        "Niemals reines Schwarz verwenden. Stattdessen rgba(0,0,0,0.1–0.3), damit Schatten mit der Hintergrundfarbe verschmelzen."
                    ]
                }
            },
            {
                "id": "elevation-system",
                "title": "Elevationssystem",
                "category": "shadows",
                "coverImage": "assets/visuals/cover-elevation-system.svg",
                "frames": [
                {
                    "image": "assets/visuals/elevation-front-side.svg",
                    "caption": "Front- vs. Seitenansicht"
                },
                {
                    "image": "assets/visuals/elevation-usage.svg",
                    "caption": "Verwendung der Elevation"
                },
                {
                    "image": "assets/visuals/elevation-twolayer.png",
                    "caption": "Zwei-Schatten-Technik"
                }],
                "tldr": "5–7 Elevationsstufen. Höhere Elevation bedeutet größeren Blur und größeren Offset. Verwende Tokens.",
                "videoUrls":
                {
                    "tiktok": "https://www.tiktok.com/@designparser/video/7598230800563211542",
                    "instagram": "https://www.instagram.com/p/DT0gnIsjSnp/"
                },
                "deepDive":
                {
                    "rule": [
                        "Maximal 5–6 Stufen definieren. Material Design nutzt: 0, 1, 2, 4, 6, 8, 16, 24dp.",
                        "Stufe 0–1: Buttons und Karten. Kleiner Blur, geringer Offset.",
                        "Stufe 2–3: Dropdowns und Menüs. Mittlerer Blur und Offset.",
                        "Stufe 4–5: Modals und Dialoge. Großer Blur und Offset."
                    ],
                    "why": [
                        "Höhere Elevation bedeutet, dass der Schatten weiter vom Objekt entfernt ist und dadurch größer, weicher und heller wirkt.",
                        "Zu viele Stufen erzeugen Entscheidungsparalyse und inkonsistente Anwendung im Produkt.",
                        "Konsistenz ist wichtiger als Realismus. Die gleichen Stufen überall verwenden."
                    ],
                    "whenItBreaks": [
                        "Rein schwarze Schatten wirken zu hart. Immer rgba(0,0,0,0.1–0.3) verwenden.",
                        "Schatten auf farbigen Hintergründen müssen an den Farbton des Hintergrunds angepasst werden."
                    ],
                    "inPractice": [
                        "Tokens verwenden: shadow/low, shadow/medium, shadow/high. Niemals CSS-Schattenwerte direkt in Komponenten definieren."
                    ]
                }
            },
            {
                "id": "raised-vs-inset",
                "title": "Raised vs. Inset",
                "category": "shadows",
                "coverImage": "assets/visuals/raised-inset.svg",
                "frames": [
                {
                    "image": "assets/visuals/button-states.svg",
                    "caption": "Button-Zustände"
                },
                {
                    "image": "assets/visuals/button-flat.svg",
                    "caption": "Flat"
                },
                {
                    "image": "assets/visuals/flat-light-angle.svg",
                    "caption": "Flache Lichtrichtung"
                },
                {
                    "image": "assets/visuals/button-raised.svg",
                    "caption": "Raised"
                },
                {
                    "image": "assets/visuals/raised-light-direction.svg",
                    "caption": "Raised-Lichtrichtung"
                },
                {
                    "image": "assets/visuals/button-inset.svg",
                    "caption": "Inset"
                },
                {
                    "image": "assets/visuals/inset-light-angle.svg",
                    "caption": "Inset-Lichtrichtung"
                }],
                "tldr": "Raised: Schatten unten + helle obere Kante. Inset: Schatten oben + dunkle obere Kante.",
                "videoUrls":
                {
                    "tiktok": "https://www.tiktok.com/@designparser/video/7598687398247009558",
                    "instagram": "https://www.instagram.com/p/DT3rY5ajS4U/"
                },
                "deepDive":
                {
                    "rule": [
                        "Raised (Buttons): Drop-Shadow unten + helle obere Kante mit inset 0 1px rgba(255,255,255,0.2).",
                        "Inset (Inputs, Wells): Schatten oben mit inset 0 1px 2px rgba(0,0,0,0.3) + helle untere Kante.",
                        "Pressed-State: Drop-Shadow entfernen und einen dunkleren Inset-Schatten hinzufügen.",
                        "Hover-State: Schattenradius und Offset erhöhen, um ein Anheben des Elements zu simulieren."
                    ],
                    "why": [
                        "Raised: Das Element liegt über der Oberfläche. Licht trifft die obere Kante, der Schatten fällt darunter.",
                        "Inset: Das Element ist vertieft. Die obere Kante blockiert das Licht, daher erscheint der Schatten oben.",
                        "Interaktion ist Bewegung auf der Z-Achse, keine Dekoration."
                    ],
                    "whenItBreaks": [
                        "Inkonsistente Lichtrichtungen zwischen Raised- und Inset-Elementen zerstören den Realismus.",
                        "Übermäßiger Realismus erzeugt visuelles Rauschen. Klarheit ist wichtiger als physikalische Genauigkeit."
                    ],
                    "inPractice": [
                        "Aktiver Button-Zustand: transform: translateY(1px) kombiniert mit reduziertem Schatten simuliert einen physischen Druck."
                    ]
                }
            }]
        },
        "ux-laws":
        {
            "title": "UX-GESETZE",
            "rules": [
            {
                "id": "millers-law",
                "title": "Millers Gesetz",
                "category": "ux-laws",
                "coverImage": "assets/visuals/cover-millers-law.svg",
                "frames": [
                {
                    "image": "assets/visuals/millers-law-wrong.png",
                    "caption": "Zu viele Elemente"
                },
                {
                    "image": "assets/visuals/millers-law-right.png",
                    "caption": "Chunking-Strategie"
                }],
                "tldr": "7 ± 2 Einheiten im Arbeitsgedächtnis. Moderne Schätzungen liegen eher bei etwa 4 (Cowan 2001). Struktur ist wichtiger als Anzahl.",
                "videoUrls":
                {
                    "tiktok": "https://www.tiktok.com/@designparser/video/7591270763643063574",
                    "instagram": "https://www.instagram.com/p/DTENv8nDVxp/"
                },
                "deepDive":
                {
                    "rule": [
                        "Die durchschnittliche Person kann etwa 7 ± 2 Einheiten im Arbeitsgedächtnis halten (Miller 1956).",
                        "Moderne Forschung geht eher von etwa 4 unterschiedlichen Elementen aus (Cowan 2001).",
                        "Chunking: verwandte Elemente zu bedeutungsvollen Einheiten gruppieren, um die kognitive Last zu reduzieren.",
                        "Gilt nur für das Kurzzeitgedächtnis. Ohne Wiederholung verblassen Inhalte nach 20–30 Sekunden."
                    ],
                    "why": [
                        "Was als Chunk zählt, hängt von Erfahrung ab. „FBI“ ist für einen Agenten ein Chunk, für andere drei Buchstaben.",
                        "10 gut strukturierte Elemente sind besser als 5 chaotische. Struktur schlägt Anzahl.",
                        "(555) 123-4567 sind 3 Chunks. 5551234567 sind 10 einzelne Ziffern."
                    ],
                    "whenItBreaks": [
                        "Es gibt kein starres Limit. „Es müssen genau 7 Elemente sein“ ist eine Fehlinterpretation. Miller selbst sagte, die Zahl sei zufällig.",
                        "Vertraute Reize: Experten können deutlich mehr als 7 Elemente problemlos verarbeiten."
                    ],
                    "inPractice": [
                        "Navigation: 5–7 Hauptpunkte, Dropdowns für den Rest. Formulare: in Abschnitte gruppieren wie Persönliche Daten, Adresse, Zahlung."
                    ],
                    "keyNumbers": [
                    {
                        "value": "7 ± 2",
                        "label": "Miller 1956. Einheiten im Arbeitsgedächtnis"
                    },
                    {
                        "value": "~4",
                        "label": "Cowan 2001. Aktualisierte Schätzung"
                    }]
                }
            },
            {
                "id": "hicks-law",
                "title": "Hicks Gesetz",
                "category": "ux-laws",
                "coverImage": "assets/visuals/hicks-law.png",
                "frames": [
                {
                    "image": "assets/visuals/hicks-law.png",
                    "caption": "Entscheidungszeit vs. Anzahl der Optionen"
                }],
                "tldr": "Die Entscheidungszeit steigt logarithmisch mit der Anzahl der Optionen: RT = a + b × log2(n).",
                "videoUrls":
                {
                    "tiktok": "https://www.tiktok.com/@designparser/video/7586812915014012182",
                    "instagram": "https://www.instagram.com/p/DSlSHpzjT6j/"
                },
                "deepDive":
                {
                    "rule": [
                        "RT = a + b × log2(n). Eine Verdopplung der Optionen erhöht die Zeit um einen konstanten Betrag, nicht um das Doppelte.",
                        "Der Schritt von 2 auf 4 Optionen erhöht die Entscheidungszeit genauso wie von 4 auf 8.",
                        "Gilt nur, wenn alle Optionen gleich wahrscheinlich sind und der Nutzer sein Ziel noch nicht kennt."
                    ],
                    "why": [
                        "Mehr Optionen erfordern mehr kognitive Verarbeitung und verlangsamen dadurch die Entscheidung.",
                        "Besonders relevant bei kurzen Listen wie Navigationen oder Aktionsbuttons. Weniger relevant bei langen, durchsuchbaren Listen wie Kontaktlisten."
                    ],
                    "whenItBreaks": [
                        "Alphabetische Listen: Der Nutzer kennt das Ziel bereits, daher gilt Hicks Gesetz nicht.",
                        "Vertraute Optionen erhöhen die Entscheidungszeit kaum."
                    ],
                    "inPractice": [
                        "Checkout: Ein primärer CTA statt fünf Zahlungsbuttons auf der Hauptseite. Weitere Optionen über progressive Offenlegung."
                    ],
                    "sources": [
                    {
                        "label": "Hick (1952) und Hyman (1953)",
                        "year": "1952-1953"
                    }]
                }
            },
            {
                "id": "jakobs-law",
                "title": "Jakobs Gesetz",
                "category": "ux-laws",
                "coverImage": "assets/visuals/jakobs-law.svg",
                "frames": [
                {
                    "image": "assets/visuals/jakobs-law.svg",
                    "caption": "Übertragung von Erwartungen"
                },
                {
                    "image": "assets/visuals/millers-law-right.png",
                    "caption": "Verwendung vertrauter Muster"
                }],
                "tldr": "Nutzer verbringen den Großteil ihrer Zeit auf anderen Websites. Sie erwarten, dass deine genauso funktioniert.",
                "videoUrls":
                {
                    "tiktok": "https://www.tiktok.com/@designparser/video/7588649092583099671",
                    "instagram": "https://www.instagram.com/p/DSyBpx9jeCH/"
                },
                "deepDive":
                {
                    "rule": [
                        "Nutzer übertragen Erwartungen von vertrauten Websites auf neue.",
                        "Standardmuster: Logo oben links, Navigation oben oder seitlich, Warenkorb oben rechts.",
                        "Abweichungen von Konventionen erzeugen eine Lernkurve und erhöhen die kognitive Belastung."
                    ],
                    "why": [
                        "Konventionelles Design erzeugt etwa 20–30 % höhere Nutzerbindung.",
                        "Ein Design, das 10 % besser ist, kann dennoch scheitern, wenn es während der Lernphase 20 % mehr Frustration verursacht.",
                        "Nutzer verlassen Websites, die anders funktionieren als erwartet."
                    ],
                    "whenItBreaks": [
                        "Nur innovieren, wenn die Verbesserung erheblich ist, nicht nur 10 %, und erst wenn sich das neue Muster als Standard etabliert.",
                        "Immer Plattformrichtlinien prüfen. iOS- und Android-Guidelines haben Vorrang vor allgemeinen Webmustern."
                    ],
                    "inPractice": [
                        "E-Commerce: Warenkorb immer oben rechts, Checkout-Button immer rechts. Keine kreativen Experimente mit der Position."
                    ],
                    "sources": [
                    {
                        "label": "Nielsen Norman Group",
                        "year": "2000"
                    }]
                }
            },
            {
                "id": "center-bias",
                "title": "Center Bias",
                "category": "ux-laws",
                "coverImage": "assets/visuals/cover-center-bias.svg",
                "frames": [
                {
                    "image": "assets/visuals/center-eyetracker.png",
                    "caption": "Eye-Tracking Heatmap"
                },
                {
                    "image": "assets/visuals/center-bias-wrong.svg",
                    "caption": "Falsches Beispiel"
                },
                {
                    "image": "assets/visuals/center-bias-right.svg",
                    "caption": "Richtiges Beispiel"
                }],
                "tldr": "Aufmerksamkeit wandert zum Zentrum. Das optische Zentrum liegt etwa 10 % über dem geometrischen Zentrum.",
                "videoUrls":
                {
                    "tiktok": "https://www.tiktok.com/@designparser/video/7605322323612290326",
                    "instagram": "https://www.instagram.com/reel/DUlt_3gDV9X/"
                },
                "deepDive":
                {
                    "rule": [
                        "Nutzer fixieren zunächst das Zentrum des Bildschirms, besonders beim ersten Blick.",
                        "Optisches Zentrum: etwa 10 % oberhalb des geometrischen Mittelpunkts.",
                        "F-Pattern für textlastige Seiten. Z-Pattern für visuelle Seiten. Center-First für Landingpages."
                    ],
                    "why": [
                        "Eye-Tracking zeigt, dass die erste Fixation etwa bei 50–60 % der Seitenbreite und 40 % der Seitenhöhe liegt.",
                        "Evolutionäre Ursache: Die Mitte des Blickfeldes hat die höchste Zapfendichte (Fovea).",
                        "Der geometrische Mittelpunkt wirkt optisch zu tief. Ein leichter Versatz nach oben wirkt ausgewogener."
                    ],
                    "whenItBreaks": [
                        "Bei sehr textreichen Interfaces dominiert das F-Pattern und der Center-Bias wird schwächer.",
                        "Auf mobilen Geräten ist der Center-Bias stärker wegen des kleineren Blickfelds."
                    ],
                    "inPractice": [
                        "Primärer CTA: vertikal bei etwa 45–48 % statt exakt 50 % positionieren."
                    ],
                    "keyNumbers": [
                    {
                        "value": "~10%",
                        "label": "Optisches Zentrum über geometrischem Zentrum"
                    }]
                }
            },
            {
                "id": "banner-blindness",
                "title": "Banner-Blindheit",
                "category": "ux-laws",
                "coverImage": "assets/visuals/banner-scan-pattern.svg",
                "frames": [
                {
                    "image": "assets/visuals/banner-scan-pattern.svg",
                    "caption": "Scanmuster"
                },
                {
                    "image": "assets/visuals/banner-ignore.svg",
                    "caption": "Ignoriertes Banner"
                },
                {
                    "image": "assets/visuals/banner-integrate.svg",
                    "caption": "Integriertes Banner"
                },
                {
                    "image": "assets/visuals/banner-match-design.svg",
                    "caption": "Banner im gleichen Design"
                }],
                "tldr": "Nutzer ignorieren alles, was wie Werbung aussieht – unabhängig vom tatsächlichen Inhalt.",
                "videoUrls":
                {
                    "tiktok": "https://www.tiktok.com/@designparser/video/7606070598590106902",
                    "instagram": "https://www.instagram.com/reel/DUq6b_ADWMz/"
                },
                "deepDive":
                {
                    "rule": [
                        "Nutzer ignorieren Elemente, die wie Werbung aussehen: Rechtecke oben oder rechts, blinkende oder sehr bunte Boxen.",
                        "Das gilt auch für echte UI-Elemente, wenn sie wie Werbung gestaltet sind.",
                        "Benachrichtigungsbanner, Hero-Slider und Ribbon-Elemente sind besonders betroffen."
                    ],
                    "why": [
                        "Kognitive Filterung: Webnutzung trainiert das Gehirn, Werbemuster auszublenden.",
                        "Eye-Tracking zeigt, dass rechte Spalten und obere Banner systematisch übersprungen werden.",
                        "Diese unterdrückte Wahrnehmung geschieht automatisch und kann nicht bewusst gesteuert werden."
                    ],
                    "whenItBreaks": [
                        "Leere Seiten ohne Kontext: bannerartige Elemente erhalten mehr Aufmerksamkeit.",
                        "In der ersten Sitzung zeigen neue Nutzer deutlich weniger Banner-Blindheit."
                    ],
                    "inPractice": [
                        "Wichtige Hinweise wie Cookie-Consent: in normale UI-Elemente integrieren statt klassischer Bannerform. Rechtecke oben links oder rechts für wichtige Infos vermeiden."
                    ],
                    "sources": [
                    {
                        "label": "Benway und Lane. Banner Blindness",
                        "year": "1998"
                    },
                    {
                        "label": "Nielsen Norman Group Eye-Tracking Studies",
                        "year": "2010"
                    }]
                }
            }]
        },
        "interaction":
        {
            "title": "INTERAKTION",
            "rules": [
            {
                "id": "touch-target",
                "title": "Touch-Zielgröße",
                "category": "interaction",
                "coverImage": "assets/visuals/cover-touch-target.svg",
                "frames": [
                {
                    "image": "assets/visuals/cover-touch-target.svg",
                    "caption": "Zielgrößen"
                }],
                "tldr": "WCAG 2.2 AA Minimum: 24×24px. Empfohlen: 44×44px (Apple/WCAG AAA) oder 48×48dp (Material). 8px Abstand zwischen Targets.",
                "videoUrls":
                {
                    "tiktok": "https://www.tiktok.com/@designparser/video/7591690656339201302",
                    "instagram": "https://www.instagram.com/p/DTHIOQLCM3W/"
                },
                "deepDive":
                {
                    "rule": [
                        "WCAG 2.2 AA (SC 2.5.8): Minimum 24×24px — oder 24px Abstand rundherum, wenn das Target kleiner ist.",
                        "WCAG 2.2 AAA (SC 2.5.5): 44×44px. Erweiterter Standard, identisch mit Apple HIG.",
                        "Material Design (Android): Minimum 48×48dp — nicht 44. iOS: Minimum 44×44pt.",
                        "Mindestens 8px Abstand zwischen benachbarten Targets laut WCAG. Abstand kann Größe ersetzen.",
                        "Padding zählt zur Trefferfläche. Ein 24px-Icon mit 10px Padding rundherum ergibt eine 44px-Hit-Zone."
                    ],
                    "why": [
                        "Durchschnittliche Fingerkuppe: 10–14 mm, etwa 28–40px bei Standard-DPI.",
                        "Targets unter 44px haben eine etwa 3-fach höhere Fehlerrate.",
                        "Touch-Präzision sinkt nach dem 40. Lebensjahr um etwa 15 % pro Jahrzehnt."
                    ],
                    "whenItBreaks": [
                        "Kontexte wie Autofahren oder Bewegung: Minimum 76×76dp laut Google Design for Driving.",
                        "Der Instagram-Like-Button funktioniert trotz kleiner Größe wegen seines großen Abstandspuffers, nicht wegen seiner Pixelgröße."
                    ],
                    "inPractice": [
                        "Icon-Button: 24px Icon + 10px Padding rundherum ergibt eine 44px Hit-Zone. Das ist der korrekte Ansatz."
                    ],
                    "keyNumbers": [
                    {
                        "value": "24×24px",
                        "label": "WCAG 2.2 AA Minimum (SC 2.5.8)"
                    },
                    {
                        "value": "44×44px",
                        "label": "WCAG 2.2 AAA + Apple HIG Minimum"
                    },
                    {
                        "value": "48×48dp",
                        "label": "Material Design (Android) Minimum"
                    },
                    {
                        "value": "8px",
                        "label": "Minimaler Abstand zwischen Targets"
                    }]
                }
            },
            {
                "id": "button-design",
                "title": "Button-Design",
                "category": "interaction",
                "coverImage": "assets/visuals/button-design.svg",
                "frames": [
                {
                    "image": "assets/visuals/button-design.svg",
                    "caption": "Button-Design"
                },
                {
                    "image": "assets/visuals/button-action.svg",
                    "caption": "Alternative und Hauptaktion"
                },
                {
                    "image": "assets/visuals/button-position.svg",
                    "caption": "Button-Positionierung"
                },
                {
                    "image": "assets/visuals/button-normal.svg",
                    "caption": "Normalzustand"
                },
                {
                    "image": "assets/visuals/button-active.svg",
                    "caption": "Aktivzustand"
                },
                {
                    "image": "assets/visuals/button-focus.svg",
                    "caption": "Fokuszustand"
                },
                {
                    "image": "assets/visuals/button-hover.svg",
                    "caption": "Hover-Zustand"
                },
                {
                    "image": "assets/visuals/button-disabled.svg",
                    "caption": "Deaktivierter Zustand"
                }],
                "tldr": "5 Zustände: normal, hover, focus, active, disabled. Jeder hat eine eigene Farbdefinition. Maximal ein Primary-Button pro Screen. Niemals nur Farbe als Signal verwenden.",
                "videoUrls":
                {
                    "tiktok": "https://www.tiktok.com/@designparser/video/7594923095039757590",
                    "instagram": "https://www.instagram.com/reel/DTdj46ojXaO/"
                },
                "deepDive":
                {
                    "rule": [
                        "Hierarchie: maximal 1 Primary + 1 Secondary pro Abschnitt. Niemals zwei gleichgewichtete CTAs.",
                        "Normal: gefüllter Button mit 4.5:1 Kontrast für das Label.",
                        "Hover: Hintergrund 10–15 % abdunkeln (bei dunklen Oberflächen aufhellen). cursor:pointer und 150ms Transition.",
                        "Focus: 2px Outline mit 2px Abstand zum Element. Kontrast mindestens 3:1 zum Hintergrund (WCAG 2.4.11). Outline nie entfernen.",
                        "Active/Pressed: Hintergrund 20–30 % dunkler als Normalzustand. Optional 1px Inset-Shadow oder 1px Translate nach unten.",
                        "Disabled: 40 % Opacity auf den gesamten Button. cursor:not-allowed. aria-disabled='true'."
                    ],
                    "why": [
                        "Focus-Ringe sind für Tastatur- und Switch-User notwendig. Entfernt man sie ohne Ersatz, schließt man etwa 7 % der Nutzer aus.",
                        "Hover-Abdunkelung von 10–15 % signalisiert Interaktivität ohne visuelle Störung.",
                        "40 % Opacity wird weltweit intuitiv als 'nicht verfügbar' verstanden.",
                        "Der Active-Zustand bestätigt, dass die Eingabe registriert wurde.",
                        "Loading-States verhindern doppelte Formularübermittlung bei asynchronen Aktionen."
                    ],
                    "whenItBreaks": [
                        "Dark Mode: Hover-Abdunkelung wird zu Aufhellung. Beide Varianten müssen definiert werden.",
                        "Destruktive Aktionen wie Löschen benötigen immer eine Bestätigung.",
                        "Icon-Buttons brauchen Tooltips (aria-label). Touch-Target weiterhin mindestens 44×44px.",
                        "Ghost-Buttons auf Bildern können verschwinden — Kontrast immer prüfen."
                    ],
                    "inPractice": [
                        "Primary: gefüllt, hoher Kontrast, volle Opacity.",
                        "Secondary: Outline oder Ghost-Style.",
                        "Tertiary: Text-Button ohne Hintergrund.",
                        "Focus-Ring: Markenfarbe oder Systemblau (#0066CC), 2px Offset.",
                        "Disabled: Normalzustand → Opacity 0.4."
                    ],
                    "keyNumbers": [
                    {
                        "value": "4.5:1",
                        "label": "Minimum Kontrast für Button-Label"
                    },
                    {
                        "value": "3:1",
                        "label": "Minimum Kontrast für Fokus-Ring"
                    },
                    {
                        "value": "10–15%",
                        "label": "Hover-Abdunkelung"
                    },
                    {
                        "value": "20–30%",
                        "label": "Active-Abdunkelung"
                    },
                    {
                        "value": "40%",
                        "label": "Disabled-Opacity"
                    },
                    {
                        "value": "2px / 2px",
                        "label": "Fokus-Ring Breite / Offset"
                    }]
                }
            },
            {
                "id": "link-design",
                "title": "Link-Design",
                "category": "interaction",
                "coverImage": "assets/visuals/cover-link-design.svg",
                "frames": [
                {
                    "image": "assets/visuals/link-button-difference.svg",
                    "caption": "Link führt irgendwohin, Button führt eine Aktion aus"
                },
                {
                    "image": "assets/visuals/link-normal.svg",
                    "caption": "Link Normalzustand"
                },
                {
                    "image": "assets/visuals/link-active.svg",
                    "caption": "Link Aktivzustand"
                },
                {
                    "image": "assets/visuals/link-focus.svg",
                    "caption": "Link Fokuszustand"
                },
                {
                    "image": "assets/visuals/link-hover.svg",
                    "caption": "Link Hoverzustand"
                },
                {
                    "image": "assets/visuals/link-visited.svg",
                    "caption": "Besuchter Link"
                },
                {
                    "image": "assets/visuals/links-self-explanatory.png",
                    "caption": "Linktext muss selbsterklärend sein"
                }],
                "tldr": "Unterstreichung ist das universelle Link-Signal. Ein Visited-Status ist erforderlich. Inline-Links sind nicht dasselbe wie eigenständige Links.",
                "videoUrls":
                {
                    "tiktok": "https://www.tiktok.com/@designparser/video/7595329775829372182",
                    "instagram": "https://www.instagram.com/reel/DTgbgtsDWtG/"
                },
                "deepDive":
                {
                    "rule": [
                        "Inline-Links: immer unterstrichen. Farbe allein reicht für Barrierefreiheit nicht.",
                        "Standalone-Links: Farbe + Hover-Underline ist akzeptabel.",
                        "Visited-State: eigene Farbe für bereits besuchte Links.",
                        "Externe Links: Icon-Marker + target=_blank mit Hinweis."
                    ],
                    "why": [
                        "WCAG SC 1.4.1: Farbe allein darf Links nicht unterscheiden.",
                        "Visited-State bietet Orientierung.",
                        "Links müssen auch ohne Farbe mit mindestens 3:1 Kontrast erkennbar sein."
                    ],
                    "whenItBreaks": [
                        "Button vs. Link: Buttons führen Aktionen aus, Links navigieren.",
                        "Zu viele Inline-Links erzeugen visuelles Rauschen."
                    ],
                    "inPractice": [
                        "text-decoration: underline im Fließtext setzen. Entfernen beim Hover ist falsch."
                    ],
                    "sources": [
                    {
                        "label": "WCAG 2.2 SC 1.4.1 Use of Color",
                        "year": "2023"
                    }]
                }
            }]
        },
        "icons":
        {
            "title": "ICONS",
            "rules": [
            {
                "id": "icon-bounding-box",
                "title": "Icon-Begrenzungsrahmen (Bounding Box)",
                "category": "icons",
                "coverImage": "assets/visuals/boundingbox-icon.svg",
                "frames": [
                {
                    "image": "assets/visuals/boundingbox-icon.svg",
                    "caption": "Mit Bounding Box"
                },
                {
                    "image": "assets/visuals/no-boundingbox.svg",
                    "caption": "Ohne Bounding Box"
                },
                {
                    "image": "assets/visuals/square-heavier.svg",
                    "caption": "Quadrat wirkt schwerer"
                },
                {
                    "image": "assets/visuals/blur-test.svg",
                    "caption": "Blur-Test"
                },
                {
                    "image": "assets/visuals/trim.svg",
                    "caption": "Padding variiert je nach Form"
                },
                {
                    "image": "assets/visuals/icon-scale.svg",
                    "caption": "Icon-Skalierung"
                }],
                "tldr": "Einheitliche Bounding Box für alle Icons. Das Padding variiert je nach optischem Gewicht (Kreise benötigen mehr als Quadrate).",
                "videoUrls":
                {
                    "tiktok": "https://www.tiktok.com/@designparser/video/7602385832653131030",
                    "instagram": "https://www.instagram.com/reel/DURV7BBDUBj/"
                },
                "deepDive":
                {
                    "rule": [
                        "Feste Bounding Box (Rahmen) für alle Icons eines Sets: 16, 20, 24, 32 oder 48px.",
                        "Standard-Padding: 16px Rahmen = 1px, 24px Rahmen = 2px, 48px Rahmen = 4px.",
                        "Aktiver Bereich = Rahmen − Padding auf allen Seiten."
                    ],
                    "why": [
                        "Ohne festen Rahmen werden die Abstände zwischen Icons in unterschiedlichen Kontexten inkonsistent.",
                        "Optisches Gewicht: Kreise benötigen mehr Fläche als Quadrate, da sie mehr negativen Raum enthalten.",
                        "Blur-Test: Überprüfe die optische Balance, indem du kontrollierst, ob alle Icons verschwommen gleich schwer wirken."
                    ],
                    "whenItBreaks": [
                        "Mathematisch gleich bedeutet nicht optisch gleich. Visuelle Anpassungen sind immer notwendig.",
                        "Zu strikte Keyline-Vorgaben verhindern notwendige optische Korrekturen."
                    ],
                    "inPractice": [
                        "Blur-Test: Wende auf alle Icons einen 2px Blur an. Gleiche visuelle Masse bestätigt die korrekte optische Balance."
                    ]
                }
            },
            {
                "id": "icon-alignment",
                "title": "Icon-Ausrichtung",
                "category": "icons",
                "coverImage": "assets/visuals/icon-align-offset.svg",
                "frames": [
                {
                    "image": "assets/visuals/icon-align-offset.svg",
                    "caption": "Icons benötigen einen vertikalen Offset"
                },
                {
                    "image": "assets/visuals/align-capheight.svg",
                    "caption": "An der Versalhöhe ausrichten, nicht an der Grundlinie"
                },
                {
                    "image": "assets/visuals/flexbox.svg",
                    "caption": "Flexbox Align-Items"
                }],
                "tldr": "Optische Ausrichtung ist nicht gleich mathematische Ausrichtung. Kreisförmige Icons benötigen einen kleinen Versatz nach oben.",
                "videoUrls":
                {
                    "tiktok": "https://www.tiktok.com/@designparser/video/7603843091379883286",
                    "instagram": "https://www.instagram.com/reel/DUbdEXgjRc5/"
                },
                "deepDive":
                {
                    "rule": [
                        "Icons an der Grundlinie (Baseline) des angrenzenden Textes ausrichten, nicht an der Versalhöhe.",
                        "Kreisförmige Icons benötigen einen kleinen Versatz nach oben von etwa 1–2px für optische Balance.",
                        "Bei Inline-Text ist vertical-align: middle häufig nicht ausreichend. Eine manuelle optische Anpassung ist nötig.",
                        "Icon-Größe im Verhältnis zum Text: an der x-Höhe oder Versalhöhe der Schrift orientieren."
                    ],
                    "why": [
                        "Das optische Zentrum entspricht nicht dem geometrischen Zentrum bei asymmetrischen Formen.",
                        "Ein Kreis in derselben Bounding Box wie ein Quadrat wirkt optisch tiefer.",
                        "Text-Grundlinie und untere Iconkante besitzen unterschiedliche visuelle Schwerpunkte."
                    ],
                    "whenItBreaks": [
                        "Sehr komplexe Iconformen: hier hilft nur Testen, es gibt keine feste Formel.",
                        "Unterschiedliche Icongrößen neben derselben Schriftgröße müssen jeweils separat getestet werden."
                    ],
                    "inPractice": [
                        "Button mit Icon: display:flex + align-items:center + manueller 1px-Versatz nach oben für runde Icons."
                    ]
                }
            }]
        },
        "visual":
        {
            "title": "VISUELLE WAHRNEHMUNG",
            "rules": [
            {
                "id": "visual-weight",
                "title": "Visuelles Gewicht",
                "category": "visual",
                "coverImage": "assets/visuals/weight-size.svg",
                "frames": [
                {
                    "image": "assets/visuals/weight-size.svg",
                    "caption": "Größe"
                },
                {
                    "image": "assets/visuals/weight-saturation.svg",
                    "caption": "Sättigung"
                },
                {
                    "image": "assets/visuals/weight-color.svg",
                    "caption": "Farbe"
                },
                {
                    "image": "assets/visuals/weight-isolation.svg",
                    "caption": "Isolation"
                },
                {
                    "image": "assets/visuals/weight-shape.svg",
                    "caption": "Form"
                },
                {
                    "image": "assets/visuals/weight-lightness.svg",
                    "caption": "Helligkeit"
                }],
                "tldr": "Sechs Faktoren bestimmen das visuelle Gewicht: Größe, Sättigung, Helligkeitskontrast, Position, Isolation und Form.",
                "videoUrls":
                {
                    "tiktok": "https://www.tiktok.com/@designparser/video/7607920218022661398",
                    "instagram": "https://www.instagram.com/reel/DU3vm-UjR-B/"
                },
                "deepDive":
                {
                    "rule": [
                        "Sechs Faktoren: Größe, Sättigung, Helligkeitskontrast, Position (vertikal stärker als horizontal), Isolation (Whitespace), Form (kompakte Formen wirken stärker als unregelmäßige).",
                        "Faktoren sind kumulativ. Werden alle sechs in eine Richtung kombiniert, entsteht ein eindeutiger Fokuspunkt.",
                        "Präattentive Verarbeitung (unter 200 ms): Farbe, Größe und Helligkeit werden parallel verarbeitet."
                    ],
                    "why": [
                        "Eye-Tracking (MDPI 2026, n=30, 120Hz): Allein die Hintergrundfarbe verschiebt die erste Fixation um den Faktor 2,7.",
                        "Post-attentiv: semantisches Gewicht wie Gesichter zieht den Blick unabhängig von der Pixelgröße an.",
                        "Arnheims These, dass die rechte Seite schwerer wirkt, wurde empirisch von Winner et al. 1987 widerlegt."
                    ],
                    "whenItBreaks": [
                        "Helmholtz-Kohlrausch-Effekt: gesättigte Farben wie Blau oder Magenta wirken heller als ihre tatsächliche Luminanz vermuten lässt.",
                        "Kulturelle Unterschiede: Links-Rechts-Gewichtung hängt von der Leserichtung ab."
                    ],
                    "inPractice": [
                        "CTA: groß, gesättigt, hoher Kontrast, oben zentriert, isoliert, kompakte Form. Alle sechs Faktoren zeigen in dieselbe Richtung."
                    ],
                    "keyNumbers": [
                    {
                        "value": "< 200ms",
                        "label": "Zeitfenster der präattentiven Verarbeitung"
                    }],
                    "sources": [
                    {
                        "label": "Arnheim. Art and Visual Perception",
                        "year": "1954"
                    },
                    {
                        "label": "MDPI Symmetry (n=30, 120Hz Eye-Tracking)",
                        "year": "2026"
                    },
                    {
                        "label": "Winner et al.",
                        "year": "1987"
                    }]
                }
            },
            {
                "id": "rule-of-thirds",
                "title": "Drittelregel",
                "category": "visual",
                "coverImage": "assets/visuals/rule-of-thirds.svg",
                "frames": [
                {
                    "image": "assets/visuals/rule-of-thirds.svg",
                    "caption": "3×3 Raster: 4 Kraftpunkte bei 33% / 67%"
                },
                {
                    "image": "assets/visuals/rule-of-thirds-weight.svg",
                    "caption": "Kraftpunkte sind nicht gleich stark"
                },
                {
                    "image": "assets/visuals/rule-of-thirds-example.png",
                    "caption": "Einzelobjekte: Zentrierung funktioniert oft besser als RoT"
                }],
                "tldr": "Das Bild horizontal und vertikal in Drittel teilen. Wichtige Elemente an den vier Schnittpunkten platzieren.\nDie Regel verhindert schwache zentrierte Kompositionen – garantiert aber keine starken.",
                "videoUrls":
                {
                    "tiktok": "https://www.tiktok.com/@designparser/video/7610500582872190230",
                    "instagram": "https://www.instagram.com/reel/DVJpP8eipki/"
                },
                "deepDive":
                {
                    "rule": [
                        "Zwei horizontale und zwei vertikale Linien teilen das Bild bei 33,33% und 66,67%. Ihre Schnittpunkte sind die Kraftpunkte.",
                        "Fokuselemente (CTAs, Motive, Headlines) an oder nahe dieser Punkte platzieren, nicht exakt im Zentrum.",
                        "Die Regel ist eine Heuristik, kein Gesetz. Sie hat keine normative Grundlage in WCAG, ISO oder Accessibility-Standards.",
                        "Die Drittelregel ist eine Annäherung an den Goldenen Schnitt (33,3% vs. 38,2%)."
                    ],
                    "why": [
                        "Zentrierte Platzierung erzeugt visuelle Ruhe. Off-Center-Platzierung erzeugt Spannung und Bewegung.",
                        "Bei LTR-Layouts erhält oben links oft zuerst Aufmerksamkeit.",
                        "Amirshahi et al. (2014): nur schwache Korrelation zwischen Drittelregel-Score und ästhetischer Qualität."
                    ],
                    "whenItBreaks": [
                        "Einzelne isolierte Objekte: Studien zeigen klare Präferenz für zentrierte Platzierung.",
                        "Vertikale Videos (9:16): zentrale Platzierung funktioniert besser auf Mobilgeräten.",
                        "Dateninterfaces (Dashboards, Tabellen, Formulare): Lesbarkeit hat Vorrang vor Komposition.",
                        "Symmetrische Motive (Logos, Produkte, Porträts): Zentrierung ist oft stärker."
                    ],
                    "inPractice": [
                        "Hero-Section: Headline am oberen linken Kraftpunkt, CTA nahe dem unteren linken Kraftpunkt.",
                        "CSS: left: 33.33% und top: 33.33% für absolut positionierte Elemente."
                    ],
                    "keyNumbers": [
                    {
                        "value": "33.33% / 66.67%",
                        "label": "Rasterlinienpositionen"
                    },
                    {
                        "value": "4",
                        "label": "Kraftpunkte"
                    },
                    {
                        "value": "~38.2%",
                        "label": "Goldener Schnitt zum Vergleich"
                    }],
                    "sources": [
                    {
                        "label": "Smith. Remarks on Rural Scenery",
                        "year": "1797"
                    },
                    {
                        "label": "Amirshahi et al. Art and Perception",
                        "year": "2014"
                    },
                    {
                        "label": "Hoh, Zhang, Dodgson. SIGGRAPH Asia",
                        "year": "2023"
                    },
                    {
                        "label": "Tatler. Journal of Vision — Central Fixation Bias",
                        "year": "2007"
                    }]
                }
            },
            {
                "id": "optical-center",
                "title": "Optisches Zentrum",
                "category": "visual",
                "coverImage": "assets/visuals/optical-center-cover.png",
                "frames": [
                {
                    "image": "assets/visuals/optical-center2.png",
                    "caption": "Versatz 2–6%"
                },
                {
                    "image": "assets/visuals/optical-center-formula.png",
                    "caption": "Formel"
                }],
                "tldr": "Das visuelle Zentrum eines Rechtecks liegt etwa 2–6% über seinem geometrischen Mittelpunkt. CSS `align-items:center` positioniert bei 50%, was das Auge als zu niedrig wahrnimmt.",
                "videoUrls":
                {
                    "tiktok": "https://www.tiktok.com/@designparser/video/7613432532129860886",
                    "instagram": "https://www.instagram.com/reel/DVqxz6GigrQ/"
                },
                "deepDive":
                {
                    "rule": [
                        "Das optische Zentrum ist der Punkt, an dem sich der Blick ohne starke visuelle Reize im Rechteck stabilisiert.",
                        "In der Druckgestaltung liegt es traditionell bei etwa 44–47% von oben.",
                        "Der Effekt gilt vor allem für einzelne Fokuselemente."
                    ],
                    "why": [
                        "Das visuelle System überschätzt vertikale Distanzen im oberen Sichtfeld (Horizontal-Vertikal-Illusion).",
                        "Locher, Stappers und Overbeeke (1999): sowohl Laien als auch Designer erkennen überzufällig korrekte Kompositionen.",
                        "Apple HIG, Material Design und IBM Carbon dokumentieren optische Zentrierung für Icons."
                    ],
                    "whenItBreaks": [
                        "Starke visuelle Reize (Gesichter, Bewegung, Kontrast) überlagern das optische Zentrum.",
                        "Der Wert 44% stammt aus Druckdesign und ist nicht exakt für Screens validiert."
                    ],
                    "inPractice": [
                        "Hero-Element: `transform: translateY(-4%)`, um ein zentriertes Element optisch anzuheben.",
                        "Play-Icons benötigen oft `translateX(1–3px)`, da ihr Schwerpunkt nicht im geometrischen Zentrum liegt."
                    ],
                    "keyNumbers": [
                    {
                        "value": "~44%",
                        "label": "Optisches Zentrum von oben gemessen"
                    },
                    {
                        "value": "2–6%",
                        "label": "Typischer Versatz nach oben"
                    }],
                    "sources": [
                    {
                        "label": "Arnheim. Art and Visual Perception",
                        "year": "1974"
                    },
                    {
                        "label": "Locher, Stappers, Overbeeke. Acta Psychologica",
                        "year": "1999"
                    },
                    {
                        "label": "Stacey. Horizontal-Vertical Illusion",
                        "year": "1969"
                    },
                    {
                        "label": "Displays (ScienceDirect) Icon Alignment Research",
                        "year": "2023"
                    }]
                }
            }]
        }
    }
}