BRUNEN · DESIGN-SYSTEM

Musterseite für den Elementor-Nachbau

Diese Seite enthält die festen Designwerte der gelieferten HTML-Seite. Die global sinnvoll nutzbaren Werte wurden zusätzlich in den Elementor-Website-Einstellungen hinterlegt.

1. Farbpalette

Originalwerte aus der HTML/CSS-Datei.

Primärblau#0170B9
Blau dunkel#055E9B
Navy#19344A
Navy tief#102536
Ink / Überschriften#16212C
Textgrau#4B4F58
Muted#737B85
Linie#E6EAEE
Soft / Flächen#F4F7F9
Akzent / Notdienst#E2542E
Hero Highlight#5CB3E8
Weiß#FFFFFF

2. Typografie

Überschriften: Manrope · Fließtext: Inter.

H1 – Wärme & Wasser
Manrope 800 · Desktop 61,6 px · Tablet 48 px · Mobil 38,4 px · Zeilenhöhe 1,15 · Laufweite −0,02 em
H2 – Alles rund um Ihre Haustechnik
Manrope 800 · Desktop 43,2 px · Tablet 34,6 px · Mobil 30,4 px · Zeilenhöhe 1,15 · Laufweite −0,02 em
H3 – Heizung / Sanitär / Service
Manrope 700 · 21,12 px · Zeilenhöhe 1,15 · Laufweite −0,02 em
Lead-Text im Hero: Beratung, Planung, Installation und Modernisierung.
Inter 400 · 18,56 px · im Hero Weiß mit 82 % Deckkraft
Standard-Fließtext: zuverlässig, termintreu und alles aus einer Hand.
Inter 400 · 16 px · Zeilenhöhe 1,65 · Farbe #4B4F58
MEISTERBETRIEB SEIT 2016 · NETTETAL
Manrope 700 · 12,48 px · 0,16 em Laufweite · Versalien

3. Buttons

Der Primärbutton ist als globaler Elementor-Button voreingestellt.

Beratung anfragenUnsere Leistungen
Manrope 700 · 15,52 px · Innenabstand 15 / 28 px · Radius 999 px · Primär #0170B9 · Hover #055E9B · Schatten 0 12 30 −12 rgba(1,112,185,.70)

4. Grundmaße & Abstände

Global

  • Max. Inhaltsbreite: 1180 px
  • Seitlicher Innenabstand Desktop/Tablet: 28 px
  • Seitlicher Innenabstand Mobil: 20 px
  • Normale Abschnittshöhe: 108 px oben/unten
  • Mobil: 72 px oben/unten
  • Standard-Radius: 16 px

Schatten

  • Groß: 0 18px 50px -22px rgba(16,37,54,.35)
  • Klein: 0 8px 24px -14px rgba(16,37,54,.30)
  • Primärbutton: 0 12px 30px -12px rgba(1,112,185,.70)

5. Komponenten-Bauplan

BereichWerte aus dem Original
HeaderFixed · Padding 20 px, gescrollt 10 px · Logo 300 px, gescrollt 46 px hoch · Nav-Gap 34 px · Telefonbutton 10/20 px, Pill-Radius
HeroMin-Höhe 100 vh · Padding 150/90 px, mobil 130/70 px · Raster 1,1fr / 0,9fr · Gap 56 px · Hintergrund: 155° #1D3C56 → #102536 55 % → #0C1D2B
Hero-BildSeitenverhältnis 4:5 · Radius 24 px · Tablet max. 420 px und Verhältnis 5:4
Trust-KartenGap 14 px · Padding 16/20 px · Radius 14 px · Mindestbreite 148 px
SektionskopfMax-Breite 660 px · Abstand nach unten 54–56 px · Eyebrow-Abstand unten 18 px
LeistungskartenDesktop 2 Spalten · Gap 24 px · Padding 38/34 px · Radius 16 px · Icon 60×60 px, Radius 15 px
GalerieDesktop 4 Spalten · Zeilenhöhe 215 px · Gap 16 px · Tablet 2 Spalten / 180 px · Mobil 1 Spalte / 200 px
Über uns2 gleiche Spalten · Gap 64 px · Bildfläche min. 460 px, Tablet 340 px · Radius 24 px · Bildreihe 3 Spalten, Gap 18 px
Ablauf4 Spalten · Gap 24 px · Karten Padding 30/26 px · Radius 16 px · Tablet 2 Spalten · Mobil 1 Spalte
NotdienstInnenabstand 64 px oben/unten · Flex-Gap 36 px · Icon 74×74 px, Radius 18 px · Hintergrund #E2542E → #C43D1C
KontaktSpalten 0,95fr / 1,05fr · Gap 56 px · Formular Padding 40 px, mobil 28 px · Radius 20 px · Felder 13/16 px, Radius 11 px
FooterPadding 70 px oben / 30 px unten · Spalten 1,4fr / 1fr / 1fr · Gap 44 px · Mobil 1 Spalte

6. Responsive

BreakpointVerhalten
bis 960 pxHero, Über-uns und Kontakt werden einspaltig; Leistungen einspaltig; Ablauf 2 Spalten; Galerie 2 Spalten; Desktop-Navigation wird zum Burger-Menü.
bis 600 pxSeitlicher Abstand 20 px; Abschnitte 72 px; Ablauf 1 Spalte; Galerie 1 Spalte; Notdienst untereinander; Formular Padding 28 px; Footer 1 Spalte.

7. Formular-Voreinstellung

  • Label: Manrope 600 · 14,08 px · #16212C
  • Feldtext: Inter 400 · 15,52 px · #16212C
  • Feld-Hintergrund: rgba(1,112,185,.10)
  • Rand: 1 px solid #E6EAEE · Radius 11 px
  • Innenabstand: 13 px oben/unten · 16 px links/rechts
  • Fokus: weißer Hintergrund · Rand #0170B9 · 3-px Fokus-Schatten rgba(1,112,185,.12)
Arbeitsweise: Baue die Brunen-Seite mit normalen Elementor-Containern und Widgets. Nutze diese Musterseite als Nachschlagewerk. Die festen Grundwerte sind bereits global hinterlegt; bereichsspezifische Maße stehen oben in der Tabelle.