Stileinstellungen

Textfarbe

Kernpunkt:
Textfarbe und Alpha steuern die Lesbarkeit direkt.

Auswirkung:
Schwacher Kontrast reduziert die Klickwahrscheinlichkeit, auch bei gutem Design.

Praxis-Tipp:
Kontrast nach WCAG prüfen (normaler Text mind. 4.5:1, großer Text mind. 3:1).

Einstellungen

• Textfarbe: Setzt die Textfarbe.
• Alpha (Deckkraft): Transparenz von 0 bis 1.
• Responsiv: Geräteabhängige Werte für Desktop/Tablet/Mobile.

Hover-Textfarbe kann separat gesetzt werden. Farbwechsel folgen der eingestellten Übergang-Dauer.

Textschatten

Kernpunkt:
Verbessert Lesbarkeit auf unruhigen Hintergründen.

Auswirkung:
Stärke und Richtung des Schattens beeinflussen Lesbarkeit und Look.

Praxis-Tipp:
Mit kleinem Blur und niedriger Alpha starten, dann schrittweise erhöhen.

Einstellungen

• Textschatten (ON/OFF)
• Farbe
• Blur + Einheit
• Horizontal + Einheit
• Vertical + Einheit
• Responsiv

Rahmen

Kernpunkt:
Definiert Konturfarbe, -breite und -stil.

Auswirkung:
Verbessert die Erkennbarkeit als klickbares Element.

Praxis-Tipp:
Mit 1px beginnen; zu starke Rahmen verdrängen den Text.

Einstellungen

• Rahmen (ON/OFF)
• Farbe + Alpha
• Breite
• Style (none / solid / dashed / dotted)
• Box Sizing (border-box / content-box)
• Responsiv

Mit border-box bleibt das Layout stabil, weil die Rahmenbreite in die Elementgröße eingerechnet wird.

Eckenradius

Kernpunkt:
Formt den visuellen Charakter des Knopfs (streng vs. weich).

Auswirkung:
Die wahrgenommene Rundung hängt vom Verhältnis aus Radius und Knopfhöhe ab.

Praxis-Tipp:
Meist wirken 20-35% der Knopfhöhe als Radius ausgewogen.

Einstellungen

• Individuelle Einstellungen verwenden
• Einheitlicher Wert: Eckenradius + Einheit
• Einzelwerte: Oben links / Oben rechts / Unten rechts / Unten links
• Einheiten: px / % / em / rem
• Responsiv

Innerer Schatten

Kernpunkt:
Erzeugt einen eingedrückten Effekt.

Auswirkung:
Gibt flachen Designs mehr Tiefe.

Praxis-Tipp:
Zurückhaltend einsetzen, damit der Look modern bleibt.

Einstellungen

• Innerer Schatten (ON/OFF)
• Farbe
• Blur
• Horizontal
• Vertical
• Spread
• Responsiv

Schatten

Kernpunkt:
Hebt den Knopf vom Hintergrund ab.

Auswirkung:
Richtung und Abstand bestimmen die wahrgenommene Tiefe.

Praxis-Tipp:
Auf Mobile oft etwas schwächer einstellen als auf Desktop.

Einstellungen

• Shadow (ON/OFF)
• Farbe + Alpha
• Blur
• Horizontal
• Vertical
• Spread
• Responsiv

Deckkraft

Kernpunkt:
Regelt Transparenz und Mischverhalten des gesamten Elements.

Auswirkung:
Schon kleine Änderungen können die Gesamtwirkung stark verschieben.

Praxis-Tipp:
Erst Kontrast von Text/Hintergrund sauber einstellen, dann Deckkraft feinjustieren.

Einstellungen

• Deckkraft
• Mischmodus (normal / multiply / screen / overlay etc.)
• Responsiv

Niedrige Deckkraft wirkt auf alle Kindelemente (Text, Icons). Für nur-hintergrundige Transparenz besser Alpha im Background-Panel anpassen.

Übergang

Kernpunkt:
Definiert die Wechselgeschwindigkeit von Normal zu Hover.

Auswirkung:
Zu schnell wirkt unruhig, zu langsam träge.

Praxis-Tipp:
Als Startwert 200-350ms verwenden und nur bei Bedarf Delay hinzufügen.

Einstellungen

• Dauer (ms)
• Verzögerung (ms)
• Beschleunigung (ease / ease-in / ease-out / ease-in-out / linear / Benutzerdefiniert)
• Benutzerdefinierter Wert (cubic-bezier)
• Zurücksetzen

Diese Übergang greift für Stil-Eigenschaften wie Textfarbe, Rahmen, Radius, Schatten und Deckkraft. Hintergrund- und Icon-Übergang werden in den jeweiligen Panels separat gesteuert.