Font-Family: var(--font-sans) • Copy: 18px (--fs-p) • Line-Height: var(--lh-normal)

Das ist ein Beispiel-Fließtext in 18px, wie er auf Finalarm üblich ist. Kurze, klare Sätze, saubere Absätze, guter Lesefluss.

Primary = CTA-Gradient. Secondary = Outline mit WP-Var --wp--preset--color--custom-purple-pink. Ghost = text-only.

Tabellen sind clean, ruhig und gut lesbar: keine vertikalen Lines, großzügige Row-Padding, klare Header, dezente Divider. Responsive immer via .table-scroll.

Einsatz: Kreditkarten-Detailseiten (Gebühren, Kosten, Konditionen). Ruhiger 2-Spalten-Look ohne Header, starke Typo-Hierarchie.

Die Card ist der Standard-Container im Styleguide (Panels, Boxen, Module).

Standard: border: 1px solid var(--c-border) • Accent: .has-accent-2-border-color

Hintergrund (Fallback): bg-g-4 / --g-4 • Radius: 20px

Header-Texte werden immer innerhalb von .header-kv gesetzt.
Der Abstand zwischen H1 und Subheadline entspricht einem wp-block-spacer height="50px".

Bildstil basiert auf einem Flat-Design Illustration System: klare Formen, wenige Farben (Schwarz/Anthrazit + Purple-Akzente), viel Weißraum, minimale Schattierung.

Ausnahme: Bei Kreditkarten-Assets dürfen echte Kartenbilder / Produktshots verwendet werden. Alles andere bleibt im Flat-Illustrationsstil (keine 3D-Elemente).

Flat Illustration Class img-card

UI-Illustration Class img-preview soft

Kreditkarte Class img-card has-accent-2-border-color

Tipp: Illustrationen idealerweise als SVG. Falls PNG: 2× Export, transparenter Hintergrund.

Diese Section dokumentiert die Responsive-Logik von Finalarm.de mit Fokus auf Header-Bilder und CTA-Module. Ziel ist ein konsistenter Above-the-Fold-Aufbau: Inhalte bleiben priorisiert, Bilder unterstützen.

Desktop: Bild 45% (rechts), Text 55%. Mobile: Bild unter Titel/Subline, 100% Breite.

Desktop: Bild 30%, Text 70%. Mobile: Bild/Asset wird versteckt, um Content mehr Raum zu geben.

Desktop: Bildgröße flexibel (bis 50%). Mobile: Bild 100% oberhalb des Textes (Aufmerksamkeit).

Iconset: Font Awesome (Free)
Default Icons: #BC78F6 (.icon-accent) • Leistungs-Icons: #7C3AED (.icon-service) • Muted: .icon-muted

Animationen werden sparsam eingesetzt, um Key-Elemente hervorzuheben (Hero/Intro, USPs, wichtige Teaser). Fokus: ruhig, premium, gut lesbar.

.fadein ist die universelle Standard-Animation für Inhalte. Sie sorgt für ein sanftes Einfaden beim Scrollen, ohne Aufmerksamkeit zu stehlen.

Für Hero/Top-Content der Startseite: sanftes Fade + leichte Bewegung von links.

Finalarm – Portal für Finanzen

Dein unabhängiges Portal für fundierte Finanzentscheidungen – alles verständlich erklärt.

Für Kategorien/Content-Sektionen: Animation startet erst, wenn die Sektion im Viewport ist.

Kreditkarten vergleichen

Filtere nach Gebühren, Vorteilen und Einsatz – und finde die passende Karte für deinen Alltag.

Für ausgewählte visuelle Assets (Illustrationen, Teaser-Images, Feature-Cards). Subtil, nicht auf Buttons/Controls.

Hover: Element bewegt sich leicht entgegen der Mausbewegung • Mouseleave: soft zurück in Ausgangsposition.

Class hover-parallax Beispiel img.hover-parallax

:root{

  /* =========================
     TYPOGRAPHY
  ========================== */

  --font-sans: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;

  --fs-h1: 52px;
  --fs-h2: 36px;
  --fs-h3: 28px;
  --fs-h4: 22px;
  --fs-h5: 18px;
  --fs-h6: 16px;
  --fs-p: 18px;
  --fs-small: 14px;

  --lh-tight: 1.15;
  --lh-normal: 1.55;

    --headline-margin-l: 36px;
    --headline-margin-m: 30px;
    --headline-margin-s: 24px;

  /* =========================
     COLORS
  ========================== */

  /* Brand */
  --c-main-1: #BC78F6;
  --c-main-2: #7C3AED;

  /* Neutrals */
  --c-text: #1f2328;
  --c-muted: #6b7485;
  --c-grey: #f7f7f8;
  --c-border: #e9e9e9;
  --c-surface: #ffffff;

  /* WordPress Presets */
  --wp--preset--color--custom-purple-pink: var(--c-main-1);
  --wp--preset--color--accent-2: var(--c-main-2);


  /* =========================
     GRADIENTS
  ========================== */

  /* CTA / Primary */
  --g-1: linear-gradient(
    105deg,
    rgb(207, 136, 251) 0%,
    rgb(210, 183, 243) 100%
  );

  /* Soft Sections */
  --g-2: linear-gradient(
    135deg,
    rgb(212, 203, 240) 0%,
    rgb(229, 191, 252) 100%
  );

  /* Footer / Darker */
  --g-3: linear-gradient(
    276deg,
    rgb(162, 153, 190) 12%,
    rgb(189, 151, 212) 89%
  );

  /* Header / Fallback */
  --g-4: linear-gradient(
    135deg,
    rgb(214 180 255) 0%,
    #ffffff 40%,
    #ffffff 100%
  );


  /* =========================
     RADIUS
  ========================== */

  --r-md: 12px;
  --r-lg: 20px;
  --r-pill: 9999px;


  /* =========================
     SHADOWS
  ========================== */

  --shadow-sm: 0 6px 18px rgba(12, 20, 33, 0.08);


  /* =========================
     LAYOUT
  ========================== */

  --container: 1100px;
  --gap: 18px;


  /* =========================
     ICONS
  ========================== */

  --c-icon-default: var(--c-main-1);
  --c-icon-service: var(--c-main-2);
  --c-icon-muted: rgba(31, 35, 40, 0.55);

  --icon-xxs: 12px;
  --icon-xs: 14px;
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;


  /* =========================
     IMAGERY
  ========================== */

  --r-img: 16px;
  --img-line: 2px;
  --img-shadow: 0 10px 30px rgba(31, 35, 40, 0.08);
  --img-bg: #ffffff;
  --img-bg-soft: var(--c-grey);


  /* =========================
     ANIMATION
  ========================== */

  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 0.25s;
  --dur-normal: 0.45s;
  --dur-slow: 0.7s;

}