Zum Hauptinhalt springen
Internal Reference · v1 · 2026-05-03

Styleguide.
Hoffman Component-Library v1.

Live-Referenz für die 13 Pattern-Snippets aus Reset Phase 2. Jede Section ist 1:1 das, was in Joomla-Articles per Copy-Paste eingesetzt werden kann. Keine inline-Styles im Article-Body — Tokens und Klassen liegen in hoffman.css (single-source-of-truth, kompiliert in theme.12.css).

Inhaltsverzeichnis

  1. Hero-A — Full-Bleed-Image + Overlay-Title
  2. Hero-B — Split 50/50 Image + Text
  3. Hero-C — UIkit-Slideshow (Carousel)
  4. Section — Eyebrow + H2 + Lead + CTA
  5. Product-Card
  6. Branchen-Card
  7. Spec-Card (Grid)
  8. Spec-Table (responsive)
  9. FAQ-Akkordeon
  10. Trust-Bar
  11. Photo-Grid (Bonus)
  12. Brand-Hub-Section (Bonus)
  13. Breadcrumb-Crown (Bonus)

1 · Hero-A — Full-Bleed-Image + Overlay-Title

Use: Brand-Hub-Pages (Coldline, Berkel, Konfiskat) — emotional, dominant. Volle Höhe, Bild als Hintergrund, Title + Lead + CTA-Stack als Overlay unten links.

Coldline Hero
Industrial-Kühltechnik · Made in Italy

Coldline.
Präzision in Echtzeit.

Schockfroster, Kühlschränke und Kühltische für Profi-Küchen, die HACCP-konform und souverän skalieren wollen.

2 · Hero-B — Split 50/50 Image + Text

Use: Detail-Pages (B114, einzelne Schockfroster-Modelle) — Editorial-Move. Auf Mobile gestapelt (Bild oben), auf Tablet+ echtes 50/50-Split.

Berkel Volano · Seit 1898

Berkel B114 Volano.
Italienisches Icon für die Showküche.

Handgefertigt in Bologna. Schwungrad statt Motor. Schnitt-Präzision, die nur eine ganze Generation Handwerk hervorbringen kann.

3 · Hero-C — UIkit-Slideshow (Carousel)

Use: Homepage, Brand-Hubs mit Storytelling. Berkel-Move. Autoplay 6s, pause-on-hover, Touch-fähig, Dot-Navigation.

  • Berkel
    Berkel · Volano

    Schwungrad-Schnitt seit 1898.

  • Coldline
    Coldline

    HACCP. Sub-Zero. Substanz.

  • Konfiskat
    Konfiskatkühler

    Compliance, die nicht stört.

    4 · Section — Eyebrow + H2 + Lead + CTA

    Use: Default-Section auf jeder Page. Atomares Baustein für alle Patterns.

    Agentur Deutschland

    Strategische Partnerschaft
    für Fachhändler.

    Wir kuratieren die Werks-Pipeline europäischer Premium-Hersteller — von Berkel über Coldline bis zur Konfiskatkühlung — und sind die einzige Schnittstelle zwischen Manufaktur und deinem Showroom.

    5 · Product-Card

    Use: Product-Listing-Pages, Cross-Sell-Module. Im 3-Spalten-Grid auf Desktop.

    6 · Branchen-Card

    Use: Konfiskat-Subpages (Jagd / Fleischerei / EU-Hygiene), Berkel-Anwendungs-Cluster.

    Branche · Jagd & Revier

    Wildbergung & Konfiskat-Logistik

    Mobile Kühlung für unklare Befunde im Revier. EU-konform, Audit-fest, in 4 Stunden bergungsbereit.

    Jagd-Anwendungen
    Branche · Fleischerei

    Schlacht- & Zerlege-Betrieb

    Konfiskatkühler in Edelstahl 304, GMP-konform für die HACCP-Audit-Trace im Fleischverarbeitungs-Betrieb.

    Fleischerei-Anwendungen
    Branche · EU-Hygiene

    Behörden & Compliance

    Audit-fähige Doku, Temperatur-Log über 365 Tage, automatische Berichts-Schnittstelle für Behörden-Termine.

    Compliance-Set-up

    7 · Spec-Card (Grid 4-up)

    Use: Detail-Pages, Spec-Streifen unter Hero. Vermittelt Substanz auf einen Blick.

    −40°C
    Kerntemperatur
    90 min
    Schock-Zyklus
    10× GN1/1
    Beladung
    A+++
    Energie-Klasse

    8 · Spec-Table (responsive)

    Use: Technische Detail-Tabellen unter Spec-Cards. Vertikales Zebra für Lesbarkeit.

    Außenmaße (B × T × H)800 × 800 × 850 mm
    Anschlussleistung3 kW · 400 V
    KältemittelR290 (Propan, GWP < 5)
    Material innen / außenEdelstahl 304 / Edelstahl AISI 304
    Gewicht125 kg

    9 · FAQ-Akkordeon

    Use: Pillar-Pages, Bottom-of-Page FAQ-Block. SEO-Bonus durch JSON-LD ergänzbar.

    Welcher Schockfroster passt zu meinem Küchenvolumen?+
    Coldline-Modelle skalieren von 5 GN1/1 (Cosmo) bis 30 GN1/1 (Maritime XL). Faustregel: 1 GN1/1 entspricht etwa 4 Tellern à 250 g pro Schockzyklus. Wir dimensionieren gerne mit dir gemeinsam — kontaktiere uns für eine Bedarfsanalyse.
    Werden die Geräte auch installiert und gewartet?+
    Über unser Fachhändler-Netz Deutschland. Wir vermitteln dich an einen autorisierten Servicepartner in deiner Region — inklusive Inbetriebnahme, jährlicher Wartung und 24/7-Hotline für Industriekunden.
    Lassen sich Konfiskatkühler EU-konform betreiben?+
    Ja. Unsere Konfiskatkühler sind nach EU-Hygiene-VO 853/2004 ausgelegt: getrennte Klappensperrung, lückenloser Temperatur-Log, audit-fähige Dokumentation. Behörden-Termine begleiten wir auf Wunsch.

    10 · Trust-Bar

    Use: Footer-Crown, unter Hero auf Homepage. Hersteller-Logos in Graustufe, Hover-Color.

    Werksvertretung in Deutschland für

    BERKEL
    COLDLINE
    KONFISKAT
    PARTNER 4
    PARTNER 5
    PARTNER 6

    Hinweis: In der Live-Anwendung als <img> mit Pfaden aus /images/logos-hersteller/*.svg. Im Styleguide hier als Text-Platzhalter, da SVG-Pfade noch zu verifizieren sind.

    11 · Photo-Grid (Bonus)

    Use: Showroom-Galerien, Messe-Berichte, „Hinter den Kulissen". 3-up Asymmetric mit Lightbox.

    Berkel
    Coldline
    Konfiskat

    12 · Brand-Hub-Section (Bonus)

    Use: Bottom-of-Brand-Hub-Page, Cross-Section zwischen Brand-Welten. Vollflächige Akzent-BG mit zentriertem CTA.

    Berkel · seit 1898

    Hol dir das italienische Original
    in dein Schaufenster.

    Unverbindliche Beratung durch unsere Werksvertretung. Innerhalb 24 h Rückruf.

    Hier als Berkel-Bordeaux gerendert. Auf Brand-Hub-Pages ersetzt body.brand-coldline / brand-berkel / brand-konfiskat den --hg-brand-accent automatisch.

    Use: Über jeder H1 auf Detail-Pages — gibt Kontext ohne Visual-Konflikt.

    Verwendung

    Snippets per Copy-Paste aus /outputs/hoffman_components_v1.html (lokal im Projekt-Ordner) in den Article-Body übernehmen. Texte/Bilder anpassen. Kein <style>-Block im Article einfügen — alle .hg-*-Klassen sind in theme.12.css kompiliert.

    FAQ-Toggle (Plus → Minus-Rotation) und Trust-Bar-Hover (Graustufe → Color) brauchen je einen kleinen <style>-Block — bei Bedarf am Ende des Article-Bodies oder als Globals in hoffman.css ergänzen (Phase 3).

    Styleguide v1 · Reset Phase 2 · 2026-05-03 · Hoffman GKT