🔒 Intern · Nicht indexierbar

Interne Dokumentation & Styleguide

Diese Seite dokumentiert die Website-Struktur, das Design-System und die Modul-Anwendungen von umantis.com. Sie ist passwortgeschützt und via robots-Meta als noindex markiert, damit sie nicht in Suchmaschinen erscheint.

1. Website-Struktur

Die Navigation folgt dem Mega-Menu (inc/mega-menu-data.php). Jede Page hat einen eindeutigen Slug, WP-ID und gehört zu einem Bereich. Glossar-Seiten sind hier ausgeblendet (eigene CPT-ähnliche Logik).

Startseite

Produkte – Die HR-Suite

Produkte – Recruiting

Produkte – People

Produkte – Operations

Produkte – Insights

Lösungen

Unternehmen

News & Resources

Kontakt & Konversion

Rechtliches

WordPress-Einstellungen

2. Typografie

Zwei lokal gehostete Web-Fonts (DSGVO-konform, font-display:swap).

Heading-Skala

3. Farbsystem

1:1 aus dem Umantis CI/CD (Frontify, Stand 09.01.2024). Alle Werte sind als CSS-Variablen in :root hinterlegt – nirgends sonst hardcoded.

Primärfarben

Neutral / Schwarz-Reihe

Rot-Reihe

Blau-Reihe (dark surfaces)

Violett-Reihe

Ocker / Warn

CI-Gradient

4. Spacing, Radii & Shadows

Spacing-Skala (8px-Grid)

Container-Breiten

Border-Radii

Shadows

5. Komponenten

Buttons

Badge / Eyebrow

Post-Card (Template)

Filter-Pills (News / Partner)

Sections

6. Module & Templates

Template-Dateien (Theme umantis-base)

Produktseiten-Builder

Custom-Page-Templates

7. SEO & AI-GEO

SEO-Layer ohne Plugin – liest aus den Yoast-Postmeta-Keys (migrationsfest).

8. Migration-Workflow

cd Blog/migration
./run.sh 30-news-page.php
./run.sh 48-hr-suites.php
./run.sh 55-styleguide.php

Aktive Migration-Scripts

9. Betriebs-Erkenntnisse & Konventionen

Gesammelte Konventionen aus der laufenden Marker.io-Abarbeitung (Stand Mai 2026). Diese Regeln gelten verbindlich für alle weiteren Anpassungen an der Staging-Site umantis.com.

9.1 Bilder immer lokal — nie von umantis.com hotlinken

Der Hotlink-Schutz von umantis.com ist inkonsistent: referrer-basiert blockierte Bilder erscheinen mal, mal nicht („tote Bilder“). Jedes Bild deshalb server-seitig in die WP-Mediathek importieren und lokal referenzieren.

# Bild lokal spiegeln (server-seitig, umgeht Hotlink-Schutz):
wp media import "https://www.umantis.com/.../bild.jpg" --porcelain   # -> Attachment-ID
wp post get <ID> --field=guid                                       # -> lokale URL
# Danach im post_content / Template die umantis.com-URL durch die lokale ersetzen.
# Site-weit: wp search-replace "alt-url" "neu-url" --all-tables --precise

SVG wird vom WP-Upload blockiert → Datei per curl direkt in wp-content/uploads/ spiegeln und URL umschreiben. Verifikation: img.naturalWidth>0 (Achtung Lazy-Load: vor dem Check ins Viewport scrollen).

9.2 Buttons nie violett beim Hover

Die generische Regel a:hover { color: var(--um-color-secondary) } (Violett #781e5f) ist nur für Text-Links gedacht. Sie ist global so eingeschränkt, dass sie keine button-artigen Elemente mehr trifft:

a:hover:not([class*="btn"]):not([class*="button"]) { color: var(--um-color-secondary); }

Deckt alle Button-Systeme ab (um-btn, vp-btn, wp-block-button__link, wp-element-button). Buttons behalten ihre Basisfarbe (meist Weiss auf dunklem Grund). Sekundär-/Outline-/Ghost-Buttons: Text bleibt im Hover weiss, nie violett.

9.3 Footer = umantis.com-Struktur

Footer (umantis-base/footer.php) folgt umantis.com: kompakte Brand-Spalte (Logo + 1 Kurzbeschreibung + 1 Kontaktblock: Telefon/Öffnungszeiten, E-Mail, eine Adresse St. Gallen + Social) und rechts die 4 ausgerichteten Link-Spalten Produkte / Lösungen / Unternehmen / Kontakt + Legal-Bar. Kein 3-fach-USP-Block, keine 3 Telefonnummern, keine 3 vollen Standort-Adressen (das machte den Footer unbalanciert/zu lang).

9.4 Modulseiten-Pattern (Gutenberg)

Produkt-/Modulseiten sind reine Gutenberg-Block-Seiten im post_content (Standard-Template). Aufbau in dieser Reihenfolge:

• Hero wp:group dunkel (#2a2a2a): Breadcrumb, Eyebrow (= Menü-Kategorie, rot #de323c), H1, Lead, Bullet-Liste, 2 Buttons (primär rot „Demo vereinbaren“ + Outline), Hero-Bild rechts.
• Feature-Sektionen alternierend um-product-section / um-product-section--alt mit um-screenshot (Bild) + um-product-feature-text (H2 + Text + optional Bullets + um-feature-benefit-Tag).
• Trust-Strip um-swiss-trust (Hosting CH/DE, DSGVO/DSG, ISO-27001, keine US-Hyperscaler).
• CTA-Footer um-cta-footer (#1a1a1a) mit Demo-Buttons.

Fehlt eine Seite auf Staging, die es auf umantis.com gibt → vollständig portieren (alle Inhalte ins Block-Pattern, Bilder lokal). Beispiele diese Session: /mitarbeiterkommunikation/, /job-marketing/. Anlegen via wp post create <file> --post_type=page --post_name=<slug>, dann Mega-Menü-Link in inc/mega-menu-data.php setzen.

9.5 Wording-Konventionen

• Legal entschärfen: kein „revisionssicher“, „garantiert gesetzeskonform“, „rechtssicher“ → stattdessen „nachvollziehbar dokumentiert“, „gesetzeskonform konfigurierbar“, „je nach Signatur-Typ rechtsgültig (QES nach ZertES/eIDAS)“.
• Keine V3-fremden Features behaupten: reine V2-Funktionen entfernen (z.B. Active Sourcing, Videointerviews) oder klar als „Geplant ab 2027“ kennzeichnen.
• Region-neutral (CH+DE): „Absenzen, Ferien“ → „Abwesenheiten, Ferien/Urlaub“; Browser-Lösung „MyAbacus“ → „Self-Service“ (offene Terminologie-Linie beachten).
• Konfiguration statt Automatik: „Software kennt die Gesetze“ → „lässt sich gesetzeskonform konfigurieren“; Benefit-Tags variieren statt überall „Automatisiert statt manuell“.

9.6 Deploy & Cache (wichtig!)

wp kinsta cache purge --all      # Kinsta Full-Page-Cache
wp cache flush                   # Object-Cache
php -r 'opcache_reset();'        # PHP-OPcache (sonst greift altes Template/CSS)

style.css nutzt filemtime-Cache-Busting (CSS-Edits sofort live); für PHP/Templates gilt obiger OPcache-Hinweis. Theme-Änderungen committen + pushen (Deploy-Key), Seiten-Inhalte via wp post update. Helper: scripts/kwp.sh, kssh.sh, kpurge.sh (lesen keys.env zeilenweise, da das Passwort ein ( enthält — nicht sourcen).