Styleguide — Welle 1

Komponenten-Showcase nach dem Aufbau des CSS-Fundaments. Alle Bausteine nutzen CSS-Custom-Properties als Theming-Hebel. EDiese Seite wird in Welle 2/8 weiter ausgebaut. Aktuell zeigt sie nur die Welle-1-Bausteine: Typografie, Buttons, Cards, Tags, Forms, Modal, Header, Footer. Das Design-Tool ist aktuell deaktiviert (Flag $enableDesignTool=false in includes/header.php).

Typografie

Alle Überschriften und Body-Text werden ausschließlich über Tag-Selektoren gesteuert. Keine .h1-title-Klassen.

H1 — 2,5 rem, Marineblau

H2 — 1,75 rem, Marineblau

H3 — 1,25 rem, Marineblau

H4 — 1,1 rem

Fließtext mit Link. Nunito Sans als Default, Line-Height 1,6, Farbe #334155.

Kleiner Text (.text-small)

Sehr kleiner Text (.text-tiny)

Buttons

Vier Design-Tool-steuerbare Varianten plus die semantischen Klassen .btn-primary, .btn-accent, .btn-outline.

Cards

Standard-Card-Komponente. Steuerbar über --card-bg, --card-radius, --card-font-size, --card-title-size.

Beispiel-Card

Hier steht der Beschreibungstext. Cards heben sich beim Hovern leicht ab und werden über CSS-Variablen gestaltet.

Zweite Card

Mit Tag-Beispielen darunter.

Berlin Top-Benefit 4-Tage-Woche

Formulare

Sauber gelabelte Eingabefelder, sichtbarer Fokus-Indikator (R13).

Modal

Das Login-Modal ist über den Header (Login-Button) und über die folgende Schaltfläche erreichbar. ESC schließt es, Klick außerhalb auch.

Mockup-Helfer

Page-Transition-Overlay: Beim Klick auf einen internen Link fadest die Seite kurz aus. Failsafe nach 600 ms.
Mockup-Nav-Floater (oben links): Styleguide / Entwickler / Super-Admin / Kunden-Admin / Design-Tool / Demo-Mode.
Design-Tool: aktuell deaktiviert. Code-Architektur (CSS-Variablen, Selektor-Map, Markup, Logik) bleibt erhalten — Einschalten via $enableDesignTool = true;.
Demo-Mode: Toggle im Floater oder URL-Parameter ?demo=1. Versteckt dev-notes und reduziert den Floater. EIm Demo-Mode unsichtbar — der „E"-Marker ist ein Beispiel.