Design System · Komponenten-Bibliothek
Contentset
Bausteine für die FÖFA-Webseite. Alle Komponenten basieren auf nativen Elementor- und Elementor-Pro-Widgets — eingebettet in die Genossenschafts-Identität: rotes Akzentfeuer, ruhiges Grau, viel Weißraum.
Sektion 01
Überschriften
Sechs Hierarchie-Stufen — von Display-H1 bis Micro-Label-H6 — sorgen für klare visuelle Gliederung. Jede Ebene hat ihren Platz: H1 für den Haupt-Titel einer Seite, H2 für Sektion-Köpfe, H3–H4 für Sub-Strukturen, H5–H6 für Kleingedrucktes und Eyebrows.
H1
Genossenschaftliches Wohnen seit 1948
H2
Sicher und fair zuhause
H3
Mehr als nur ein Vermieter
H4
Unsere Werte: Solidarität, Fairness, Verantwortung
H5
Wartungstermine im Quartier
H6
ÖFFNUNGSZEITEN GESCHÄFTSSTELLE
Absatz
Anders als bei einem klassischen Vermieter sind unsere Mieter:innen gleichzeitig Eigentümer:innen der Genossenschaft. Sie wählen den Aufsichtsrat, bestimmen die Geschäftspolitik mit und profitieren von einem dauerhaft fairen Mietzins, der die Lebenshaltungskosten nicht aus dem Gleichgewicht bringt.
Seit 1948 stehen wir für genossenschaftliche Werte im südbadischen Raum. Heute betreuen wir 108 Objekte mit insgesamt 980 Wohnungen — von der barrierefreien Einzimmerwohnung bis zum Familien-Reihenhaus mit Garten. Erfahren Sie mehr über unsere Mitgliedschaft.
Sektion 02
Website Farben
Primär
Grauer HG
Text
Border/Divider
Weiß
Sektion 03
Headline-Kombinationen
Eyebrow, Headline, Subtext und Call-to-Action — das Standard-Trio für Sektion-Intros, Hero-Bereiche und Karten. Der Eyebrow setzt Kontext, die Headline kommuniziert, der Subtext erläutert, der Button öffnet den Weg.
Mitgliedschaft
Die Genossenschaft als Heimat
Wer Mitglied der FÖFA wird, erwirbt Genossenschaftsanteile ab 250 € und sichert sich faire Mietkonditionen, Mitbestimmungsrecht und eine starke Nachbarschaft.
Sektion 04
Schaltflächen
Primary für Haupt-Aktionen wie ‚Mitglied werden‘, Outline für sekundäre Pfade, Ghost für textuelle CTAs auf gefärbtem Grund. Größenstufen XS bis MD decken Listenkontexte, Karten und Hero-CTAs ab.
Anker Button
Sektion 05
Bilddarstellung
Einzelbild für Hero-Bereiche und Inline-Illustrationen, Bild mit Bildunterschrift für Galerie-artige Anordnungen, Image-Box als Teaser-Karte mit Titel und Beschreibungstext.
Bild mit Caption
Image-Box-Widget
Quartier Tiengen-Süd
32 sanierte Wohnungen am Tiengener Südhang — energetisch optimiert, mit Balkon und barrierefreiem Zugang.
Seit Generationen für Generationen
Wir sind die Baugenossenschaft FÖFA Waldshut-Tiengen – ein verlässlicher Partner für faires Wohnen und echte Gemeinschaft, fest verwurzelt hier am Hochrhein.
Eine Genossenschaft ist mehr als ein Vermieter – und ein Zuhause bei der FÖFA mehr als eine Wohnung. Bei uns sind unsere Mitglieder keine Kundschaft, sondern Mit-Eigentümer ihrer eigenen Genossenschaft. Das verändert alles: Wer bei der FÖFA wohnt, mietet nicht einfach Quadratmeter, sondern wird Teil einer Gemeinschaft, die seit 1950 zusammenhält. Fair . mieten . GUT – dieser Anspruch begleitet uns seit drei Vierteljahrhunderten. Tag für Tag, Haus für Haus.
Sektion 06
Bildergalerie
4-spaltiges Grid mit Lightbox — ideal für Objektsammlungen und Quartiers-Übersichten. Klick öffnet das Bild in voller Auflösung.
Galerie bis zum Rand
Sektion 07
Icon-Boxen
Drei Layout-Varianten: Icon oben für klassisches 3er-Grid, Icon links für Feature-Listen mit Lesefluss, Icon rechts für asymmetrische Block-Anordnungen.
Mieten und Wohnraum
Mietangebote und Wohnraum für Menschen in
verschiedenen Lebenslagen
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Neubau und Sanierung
Unsere aktuellen Bau- und Sanierungsprojekte
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
FÖFA Waldshut-Tiengen eG
Genossenschaft
Jubiläum – 75 Jahre
Sektion 08
Icon-Liste
Vertikale Liste mit Icon-Bullets. Eignet sich für USP-Aufzählungen, Feature-Listen und Vorteilsdarstellungen in Karten und Beschreibungstexten.
- Faire Mietkonditionen ohne Spekulation
- Mitbestimmungsrecht bei der jährlichen Versammlung
- Langfristig sichere Wohnverhältnisse
- Aktive Nachbarschaft und Quartiers-Initiativen
- Energetische Sanierung statt Spekulationswert
Sektion 09
Counter — Zahlen, die wirken
Animierte Zähler bringen die wichtigsten Kennzahlen der Genossenschaft ins Blickfeld — beim Hineinscrollen werden sie hochgezählt.
Genossenschaftliches Wohnen.
Die Vorteile im Überblick
Sektion 10
Tabs
Themenwechsel ohne Seitenwechsel — Tabs gruppieren verwandte Inhalte und reduzieren die vertikale Scroll-Distanz. Ideal für FAQs und Service-Übersichten.
Wer Mitglied der FÖFA wird, erwirbt Genossenschaftsanteile ab 250 € und sichert sich damit langfristig faire Mietkonditionen sowie volles Mitbestimmungsrecht in der Generalversammlung.
Unsere 980 Wohnungen in 108 Objekten erstrecken sich über das gesamte Stadtgebiet Waldshut-Tiengen — von der barrierefreien Einzimmerwohnung bis zum großzügigen Familien-Reihenhaus mit Garten.
Schadensmeldung, Wohnungsanfrage, Ansprechpartner: Unser Service-Team in der Geschäftsstelle ist Montag und Donnerstag von 9:30–11:30 Uhr sowie Dienstag und Donnerstag 14:30–16:30 Uhr für Sie da.
Sektion 11
Accordion — FAQ-Stil
Aufklappbare Fragen-Antworten-Paare. Halten Listen kompakt und erlauben dem Lesenden, gezielt zu vertiefen, was relevant ist.
Was bedeutet es, Mitglied der FÖFA zu sein?
Als Mitglied mieten Sie nicht einfach eine Wohnung – Sie werden Teil einer Gemeinschaft, die sich selbst gehört. Mit Ihren Genossenschaftsanteilen sind Sie Mit-Eigentümerin bzw. Mit-Eigentümer der FÖFA. Das bringt Sicherheit (ein nahezu unkündbares Wohnrecht), Mitsprache (eine Stimme in der Mitgliederversammlung) und Teilhabe (eine mögliche Dividende auf Ihr Guthaben).
Kann ich Mitglied werden, ohne eine Wohnung zu mieten?
Derzeit nicht. Eine Mitgliedschaft können aktuell nur Personen erwerben, die eine Wohnung – oder unter Umständen einen Gewerberaum – bei uns anmieten. Mitgliedschaft und Mietverhältnis gehören bei der FÖFA also zusammen.
Wer kann Mitglied werden?
Mitglied werden können natürliche Personen, Personenhandelsgesellschaften sowie juristische Personen des privaten und öffentlichen Rechts – im Regelfall in Verbindung mit der Anmietung einer Wohnung.
Wie werde ich Mitglied?
Sie unterzeichnen eine schriftliche, unbedingte Beitrittserklärung. Über die Aufnahme entscheidet der Vorstand. Vor Ihrem Beitritt stellen wir Ihnen die aktuelle Satzung zur Verfügung. In der Praxis gehen Wohnungsanmietung und Mitgliedschaft Hand in Hand – unsere Vermietung begleitet Sie dabei Schritt für Schritt.
Bin ich als Mitglied auch Eigentümer meiner Wohnung?
Nicht der einzelnen Wohnung, aber der Genossenschaft als Ganzes. Sie sind Mit-Eigentümerin bzw. Mit-Eigentümer der FÖFA und damit am gemeinsamen Vermögen beteiligt. Ihre Wohnung nutzen Sie auf Basis eines dauerhaften Nutzungsrechts – sicher und langfristig.
Sektion 12
Formular
Lorem ipsum dolor sit amet, consectetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Sektion 13
Divider & Spacer
Sichtbare Trennung mit Divider, unsichtbare Atempausen mit Spacer — die kleinsten Bausteine im Design System, mit der größten Wirkung auf Rhythmus und Lesbarkeit.
Divider · 1px solid
Divider · 2px FÖFA-Rot, kurz
Spacer · 80px (in jeder Sektion oben und unten)
Text oberhalb des 48-Pixel-Spacers.
Abstand zwischen Grids · 24px (in jeder Sektion oben und unten)
Sektion 14
Teamkarten
Auf grauer Fläche ist es wichtig, den Abstand in der Textbox zu beachten.
Die Mitarbeiter können gerne auch etwas kleinere Kärtchen haben (wenn sie sich im Akkordeon befinden). Zu achten, die Abstände bei den Textblöcken zu entfernen (Um keine Lücken zu haben)
