GUIDE

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

Headline: [68px] Large

Headline: [68px] Large

Headline: [68px] Large

Headline: [68px] Large

Headline: [68px] Large

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 Gemein­schaft 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 Gemein­schaft angehen, Chancen nutzen und Erfolge erzielen. (Externer Link) Davon sind wir überzeugt.

  1. Firmengründer Friedrich Soennecken
  2. Firmengründer
    Friedrich Soennecken
  3. 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 Gemein­schaft angehen, Chancen nutzen und Erfolge erzielen. Davon sind wir überzeugt.

  1. 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 Gemein­schaft angehen, Chancen nutzen und Erfolge erzielen. Davon sind wir überzeugt.

  1. 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 Gemein­schaft angehen, Chancen nutzen und Erfolge erzielen. Davon sind wir überzeugt.

  1. 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 Gemein­schaft angehen, Chancen nutzen und Erfolge erzielen. Davon sind wir überzeugt.

  1. 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 Gemein­schaft angehen, Chancen nutzen und Erfolge erzielen. Davon sind wir überzeugt.

  1. 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 Gemein­schaft angehen, Chancen nutzen und Erfolge erzielen. Davon sind wir überzeugt.

  1. 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 Gemein­schaft angehen, Chancen nutzen und Erfolge erzielen. Davon sind wir überzeugt.

  1. 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
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
Soennecken-Button Soennecken-Button
Soennecken-Button Soennecken-Button
Soennecken-Button Soennecken-Button
Soennecken-Button Soennecken-Button
Soennecken-Button Soennecken-Button
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
Soennecken-Button Soennecken-Button
Soennecken-Button Soennecken-Button
Soennecken-Button Soennecken-Button
Soennecken-Button Soennecken-Button
Soennecken-Button Soennecken-Button
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.

Hintergrund-Varianten Accordion auf/zuklappen

Buttons mit Bild-Preview

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.

Hintergrund-Varianten Accordion auf/zuklappen

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:

Programmierung Accordion auf/zuklappen

Formular-Struktur:

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

<form>
<div class="form__section">
<div class="form__row">
FELDER
</div>
WEITERE ROWS
</div>
</form>

Erforderliche Felder sind mit einem * markiert.

Hintergrund-Varianten Accordion auf/zuklappen

Erforderliche Felder sind mit einem * markiert.

Erforderliche Felder sind mit einem * markiert.

Erforderliche Felder sind mit einem * markiert.

Erforderliche Felder sind mit einem * markiert.

Erforderliche Felder sind mit einem * markiert.

Erforderliche Felder sind mit einem * markiert.

Erforderliche Felder sind mit einem * markiert.

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>

Hinweis: Dieses Feld benötigt einen Hinweis

Hintergrund-Varianten Accordion auf/zuklappen

Hinweis: Dieses Feld benötigt einen Hinweis

Hinweis: Dieses Feld benötigt einen Hinweis

Hinweis: Dieses Feld benötigt einen Hinweis

Hinweis: Dieses Feld benötigt einen Hinweis

Hinweis: Dieses Feld benötigt einen Hinweis

Hinweis: Dieses Feld benötigt einen Hinweis

Hinweis: Dieses Feld benötigt einen Hinweis

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>

Hinweis: Dieses Feld benötigt einen Hinweis

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>
Selectbox öffnen
Selectbox öffnen

Hinweis: Dieses Feld benötigt einen Hinweis

Selectbox öffnen
Hintergrund-Varianten Accordion auf/zuklappen
Selectbox öffnen
Selectbox öffnen
Selectbox öffnen
Selectbox öffnen
Selectbox öffnen
Selectbox öffnen
Selectbox öffnen
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>

Hinweis: Dieses Feld benötigt einen Hinweis

Multiple Checkboxen
Hintergrund-Varianten Accordion auf/zuklappen
Multiple Checkboxen
Multiple Checkboxen
Multiple Checkboxen
Multiple Checkboxen
Multiple Checkboxen
Multiple Checkboxen
Multiple Checkboxen
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>
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>

Vielen Dank

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

Hintergrund-Varianten Accordion auf/zuklappen

Vielen Dank

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

Vielen Dank

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

Vielen Dank

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

Vielen Dank

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

Vielen Dank

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

Vielen Dank

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

Vielen Dank

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

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>
Overline

Block: Einstieg

Overline

Block: Einstieg (groß)

Overline

Block: Einstieg (groß)

Overline

Block: Einstieg (groß)

Overline

Block: Registerkarten-Sammlung

Register label
Overline

Inline: Registerkarte

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

Register label
Overline

Inline: Registerkarte

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

Register label
Overline

Inline: Registerkarte

Erfolg ist immer ein Gemein­schaftswerk. 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: Timeline

Inline: Timeline-Element

Erfolg ist immer ein Gemein­schaftswerk. 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 Gemein­schaftswerk. 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 Gemein­schaftswerk. 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

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 Gemein­schaft angehen, Chancen nutzen und Erfolge erzielen. Davon sind wir überzeugt.

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. 

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: Kachel-Sammlung

Erfolg ist immer ein Gemein­schaftswerk. 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 Gemein­schaftswerk. Unser besonderer Dank gilt allen Mitgliedern, die sich in der Genossenschaft engagieren und sie stark machen.

Inline: Kachel

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

Inline: Kachel

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

Overline

Block: Accordion

Erfolg ist immer ein Gemein­schaftswerk. 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: Accordion-Item

Erfolg ist immer ein Gemein­schaftswerk. 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: Accordion-Item

Erfolg ist immer ein Gemein­schaftswerk. 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: Accordion-Item

Erfolg ist immer ein Gemein­schaftswerk. 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

Block: Media

Erfolg ist immer ein Gemein­schaftswerk. 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 Gemein­schaftswerk. 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 Gemein­schaftswerk. 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

Aktuelles: Liste

Overline

Block: Kontaktanfrage

Portraitfoto des Vorstandsvorsitzenden Dr. Benedikt Erdmann.

Erfolg ist immer ein Gemein­schaftswerk. 

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