Farben

Primärfarben

Accordion auf/zuklappen

Blau | #04285a var(--color__blue)

Hellblau | #4db4e6 var(--color__blue--light)

Weiß | #fff var(--color__white)

Hellgrau | #b2b2b2 var(--color__grey--light)

Grau | #3a3a3a var(--color__grey)

Sekundärfarben

Accordion auf/zuklappen

Gelb | #ffc533 var(--color__yellow)

Pink | #c545d8 var(--color__pink)

Türkis | #42d3aa var(--color__turquoise)

Grün | #c2e541 var(--color__green)

Utility-Farben

Accordion auf/zuklappen

Erfolg | #83d774 var(--color__success)

Info | #6da9b5 var(--color__info)

Warnung | #f2cb13 var(--color__warning)

Fehler | #eb2747 var(--color__error)

Transparenz-Farben

Accordion auf/zuklappen

Grau | 60% addTransparency(var(--color__grey), 60%)

Hellgrau | 10% addTransparency(var(--color__grey--light), 10%)

Schriftschnitte

Insgesamt gibt es drei verschiedene Schriftschnitte:

Real Head (Bold) → Überschriften

Real Text (Medium) → Buttons, Fettungen

Real Text (Light) → Fließtext

Programmierung Accordion auf/zuklappen


                        

    Real Text (Light) → @include font__light;

    Real Text (Medium) → @include font__regular;

    Real Head (Bold) → @include font__highlight;

Überschriften

Überschriften sind am besten nicht länger als 6 Wörter.

Die Struktur sollte sinnvoll sein:

h1 (nur einmal pro Seite am Anfang der Seite)
h2 (alle Überschriften unter der h1)
h3 (vertiefende Überschriften zu einer h2)

Headline: [160px] Huge

Headline: [68px] Large

Headline: [48px] Regular

Headline: [36px] Small

Hintergrund-Varianten Accordion auf/zuklappen

Headline: [68px] Large

Programmierung Accordion auf/zuklappen

Im Fluid wird das Partial Headline benutzt.
Dabei sind folgende Argumente möglich:

headlineClass | string | Klasse entsprechend dem Kontext
headline | string | Eigentliche Überschrift
layout | Werte:
- 11 → headline--huge
- 21 → headline--large
- 31 → headline--regular
- 41 → headline--small
semantics | Werte: h1, h2, h3, none (span)


                        

    < f:render partials="Headline" arguments="{

        headlineClass: 'deine-klasse',

        headline: 'Überschrift',

        layout: '21',

        semantics: 'h2' }" />



    <h2 class="headline headline--large deine-klasse">Überschrift</h2>

Typographie

Paragraphen sollten in mehrere, schnell erfassbare Abschnitte aufgeteilt werden. Versuche Paragraphen über sehr viele Zeilen zu vermeiden. Teile den Text eher auf oder streue eine Liste ein.

Er war (Fett) genialer Erfinder und (E-Mail-Link) begnadeter Kaufmann in einer Person: unser (Download-Link) Firmengründer Friedrich Soennecken .

Wie kein anderer hat er (Interner Link) unser Büroleben geprägt. All dies werden wir als Gemeinschaft angehen, Chancen nutzen und Erfolge erzielen. (Externer Link) Davon sind wir überzeugt.

Er war (Fett) genialer Erfinder und (E-Mail-Link) begnadeter Kaufmann in einer Person: unser (Download-Link) Firmengründer Friedrich Soennecken.

Wie kein anderer hat er (Interner Link) unser Büroleben geprägt. All dies werden wir als Gemeinschaft angehen, Chancen nutzen und Erfolge erzielen. (Externer Link) Davon sind wir überzeugt.

Firmengründer Friedrich Soennecken
Firmengründer
Friedrich Soennecken
Friedrich

Firmengründer Friedrich Soennecken
Firmengründer
Friedrich Soennecken
Friedrich

Ein Paragraf nach der Liste.

Hintergrund-Varianten Accordion auf/zuklappen

Er war genialer Erfinder und begnadeter Kaufmann in einer Person: unser Firmengründer Friedrich Soennecken .

Wie kein anderer hat er unser Büroleben geprägt. All dies werden wir als Gemeinschaft angehen, Chancen nutzen und Erfolge erzielen. Davon sind wir überzeugt.

Firmengründer Friedrich Soennecken

Firmengründer Friedrich Soennecken

Er war genialer Erfinder und begnadeter Kaufmann in einer Person: unser Firmengründer Friedrich Soennecken .

Wie kein anderer hat er unser Büroleben geprägt. All dies werden wir als Gemeinschaft angehen, Chancen nutzen und Erfolge erzielen. Davon sind wir überzeugt.

Firmengründer Friedrich Soennecken

Firmengründer Friedrich Soennecken

Er war genialer Erfinder und begnadeter Kaufmann in einer Person: unser Firmengründer Friedrich Soennecken .

Wie kein anderer hat er unser Büroleben geprägt. All dies werden wir als Gemeinschaft angehen, Chancen nutzen und Erfolge erzielen. Davon sind wir überzeugt.

Firmengründer Friedrich Soennecken

Firmengründer Friedrich Soennecken

Er war genialer Erfinder und begnadeter Kaufmann in einer Person: unser Firmengründer Friedrich Soennecken .

Wie kein anderer hat er unser Büroleben geprägt. All dies werden wir als Gemeinschaft angehen, Chancen nutzen und Erfolge erzielen. Davon sind wir überzeugt.

Firmengründer Friedrich Soennecken

Firmengründer Friedrich Soennecken

Er war genialer Erfinder und begnadeter Kaufmann in einer Person: unser Firmengründer Friedrich Soennecken .

Wie kein anderer hat er unser Büroleben geprägt. All dies werden wir als Gemeinschaft angehen, Chancen nutzen und Erfolge erzielen. Davon sind wir überzeugt.

Firmengründer Friedrich Soennecken

Firmengründer Friedrich Soennecken

Er war genialer Erfinder und begnadeter Kaufmann in einer Person: unser Firmengründer Friedrich Soennecken .

Wie kein anderer hat er unser Büroleben geprägt. All dies werden wir als Gemeinschaft angehen, Chancen nutzen und Erfolge erzielen. Davon sind wir überzeugt.

Firmengründer Friedrich Soennecken

Firmengründer Friedrich Soennecken

Er war genialer Erfinder und begnadeter Kaufmann in einer Person: unser Firmengründer Friedrich Soennecken .

Wie kein anderer hat er unser Büroleben geprägt. All dies werden wir als Gemeinschaft angehen, Chancen nutzen und Erfolge erzielen. Davon sind wir überzeugt.

Firmengründer Friedrich Soennecken

Firmengründer Friedrich Soennecken

Programmierung Accordion auf/zuklappen


                        

    <p class="paragraph">Paragraf</p>

    <p class="paragraph paragraph--large">Großer Paragraf</p>

Icons

Icons sind auf einem Raster von 24x24px angelegt.
Die Breite der Striche sollte ~1,7px entsprechen.
Alle Icons nutzen Flächen, keine Konturen.


            chevron


            arrow


            external


            download


            close


            plus


            minus


            circle


            search


            login


            position


            filter


            youtube


            instagram


            facebook


            pinterest


            xing


            illustration--balloon


            illustration--cake


            illustration--tea

Hintergrund-Varianten Accordion auf/zuklappen


            arrow


            close


            search


            youtube


            instagram


            arrow


            close


            search


            youtube


            instagram


            arrow


            close


            search


            youtube


            instagram


            arrow


            close


            search


            youtube


            instagram


            arrow


            close


            search


            youtube


            instagram


            arrow


            close


            search


            youtube


            instagram


            arrow


            close


            search


            youtube


            instagram

Programmierung Accordion auf/zuklappen

Im Fluid wird der ViewHelper soennecken:svg benutzt.
Dabei sind folgende Argumente nützlich:

class | string | Klasse entsprechend dem Kontext
identifier | Werte: siehe Icon-Liste oben


                        

    < soennecken:svg class="context" identifier="name" />

    <svg class="context"><use>...</use></svg>

Bildformate

Die folgenden Bildausschnitte werden bevorzugt verwendet.

16:9 | Vollbild

8:3 | Schmales Querformat

4:3 | Leichtes Querformat

1:1 | Quadrat

7:12 | Hochformat

5:6 | Leichtes Hochformat

Programmierung Accordion auf/zuklappen

Im Fluid wird das Partial Media benutzt.
Dieses bedient nicht nur Bilder, sondern auch Videos oder svgs.

Folgende Sections können benutzt werden:

Die Standard-Section (picture-Tag mit einem Bild)
Die withCrops-Section (picture-Tag mit vordefinierten responsiven Bild-Varianten)
Die asLightbox-Section (v.a. für Videos in Preview-Buttons)

Dabei sind folgende Argumente nützlich:

mediaClass | string | Klasse entsprechend dem Kontext
file | Die Datei
cropVariant | string | optionales, im TCA definiertes Bildformat


                        

    < f:render partials="Media" arguments="{

        mediaClass: 'deine-klasse',

        file: '...',

        cropVariant: 'desktop' }" />



    <figure class="media-figure deine-klasse">

        <picture class="media-figure__picture">

            <img class="media-figure__asset media-figure__asset--jpg" src="..." ... />

        </picture>

        <figcaption class="media-figure__caption"></figcaption>

    </figure>

Buttons

Button-Labels sollten nicht zu lang sein, dabei aber dennoch Informationen zum Ziel enthalten.
Besser "Unsere Lösungen" als "Mehr erfahren".

Kleine Buttons werden für aufklappbare Elemente und Filter benutzt.
Große Buttons werden vor allem für Icon-Navigationen (wie im Slider oder in den Social-Links) benutzt. Außerdem sind Preview-Buttons ausschließlich große Buttons.
Regulär große Buttons können in Elementen hinzugefügt werden.

Bei speziellen Links werden automatisch entsprechende Icons hinzugefügt:


            Bei Dateien / Bildern


            Bei externen Verweisen


            Bei E-Mails

Gefüllte Buttons Umrandete Buttons Buttons mit Indikator

Buttons mit Bild-Preview

Programmierung Accordion auf/zuklappen

Im Fluid wird das Partial Buttons/Button benutzt.
Hier kann ausgewählt werden zwischen:

Dem Standard-Button (a-Tag)
Der NoAnchor-Section (button-Tag)
Der NoSemantics-Sektion (span-Tag)
Der withImagePreview-Sektion (Button im Preview-Stil)

Folgende Argumente sind möglich:

buttonClass | string | Klasse entsprechend dem Kontext
buttonStyle | Werte:
- button--style-solid (default, dieser Stil)
- button--style-outline
- button--style-indicator
- Für den Preview-Button wird die entsprechende Section genutzt
buttonSize | Werte:
- button--size-large
- button--size-regular (default)
- button--size-small
buttonIconModifier | Werte:
- button--icon-only → Button nur mit einem Icon, das Label wird automatisch visuell versteckt
- button--icon-left → Button mit einem Icon links neben dem Label
- button--icon-right → Button mit einem Icon rechts neben dem Label
parameter | string | Das Ziel des Buttons (verpflichtend, wenn keine NoAnchor oder NoSemantics-Section genutzt wird!)
label | string | Der Text im Button
labelHidden | string | Wenn gesetzt, wird das label visuell versteckt
icon | Werte: siehe Icon-Liste oben


                        

    Standard-Solid-Button:

    < f:render partials="Buttons/Button" section="NoAnchor" arguments="{

        buttonClass: 'deine-klasse',

        label: 'Soennecken-Button' }" />



    → Output

    <button class="button button--style-solid button--size-regular deine-klasse">

        <span class="button__inner">

            <span class="button__label">Soennecken-Button</span>

        </span>

    </button>



    ---



    Solid-Button mit Icon:

    < f:render partial="Buttons/Button" arguments="{

        buttonClass: 'deine-icon-klasse',

        buttonSize: 'button--size-large',

        buttonIconModifier: 'button--icon-only',

        parameter: '#guide',

        label: 'Soennecken-Button',

        icon: 'arrow' }" />



    → Output

    <a href="#guide" class="button button--style-solid button--size-large button--icon-only deine-icon-klasse">

        <span class="button__inner">

            <svg class="button__icon"><use xlink:href="#arrow"></use></svg>

            <span class="button__label">Soennecken-Button</span>

        </span>

    </a>

Gefüllte Buttons

Die primären Buttons der Soennecken-Website.
Können in Content-Elementen hinzugefügt werden.

Soennecken-Button Soennecken-Button Soennecken-Button Soennecken-Button

Hintergrund-Varianten Accordion auf/zuklappen

Soennecken-Button Soennecken-Button

Umrandete Buttons

Die sekundären Buttons der Soennecken-Website.
Können in Content-Elementen hinzugefügt werden, wenn ein Button niedrigere Priorität haben soll – oder zur visuellen Abwechslung.

Soennecken-Button Soennecken-Button Soennecken-Button Soennecken-Button

Hintergrund-Varianten Accordion auf/zuklappen

Soennecken-Button Soennecken-Button

Buttons mit Indikator

Können NICHT in Content-Elementen hinzugefügt werden und sind nur für besondere Anwendungsfälle vorgesehen bspw. für die News-Artikel-Teaser.

Soennecken-Button Soennecken-Button

Hintergrund-Varianten Accordion auf/zuklappen

Soennecken-Button Soennecken-Button

Diese Buttons sind im Moment nur für Videos gedacht.
D.h ein Button wird automatisch zu einem Preview-Button, wenn ein Video (mp4, youtube, vimeo) als Linkziel hinterlegt ist.
Hierbei gibt es keine Unterscheidung zwischen primär und sekundär.

Soennecken-Button

Hintergrund-Varianten Accordion auf/zuklappen

Soennecken-Button

Formulare

Hinweis: Die Partials und Informationen im "Programmierung"-Abschnitt sind bei den Formularen noch nicht aktuell und werden später ergänzt.

Folgende Formular-Elemente stehen zur Verfügung:

Erforderlich Textfelder Textarea Select Checkbox Aktionen Rückmeldung

Programmierung Accordion auf/zuklappen

Formular-Struktur:

form-Tag
Headline des Formulars (ggf. auch davor wg. dem Ajax-Container
Mandatory-Info
Wenn mehrere Sektionen => section
Section-Headline
Feld mit fieldset-Wrapper (Mehrere Checkboxen / Radio Buttons)
Feld mit p-Wrapper
Weitere Sektionen im gleichen Aufbau
Button type submit (auch in P-Wrapper...)


                        

    <form>

        <div class="form__section">

            <div class="form__row">

                FELDER

            </div>

            WEITERE ROWS

        </div>

    </form>

Hinweis zu erforderlichen Feldern

Hintergrund-Varianten Accordion auf/zuklappen

Programmierung Accordion auf/zuklappen


                        

    < f:render partials="Form/MandatoryInfo" arguments="{

        headlineClass: 'deine-klasse' }" />



    <p class="field field--mandatory-info">

        Erforderliche Felder sind mit einem <strong><span aria-label="required">*</span></strong> markiert.

    </p>

Text-Felder

Text-Feld

Text-Feld mit Wert

Text-Feld (disabled)

Text-Feld mit Hinweis

Hinweis: Dieses Feld benötigt einen Hinweis

Text-Feld mit Fehler

Bitte tragen Sie Ihren Namen ein

E-Mail-Feld

Text-Feld mit Submit-Button

Hintergrund-Varianten Accordion auf/zuklappen

Text-Feld mit Hinweis

Hinweis: Dieses Feld benötigt einen Hinweis

Text-Feld mit Fehler

Bitte tragen Sie Ihren Namen ein

E-Mail-Feld

Text-Feld mit Submit-Button

Text-Feld mit Hinweis

Hinweis: Dieses Feld benötigt einen Hinweis

Text-Feld mit Fehler

Bitte tragen Sie Ihren Namen ein

E-Mail-Feld

Text-Feld mit Submit-Button

Text-Feld mit Hinweis

Hinweis: Dieses Feld benötigt einen Hinweis

Text-Feld mit Fehler

Bitte tragen Sie Ihren Namen ein

E-Mail-Feld

Text-Feld mit Submit-Button

Text-Feld mit Hinweis

Hinweis: Dieses Feld benötigt einen Hinweis

Text-Feld mit Fehler

Bitte tragen Sie Ihren Namen ein

E-Mail-Feld

Text-Feld mit Submit-Button

Text-Feld mit Hinweis

Hinweis: Dieses Feld benötigt einen Hinweis

Text-Feld mit Fehler

Bitte tragen Sie Ihren Namen ein

E-Mail-Feld

Text-Feld mit Submit-Button

Text-Feld mit Hinweis

Hinweis: Dieses Feld benötigt einen Hinweis

Text-Feld mit Fehler

Bitte tragen Sie Ihren Namen ein

E-Mail-Feld

Text-Feld mit Submit-Button

Text-Feld mit Hinweis

Hinweis: Dieses Feld benötigt einen Hinweis

Text-Feld mit Fehler

Bitte tragen Sie Ihren Namen ein

E-Mail-Feld

Text-Feld mit Submit-Button

Programmierung Accordion auf/zuklappen


                        

    < f:render partials="Headline" arguments="{

    headlineClass: 'deine-klasse',

    headline: 'Überschrift',

    layout: '21',

    semantics: 'h2' }" />



    <div class="field field--input">

        <div class="field__inner">

            <input id="ID" class="field__input field__input--text" required="true" type="text"

                   autocomplete="given-name" placeholder=" ">



            <div class="field__notch-container">

                <div class="field__notch-leading"></div>

                <div class="field__notch-inner">

                    <div class="field__notch-floating">

                        <label class="field__label" for="ID">Text-Feld mit Submit-Button</label>

                    </div>

                </div>

                <div class="field__notch-trailing"></div>

            </div>

        </div>

    </div>

Textarea

Textarea mit Hinweis

Hinweis: Dieses Feld benötigt einen Hinweis

Textarea mit Fehler

Bitte tragen Sie eine Nachricht ein

Hintergrund-Varianten Accordion auf/zuklappen

Programmierung Accordion auf/zuklappen


                        

    < f:render partials="Headline" arguments="{

    headlineClass: 'deine-klasse',

    headline: 'Überschrift',

    layout: '21',

    semantics: 'h2' }" />



    <div class="field field--textarea">

        <div class="field__inner">

            <textarea id="textarea-default" class="field__input field__input--text" required="true" rows="5" placeholder=" "></textarea>



            <div class="field__notch-container">

                <div class="field__notch-leading"></div>

                <div class="field__notch-inner">

                    <div class="field__notch-floating">

                        <label class="field__label" for="textarea-default">Textarea</label>

                    </div>

                </div>

                <div class="field__notch-trailing"></div>

            </div>

        </div>

    </div>

Select

Selectbox öffnen

Select mit Hinweis

Selectbox öffnen

Hinweis: Dieses Feld benötigt einen Hinweis

Select mit Fehler

Selectbox öffnen

Bitte wählen Sie eine Option aus

Hintergrund-Varianten Accordion auf/zuklappen

Programmierung Accordion auf/zuklappen


                        

    < f:render partials="Form/Field/Select" arguments="{

        headlineClass: 'deine-klasse' }" />



    <div class="field field--select">

        <div class="field__inner">

            <select id="select" class="field__input field__input--select">

                <option value="1">Option 1</option>

                <option value="2">Option 2</option>

                <option value="3">Option 3</option>

            </select>



            <div class="field__notch-container">

                <div class="field__notch-leading"></div>

                <div class="field__notch-inner">

                    <div class="field__notch-floating">

                        <label class="field__label" for="select">Select</label>

                    </div>

                </div>

                <div class="field__notch-trailing"></div>

            </div>



            

    <span class="button button--style-solid button--size-regular button--icon-only field__button">

        

    



    <span class="button__inner">

        

            <svg class="button__icon"><use xlink:href="#chevron" /></svg>

        



        <span class="button__label ">

            Selectbox öffnen

        </span>

    </span>



    </span>



        </div>

    </div>

Checkbox

Checkbox (angehakt)

Checkbox mit Verweis

Checkbox mit Hinweis

Hinweis: Dieses Feld benötigt einen Hinweis

Checkbox mit Fehler

Bitte bestätigen Sie die Datenschutzbestimmungen

Multiple Checkboxen

Checkbox 1
Checkbox 2
Checkbox 3

Hintergrund-Varianten Accordion auf/zuklappen

Programmierung Accordion auf/zuklappen


                        

    < f:render partials="Form/MandatoryInfo" arguments="{

        headlineClass: 'deine-klasse' }" />



    <p class="field field--mandatory-info">

        Erforderliche Felder sind mit einem <strong><span aria-label="required">*</span></strong> markiert.

    </p>

Aktionen

Hintergrund-Varianten Accordion auf/zuklappen

Programmierung Accordion auf/zuklappen


                        

    <div class="button-group">

        

    

            <button class="button button--style-solid button--size-regular button--icon-right field__button">

                

    



    <span class="button__inner">

        

            <svg class="button__icon"><use xlink:href="#arrow" /></svg>

        



        <span class="button__label ">

            Absenden

        </span>

    </span>



            </button>

        





        

    

            <button class="button button--style-outline button--size-regular button--icon-right field__button js-form-reset">

                

    



    <span class="button__inner">

        

            <svg class="button__icon"><use xlink:href="#close" /></svg>

        



        <span class="button__label ">

            Zurücksetzen

        </span>

    </span>



            </button>

        



    </div>

Rückmeldung

Vielen Dank

Ihre Nachricht wurde erfolgreich abgesendet und wird so schnell wie möglich von uns bearbeitet.

Zur Startseite

Hintergrund-Varianten Accordion auf/zuklappen

Vielen Dank

Ihre Nachricht wurde erfolgreich abgesendet und wird so schnell wie möglich von uns bearbeitet.

Zur Startseite

Vielen Dank

Ihre Nachricht wurde erfolgreich abgesendet und wird so schnell wie möglich von uns bearbeitet.

Zur Startseite

Vielen Dank

Ihre Nachricht wurde erfolgreich abgesendet und wird so schnell wie möglich von uns bearbeitet.

Zur Startseite

Vielen Dank

Ihre Nachricht wurde erfolgreich abgesendet und wird so schnell wie möglich von uns bearbeitet.

Zur Startseite

Vielen Dank

Ihre Nachricht wurde erfolgreich abgesendet und wird so schnell wie möglich von uns bearbeitet.

Zur Startseite

Vielen Dank

Ihre Nachricht wurde erfolgreich abgesendet und wird so schnell wie möglich von uns bearbeitet.

Zur Startseite

Vielen Dank

Ihre Nachricht wurde erfolgreich abgesendet und wird so schnell wie möglich von uns bearbeitet.

Zur Startseite

Programmierung Accordion auf/zuklappen


                        

    < f:render partials="Form/MandatoryInfo" arguments="{

        headlineClass: 'deine-klasse' }" />



    <p class="field field--mandatory-info">

        Erforderliche Felder sind mit einem <strong><span aria-label="required">*</span></strong> markiert.

    </p>

Layouts

Für eine Konsistenz der Spalten wird eine übergreifende Layout-Klasse verwendet.

Halbe

Accordion auf/zuklappen

Standard

Mit Separator

Ohne Abstand

Mit Desktop-Abstand links

Viertel

Accordion auf/zuklappen

Standard

Mit Separator

Ohne Abstand

Mit Desktop-Abstand links

Gemixt

Accordion auf/zuklappen

Viertel | Viertel | Halb

Viertel | Halb | Viertel

Dreiviertel | Viertel

Verschachtelt

Accordion auf/zuklappen

[Halb [Halb | Halb] | Halb]

Programmierung Accordion auf/zuklappen

Für Container wird die Klasse l-container benutzt.
Damit bei mehrzeiligen Layouts keine unnötigen Separatoren entstehen wird noch ein innerer Container benötigt l-container__inner.

Folgende Modifikatoren können benutzt werden:

l-container--no-gap → Kein Abstand zwischen den Items
l-container--with-gap-separator → Fügt einen Strich zwischen den Items hinzu

Folgende Item-Größen können benutzt werden:

l-container__item--small → 25% Breite
l-container__item → 50% Breite
l-container__item--large → 75% Breite


                        

    <div class="l-container">

        <div class="l-container__inner">

            <div class="l-container__item">

                INHALT

            </div>

            <div class="l-container__item">

                INHALT

            </div>

        </div>

    </div>

Content-Elemente

Im Aufbau.

Overline

Block: Einstieg

Zu Slide 1 Zu Slide 2 Zu Slide 3

Zum Inhalt nach dem Einstieg

Overline

Block: Einstieg (groß)

Button

Overline

Block: Einstieg (groß)

Overline

Block: Einstieg (groß)

Button

Overline

Block: Registerkarten-Sammlung

Register label

Overline

Inline: Registerkarte

Erfolg ist immer ein Gemeinschaftswerk. Unser besonderer Dank gilt allen Mitgliedern, die sich in der Genossenschaft engagieren und sie stark machen. Anerkennung gebührt auch unseren Mitarbeiterinnen und Mitarbeitern.

Button

Register label

Overline

Inline: Registerkarte

Erfolg ist immer ein Gemeinschaftswerk. Unser besonderer Dank gilt allen Mitgliedern, die sich in der Genossenschaft engagieren und sie stark machen. Anerkennung gebührt auch unseren Mitarbeiterinnen und Mitarbeitern.

Button

Register label

Overline

Inline: Registerkarte

Erfolg ist immer ein Gemeinschaftswerk. Unser besonderer Dank gilt allen Mitgliedern, die sich in der Genossenschaft engagieren und sie stark machen. Anerkennung gebührt auch unseren Mitarbeiterinnen und Mitarbeitern.

Button

Overline

Block: Timeline

Inline: Timeline-Element

Erfolg ist immer ein Gemeinschaftswerk. Unser besonderer Dank gilt allen Mitgliedern, die sich in der Genossenschaft engagieren und sie stark machen. Anerkennung gebührt auch unseren Mitarbeiterinnen und Mitarbeitern.

Nahaufnahme einer Mitschrift in geschriebener Rundschrift.

Inline: Timeline-Element

Erfolg ist immer ein Gemeinschaftswerk. Unser besonderer Dank gilt allen Mitgliedern, die sich in der Genossenschaft engagieren und sie stark machen. Anerkennung gebührt auch unseren Mitarbeiterinnen und Mitarbeitern.

Inline: Timeline-Element

Erfolg ist immer ein Gemeinschaftswerk. Unser besonderer Dank gilt allen Mitgliedern, die sich in der Genossenschaft engagieren und sie stark machen. Anerkennung gebührt auch unseren Mitarbeiterinnen und Mitarbeitern.

Overline

Block: Jump off

Button Button

Overline

Block: Text

Auch 2023 stehen wir wieder vor großen Aufgaben: Schwierige wirtschaftliche Rahmenbedingungen, IT-Großprojekte und neue Themen wie KI werden uns fordern.

All dies werden wir als Gemeinschaft angehen, Chancen nutzen und Erfolge erzielen. Davon sind wir überzeugt.

Button Button

Overline

Block: Zwei-Spalten-Container

Overline

Inline: Media

Overline

Inline: Text

Auch 2023 stehen wir wieder vor großen Aufgaben: Schwierige wirtschaftliche Rahmenbedingungen, IT-Großprojekte und neue Themen wie KI werden uns fordern.

Button Button

Overline

Overline

Block: Kachel-Sammlung

Erfolg ist immer ein Gemeinschaftswerk. Unser besonderer Dank gilt allen Mitgliedern, die sich in der Genossenschaft engagieren und sie stark machen. Anerkennung gebührt auch unseren Mitarbeiterinnen und Mitarbeitern, die mit hoher Einsatzbereitschaft wesentlich zum unternehmerischen Erfolg der Soennecken eG beitragen.

Inline: Kachel

Erfolg ist immer ein Gemeinschaftswerk. Unser besonderer Dank gilt allen Mitgliedern, die sich in der Genossenschaft engagieren und sie stark machen.

Button

Inline: Kachel

Erfolg ist immer ein Gemeinschaftswerk. Unser besonderer Dank gilt allen Mitgliedern, die sich in der Genossenschaft engagieren und sie stark machen.

Button

Inline: Kachel

Erfolg ist immer ein Gemeinschaftswerk. Unser besonderer Dank gilt allen Mitgliedern, die sich in der Genossenschaft engagieren und sie stark machen.

Button

Overline

Block: Galerie

Auch 2023 stehen wir wieder vor großen Aufgaben: Schwierige wirtschaftliche Rahmenbedingungen, IT-Großprojekte und neue Themen wie KI werden uns fordern.

Overline

Block: Accordion

Erfolg ist immer ein Gemeinschaftswerk. Unser besonderer Dank gilt allen Mitgliedern, die sich in der Genossenschaft engagieren und sie stark machen. Anerkennung gebührt auch unseren Mitarbeiterinnen und Mitarbeitern, die mit hoher Einsatzbereitschaft wesentlich zum unternehmerischen Erfolg der Soennecken eG beitragen

Button

Overline

Block: Media

Erfolg ist immer ein Gemeinschaftswerk. Unser besonderer Dank gilt allen Mitgliedern, die sich in der Genossenschaft engagieren und sie stark machen. Anerkennung gebührt auch unseren Mitarbeiterinnen und Mitarbeitern.

Image Marker 1

Text zur Markierung

Button

Image Marker 2

Text zur zweiten Markierung

Button

Overline

Block: Slide collection

Overline

Inline: Slide

Erfolg ist immer ein Gemeinschaftswerk. Unser besonderer Dank gilt allen Mitgliedern, die sich in der Genossenschaft engagieren und sie stark machen. Anerkennung gebührt auch unseren Mitarbeiterinnen und Mitarbeitern, die mit hoher Einsatzbereitschaft wesentlich zum unternehmerischen Erfolg der Soennecken eG beitragen

Overline

Inline: Slide

Erfolg ist immer ein Gemeinschaftswerk. Unser besonderer Dank gilt allen Mitgliedern, die sich in der Genossenschaft engagieren und sie stark machen. Anerkennung gebührt auch unseren Mitarbeiterinnen und Mitarbeitern, die mit hoher Einsatzbereitschaft wesentlich zum unternehmerischen Erfolg der Soennecken eG beitragen

Overline

Aktuelles: Teaser-Sammlung

Zu allen Artikeln

Overline

Block: Kontaktanfrage

Portraitfoto des Vorstandsvorsitzenden Dr. Benedikt Erdmann.

Erfolg ist immer ein Gemeinschaftswerk.

Unser besonderer Dank gilt allen Mitgliedern, die sich in der Genossenschaft engagieren und sie stark machen. Anerkennung gebührt auch unseren Mitarbeiterinnen und Mitarbeitern, die mit hoher Einsatzbereitschaft wesentlich zum unternehmerischen Erfolg der Soennecken eG beitragen

Unternehmen *

Vorname und Name *

E-Mail-Adresse *

Telefonnummer

Nachricht

Mitlaufender Button

Farben

Primärfarben

Sekundärfarben

Utility-Farben

Transparenz-Farben

Schriftschnitte

Überschriften

Headline: [160px] Huge

Headline: [68px] Large

Headline: [36px] Small

Headline: [68px] Large

Headline: [68px] Large

Headline: [68px] Large

Headline: [68px] Large

Headline: [68px] Large

Headline: [68px] Large

Headline: [68px] Large

Typographie

Icons

Bildformate

Buttons

Gefüllte Buttons

Umrandete Buttons

Buttons mit Indikator

Buttons mit Bild-Preview

Formulare

Hinweis zu erforderlichen Feldern

Text-Felder

Textarea

Select

Checkbox

Aktionen

Rückmeldung

Vielen Dank

Vielen Dank

Vielen Dank

Vielen Dank

Vielen Dank

Vielen Dank

Vielen Dank

Vielen Dank

Layouts

Halbe

Viertel

Gemixt

Verschachtelt

Content-Elemente

Block: Einstieg

Block: Einstieg (groß)

Block: Einstieg (groß)

Block: Einstieg (groß)

Block: Registerkarten-Sammlung

Inline: Registerkarte

Inline: Registerkarte

Inline: Registerkarte

Block: Timeline

Inline: Timeline-Element

Inline: Timeline-Element

Inline: Timeline-Element

Block: Jump off

Block: Text

Block: Zwei-Spalten-Container

Inline: Media

Inline: Text

Block: Bild-Carousel

Block: Kachel-Sammlung

Inline: Kachel

Inline: Kachel

Inline: Kachel

Block: Galerie

Block: Accordion

Inline: Accordion-Item

Inline: Accordion-Item

Inline: Accordion-Item

Block: Media

Block: Slide collection

Inline: Slide

Inline: Slide

Aktuelles: Teaser-Sammlung

Aktuelles: Liste