CSS-Layout-Debugger

Das Problem

CSS-Layout-Fehler sind visuell offensichtlich, aber logisch raetselhaft. Ein Element laeuft ueber seinen Container, ein Modal erscheint hinter einer Sidebar, Flexbox-Elemente weigern sich umzubrechen, Grid-Elemente kollabieren auf Null-Hoehe, oder das Layout bricht bei genau 768px. Die Diskrepanz zwischen CSS-Eigenschaften und dem sichtbaren Ergebnis macht CSS-Debugging einzigartig frustrierend.

Der Prompt

Du bist ein CSS-Layout-Debugging-Experte. Diagnostiziere und behebe diesen visuellen Fehler:

ERWARTETES LAYOUT: [beschreibe das Soll-Aussehen oder Mockup-URL]
TATSAECHLICHES LAYOUT: [beschreibe den Fehler — Overflow, Fehlausrichtung, falsche Groesse, falsche Stapelreihenfolge]
VIEWPORT: [Desktop/Tablet/Mobile, spezifische Breite falls relevant]
BROWSER: [Chrome/Safari/Firefox + Version bei Cross-Browser-Problem]

HTML-STRUKTUR:
[relevantes HTML einfuegen — Eltern- und Geschwister-Elemente einbeziehen]

ANGEWANDTES CSS:
[relevantes CSS einfuegen — Eltern-Styles, Element-Styles, Media Queries]

Layout diagnostizieren:
1. **Box-Model-Audit**: Width, Height, Padding, Margin, Border, Box-Sizing fuer Element UND Elternelement pruefen.
2. **Containing-Block-Analyse**: Was ist der Containing Block des Elements? Ist er wie erwartet?
3. **Stacking-Context-Karte**: Bei Z-Index-Problemen jeden Stacking Context vom Root zum Element kartieren.
4. **Flex/Grid-Diagnose**: Flex-Basis, Flex-Shrink, Min-Width, Grid-Template-Berechnungen pruefen.
5. **Responsive-Breakpoint-Check**: Bei der gemeldeten Viewport-Breite — welche Media Queries sind aktiv? Konflikte?
6. **Der Fix**: Minimale CSS-Aenderung liefern — erklaeren WARUM es funktioniert, nicht nur was zu aendern ist.

Beispiel-Ausgabe

Box-Model: Elternelement hat padding: 20px, Kind hat width: 100% + padding: 16px — Gesamt ueberschreitet Elternelement um 32px
Ursache: box-sizing ist content-box (Standard) beim Kind — Padding addiert sich zur Breite
Fix: box-sizing: border-box beim Kind-Element hinzufuegen
Warum: border-box schliesst Padding und Border in die deklarierte Breite ein, sodass 100% tatsaechlich "in Elternelement passen" bedeutet

Wann verwenden

Diesen Skill einsetzen bei Overflow, falschem Stacking, kollabierenden Elementen oder Breakpoint-Fehlern. Ideal fuer Flexbox-Ausrichtungsprobleme, Grid-Layout-Fehler, Z-Index-Konflikte und responsive Breakpoint-Bugs.

Profi-Tipps

• Browser-DevTools-Highlighting nutzen — ueber Elemente hovern, um das Box-Model visuell zu sehen. Zeigt Sizing-Probleme sofort.
• Der outline: 1px solid red-Trick — Outlines (nicht Borders, die das Layout beeinflussen) zu allen Elementen hinzufuegen, um die tatsaechlichen Bounding-Boxes sichtbar zu machen.
• min-width: auto bei Flex-Items pruefen — dieser Standard verhindert das Schrumpfen unter die Inhaltsgroesse. min-width: 0 setzen fuer korrektes Schrumpfen.
• z-index funktioniert nur mit positionierten Elementen — z-index hat keinen Effekt bei position: static. Ausserdem begrenzt der Stacking Context des Elternelements die z-index-Werte aller Kinder.