Überschrift 2
Fetter Text Normaler Text.
Fehler/ Nicht gut: Zusammenfassung
Detail 1
Detail 2
Detail 3
Absatz-Text.
Warnung/ Hinweis: Zusammenfassung
Detail 1
Detail 2
Detail 3
Absatz-Text.
Hier kommen alle verfügbaren Gestaltungs-Elemente:
Buttons & Call-to-Actions
Button Blue (Primary) Button Green (Success) Button Gray (Neutral) Button Red (Danger)
Insight Boxes
Success Box: Für positive Nachrichten, Erfolge und Bestätigungen
Error Box: Für Probleme, Fehler und Warnungen
Warning Box: Für Hinweise und wichtige Informationen
Primary Box: Für Hauptinformationen und Zusammenfassungen
Klappbare Insight Boxes
Success mit Details (klicken zum Öffnen)
Detail 1: Weitere Informationen
Detail 2: Zusätzliche Erklärungen
Mit Icon und Flexbox-Layout
Komplexere Layouts mit SVG-Icons für professionelle Darstellung
Textformatierung
Normaler Text mit fetten Hervorhebungen und kursiven Betonungen
Lead-Paragraph für wichtige Einleitungstexte
Text mit durchgestrichenen Bereichen für Vergleiche
Bilder & Logo
Bild einbinden:
Logo verwenden: oder
Layout-Container
.content: Haupt-Content-Wrapper (wird hier verwendet)
.container: Generischer Container
.text-center: Zentrierte Ausrichtung
.text-left: Linksbündige Ausrichtung
Formulare & Inputs
Nachrichten & Status
Spezial-Elemente
Article Cards: .article-card, .article-content, .article-marker
Level Cards: .level-card, .level-badge, .active-level, .locked
Animationen: .animated-text-container, .loading-spinner
Status: .active, .disabled, .success-confirmation
Utility-Klassen
Lead-Text für wichtige Einleitungen
Text mit durchgestrichenen Bereichen
Besonders fette Überschriften
Static Box: Für unveränderliche Informationen ohne Interaktion
Farbschema
Blau (btn-blue): Primäre Aktionen, Navigation
Grün (btn-green): Erfolg, Anmeldung, Bestätigung
Grau (btn-gray): Neutrale, sekundäre Aktionen
Rot (btn-red): Löschungen, Fehler, Warnungen