EmpfohlenBiogas
Maschinenbruch, Ertragsausfall und Betreiberhaftung für Ihre Anlage.
- Maschinenbruch
- Ertragsausfall
Version 1.1 · November 2026
Design System
Die digitale Agrarversicherung. Alle Grundlagen und Komponenten dieser Website, Stück für Stück erklärt.
Grundlagen
Farben
Sechs Farben, keine weiteren. Grüntöne aus der Landwirtschaft bilden das Fundament, Weiß und Weißgrau geben Ruhe, Gelbgrün setzt Akzente. Klicken Sie auf eine Farbe, um den Hex-Wert zu kopieren.
Gewichtung
40 %
25 %
10 %
10 %
10 %
5 %
Do
- Weiß als Grundfläche, Weißgrau für Karten und ruhige Abschnitte.
- Dunkelgrün für Hero-Flächen, dunkle Abschnitte und den Footer.
- Feine Linien als Dunkelgrün mit geringer Deckkraft (14 % / 32 %).
Don't
- Keine Farben außerhalb der Palette.
- Keine schwarzen Flächen: Schwarzgrün ist die dunkelste Farbe.
- Keine Verläufe und keine Effekte (Schatten, Glow, Textur) auf Farbflächen.
Kombinationen
Dunkle Schrift auf hellen Flächen, helle Schrift auf dunklen Flächen. Gelbgrün nur auf Dunkelgrün oder Schwarzgrün. Alle erlaubten Paare erreichen mindestens 4,5 : 1 (WCAG AA).
Erlaubt
AaDunkelgrün auf Weiß15,1 : 1
AaDunkelgrün auf Weißgrau13,3 : 1
AaDunkelgrün auf Hellgrün7,7 : 1
AaDunkelgrün auf Gelbgrün13,3 : 1
AaSchwarzgrün auf Hellgrün9,1 : 1
AaWeiß auf Dunkelgrün15,1 : 1
AaGelbgrün auf Dunkelgrün13,3 : 1
AaHellgrün auf Dunkelgrün7,7 : 1
AaGelbgrün auf Schwarzgrün15,8 : 1
AaWeißgrau auf Schwarzgrün15,8 : 1
Nicht erlaubt
AaGelbgrün auf Weiß✕ 1,1 : 1
AaGelbgrün auf Hellgrün✕ 1,7 : 1
AaWeiß auf Weißgrau✕ 1,1 : 1
AaDunkelgrün auf Schwarzgrün✕ 1,2 : 1
Typografie
Eine Familie, zwei Schnitte: Geist Extra Bold für Headlines, Geist Medium für Lauftext. Hierarchie entsteht über das Verhältnis 4x : 2x : 1x. Die Laufweite bleibt immer bei 0.
Headline4x · Extra Bold
40 → 80 px · 1,1
40 → 80 px · 1,1
.t-headlineLandwirtschaft - abgesichert.
Headline SExtra Bold
34 → 64 px · 1,1
34 → 64 px · 1,1
.t-headline-sDie digitale Agrarversicherung.
Subline2x · Medium
26 → 40 px · 1,24
26 → 40 px · 1,24
.t-sublineAgrarversicherung für Ihren Betrieb.
LeadMedium
20 → 28 px · 1,35
20 → 28 px · 1,35
.t-leadRegeln Sie Ihre Agrarversicherung einfach online.
Body1x · Medium
16 → 20 px · 1,45
16 → 20 px · 1,45
.t-bodyFARMRISK macht Ihnen den Weg zur passenden Absicherung einfach: mit klaren Informationen, verständlich erklärten Leistungen und einem direkten Onlineabschluss.
SmallMedium
16 px · 1,45
16 px · 1,45
.t-smallDie Reifenversicherung übernimmt Reparatur oder Ersatz bei Schnitten, Durchstichen und Vandalismus.
MetaMedium
14 px · 1,3
14 px · 1,3
.t-metaDo
- Headlines als Aussage mit Punkt: „Landwirtschaft - abgesichert.“
- Schlüsselwörter in Medium-Text mit Extra Bold betonen.
- Navigation und kleine Labels in Großbuchstaben, ohne Sperrung.
Don't
- Keine anderen Schriften.
- Laufweite nicht verändern, Schrift nicht stauchen oder dehnen.
- Keine Effekte auf Schrift (Schatten, Kontur, Glow).
Logo
Die Wort-Bild-Marke verbindet Bildmarke und Schriftzug. Die Bildmarke zeigt eine Kornähre und die Doppelspur der Maschinen im Feld. Ihre zwei Bögen, f und r, wölben sich schützend wie ein Dach. Nur die Originaldateien in assets/logo/ verwenden.
Freigegebene Kombinationen
Eine Bildmarke Abstand auf jeder Seite: ihre Höhe oben und unten, ihre Breite links und rechts.
Groß als Grafik (Gelbgrün auf dunklem Luftbild oder Dunkelgrün), klein als Seitenmarker vor Labels.
Do
- Dateien unverändert und in ihren Proportionen einsetzen.
- Einfarbig: Schwarzgrün auf Weiß oder Weiß auf Schwarzgrün.
- Angeschnitten (CTA-Band, Menü, Rechner, Schritte-Block) steht die Bildmarke mit ihrer flachen Basis genau auf der Kante; beschnitten wird nur seitlich.
Don't
- Marke nicht nachzeichnen, umfärben, verzerren oder mit Effekten versehen.
- Gelbgrün nie auf hellem Grund, Logo nie auf schwarzen Flächen.
- Die Bildmarke nie so anschneiden, dass ihr Fuß an der Kante abgeschnitten wird.
Bildwelt
Großzügige, authentische Aufnahmen mit klaren Kompositionen und weiten Perspektiven: modern, hochwertig, einladend. Ruhig und dokumentarisch, mit natürlichem Licht.
Do
- Weite, Negativraum, Vogelperspektive, geometrische Strukturen.
- Natürliche, gesättigte Grün- und Erdtöne; neutrales Licht.
- Sichere Motive: Hoftechnik, Rinder, Getreide, Mais, Kartoffeln, Spargel, Kohl, Rüben.
- Freie Fotos (Pexels-Lizenz) sind erlaubt, wenn sie diese Regeln erfüllen. Fotograf und Quelle stehen im Bildnachweis.
Don't
- Keine Gewächshäuser, Obstbäume, Weinreben, Windräder.
- Keine Stockfoto-Ästhetik, keine gestellten Porträts, keine Handschläge.
- Keine Sonnenuntergänge, Lichteffekte, HDR oder warmen Farbfilter.
- Keine Landschaften, die erkennbar nicht nach Mitteleuropa passen: Palmen, Reisterrassen, Hochgebirge.
Raster, Abstände & Radien
Das Brandbook definiert keine Abstände und Radien; diese Werte stammen aus der Website und orientieren sich an der Brand-in-Use-Gestaltung: abgerundete Bildrahmen, Pill-Buttons, viel Luft.
Abstände
--s-1 4--s-2 8--s-3 12--s-4 16--s-5 24--s-6 32--s-7 48--s-8 64--s-9 96--s-10 128Radien
--radius-xs 8--radius-sm 14--radius 20--radius-lg 20–32--pill 999- Container
- max. 1440 px, Seitenrand
--gutter12–32 px - Abschnitt
--section72–144 px vertikal- Breakpoints
- 640 · 760 · 860 · 900 (Navigation) · 960 · 1100 px
- Raster
- 12 Spalten, Lücke 24 px; Kacheln mit 12 px Lücke
- Spaltenkanten
- Links: Headlines und Statement an der Containerkante. Rechts: ergänzender Text, Filter und Links in Abschnitts-Intros beginnen an Spalte 7 (Seitenmitte). Artikel: Inhaltsverzeichnis in Spalte 1–3, Text in Spalte 5–11.
Abschnitte & Hilfsklassen
| Klasse | Wofür |
|---|---|
.container | Inhaltsbreite: höchstens 1440 px, mit Seitenrand. |
.section | Abschnitt mit vollem Abstand oben und unten (--section). |
.section--tight | Kürzerer Abstand für Bänder wie CTA-Band und Schritte-Block. |
.section--grau | Abschnitt auf Weißgrau, über die ganze Breite. |
.section-gap | Abstand oberhalb eines Bands ohne eigenen Abschnitt, etwa des Laufbands. |
.block | Farbfläche mit Seitenrand und großem Radius: CTA-Band, Schritte-Block, Markenmoment. |
.stack · .stack-sm | Elemente untereinander, 24 bzw. 12 px Abstand. |
.row | Elemente nebeneinander mit Umbruch, etwa zwei Buttons. |
.sr-only | Nur für Screenreader, etwa Statusmeldungen von Filtern. |
.is-in | Zustand: Das Skript hat das Element beim Scrollen eingeblendet. |
Bewegung
Bewegung führt, sie dekoriert nicht: Inhalte gleiten beim Scrollen ruhig ins Bild, Headlines bauen sich Wort für Wort auf, Bilder öffnen sich wie ein Rahmen. Bei „Bewegung reduzieren“ im System entfällt alles.
Ease out
cubic-bezier(.22, 1, .36, 1)Einblenden, Hover, RevealsEase in-out
cubic-bezier(.65, 0, .35, 1)Masken, Menü, AccordionSpring
cubic-bezier(.34, 1.56, .64, 1)Pfeile, Häkchen, kleine Bestätigungendata-reveal- Einblenden von unten; Varianten
fade,scale,mask data-split- Headline baut sich Wort für Wort auf
data-stagger- Kinder erscheinen nacheinander
data-scrub-words- Wörter werden beim Scrollen sichtbar
data-parallax- Bild bewegt sich langsamer als die Seite
data-mark-fill- Die Bildmarke im Schritte-Block füllt sich von unten in Gelbgrün, ein Drittel pro erreichtem Schritt
Ikonografie
Das FARMRISK-Icon-Set: Traktor, Kuh und Flamme von max & doris (November 2026), ergänzt um Schild mit §, Rundballen und Hof mit Silo im selben Stil. Die Website nutzt Route 02 in Linie, weil sie zu Pfeil und Häkchen passt. Route 01 in Fläche ist die Alternative aus derselben Präsentation. Daneben gibt es den Pfeil, die Bildmarke (als Seitenmarker, als Trenner im Laufband und als Fortschritt im Schritte-Block) und die Doppelspur als grafisches Motiv.
Größen: 20 px in Bedienelementen, 24 px neben Text, 36–44 px auf Kacheln. Alle Icons stehen im 24er Raster mit 2 Einheiten Rand und teilen eine Grundlinie.
Farbe: Dunkelgrün auf hellen Flächen, Gelbgrün auf Dunkelgrün.
Route 01, Fläche: Alternative, auf der Website nicht im Einsatz; Schild, Rundballen und Hof gibt es nur in Linie. SVG: Traktor, Kuh, Flamme.
Do
- Icons nur, wo sie Bedeutung tragen: Produktwelt auf Kacheln, Betriebsart im Finder.
- Neue Icons nur im Raster des Sets: 24 Einheiten, 2 Einheiten Rand, 1 Einheit Linie, gerade Enden, gemeinsame Grundlinie.
- Immer mit Text kombinieren; das Icon ist dekorativ (
aria-hidden), die Bedeutung trägt das Label. - Einbinden über das Sprite:
<use href="assets/icons/farmrisk-icons.svg#cow">.
Don't
- Linie und Fläche nicht mischen.
- Nicht verzerren, drehen, nachzeichnen oder in Kreise setzen.
- Kein Icon ohne klares Motiv aus Landwirtschaft oder Produkt: lieber keins als ein beliebiges.
- Ein Icon nie zwei Bereichen zuordnen. Die Flamme gehört zu Erneuerbare Energien; der Feuerlayer bleibt ohne Icon, bis es ein eigenes gibt.
- Icons ersetzen nicht die Bildmarke als Seitenmarker.
Komponenten
Buttons
Pill-Form mit Pfeil im Kreis, wie im Brandbook. Beim Hover wächst der Kreis zur Füllung und eine feine 1px-Kontur erscheint, bei allen Varianten gleich. Labels beginnen mit einem Verb.
Primär (Weiß) auf Fotos und dunklen Flächen. Das Original aus dem Hero.
Dunkel, Ghost, Klein, Text auf Weiß, Weißgrau und Hellgrün.
Akzent (Gelbgrün) nur auf Dunkelgrün oder Schwarzgrün.
Runder Pfeil-Button und Textlink. Der Pfeil dreht sich beim Hover von ↗ nach →.
Hero
Luftbild in einem abgerundeten Rahmen (.hero mit .hero__frame). Headline unten links in Weiß, weißer Pill-Button unten rechts (.hero__cta, blendet nach dem Laden ein). Beim Laden zoomt das Bild sanft heran und die Headline baut sich auf; beim Scrollen tritt der Rahmen leicht zurück. Auf der Startseite füllt der Hero den Bildschirm und zeigt unten mittig den Scroll-Hinweis; Unterseiten nutzen .hero--page mit geringerer Höhe.
Die digitale Agrarversicherung.
Landwirtschaft -
abgesichert.
Technik -
abgesichert.
Unterseite. Ab der zweiten Ebene stehen die Brotkrumen (C-17) an Stelle des Kickers. Bereichsseiten wandeln den Claim ab: „Bereich - abgesichert.“
Seitenkopf ohne Foto (.page-head) für Seiten, die sofort zur Sache kommen, wie Kontakt und Ratgeber: Eyebrow und Headline links, Einleitung rechts, unten bündig.
Eyebrow & Statement
Das Eyebrow-Label mit Bildmarke ordnet Abschnitte ein und steht direkt über dem, was es benennt. Das Statement steht groß (Headline-S-Größe in Geist Medium, Schlüsselwörter in Extra Bold) an derselben linken Kante wie die Headlines; die Wörter werden beim Scrollen nacheinander sichtbar. Ergänzender Text und Link stehen in der rechten Hälfte ab Spalte 7. Als eigener Abschnitt steht es in .statement, das den Abstand nach oben und unten setzt.
Do
- Statement und Headlines teilen eine linke Kante.
- Ergänzender Text beginnt an Spalte 7, wie die rechte Spalte der Abschnitts-Intros.
- Label direkt über dem Statement.
Don't
- Label nicht allein in eine eigene Spalte stellen.
- Ergänzenden Text nicht deutlich kleiner als Body setzen.
Abschnitts-Intro. Label und Headline in Spalte 1–6, ergänzender Text oder Link ab Spalte 7, unten bündig.
Bereichskachel
Farbflächen in Hellgrün, Gelbgrün, Weißgrau und Dunkelgrün mit dem Namen unten links, wie im Brandbook. Jeder der sieben Versicherungsbereiche hat eine feste Farbe und einen festen Platz. Oben rechts steht ein Icon, wenn das Set ein passendes Motiv hat. Beim Hover erscheinen Kurzbeschreibung und Pfeil, der Pfeil übernimmt den Platz des Icons. Auf der eigenen Bereichsseite trägt die Kachel das Badge „Sie sind hier“.
Zustände. „Management“ als aktuelle Seite mit Badge „Sie sind hier“.
Bereichsraster. Die sieben Bereiche in fester Reihenfolge plus eine Kachel je Seite (Übersicht, Finder oder Rechner), 4 × 2, auf dem Smartphone 2 × 4. Benachbarte Kacheln haben nie dieselbe Farbe. Der Feuerlayer bleibt ohne Icon, weil das Set noch kein Motiv dafür hat.
7 Bereiche. Ein digitaler Weg.Vom Stall bis zur Biogasanlage: vergleichen und online abschließen.
TechnikTraktor, Maschinen und Reifen.Sie sind hier
Erneuerbare EnergienBiogas und Photovoltaik.Sie sind hier
ManagementD&O, Rechtsschutz und Cyber.Sie sind hier
BetriebHaftpflicht, Gebäude und Ertragsausfall.Sie sind hier
TierertragsschadenFür Rind, Schwein und Geflügel.Sie sind hier
Ernteerzeugnisse & WarenVorräte im Lager und auf dem Feld.Sie sind hier
FeuerlayerZusätzlicher Feuerschutz für große Werte.Sie sind hier
Startseite. Vorn die Fotokachel (2 × 2), danach die sieben Bereiche; die letzte Kachel ist doppelt breit, damit das Raster aufgeht.
Do
- Feste Farben: Technik Hellgrün, Erneuerbare Energien Gelbgrün, Management Weißgrau, Betrieb Dunkelgrün, Tierertragsschaden Dunkelgrün, Ernteerzeugnisse & Waren Hellgrün, Feuerlayer Gelbgrün.
- Dunkle Schrift auf hellen Kacheln, Weiß auf Dunkelgrün.
- Icon oben rechts, 36–44 px; auf Touch-Geräten bleibt das Icon stehen und der Pfeil entfällt.
Don't
- Keine gelbgrüne Schrift oder Pfeile auf hellen Kacheln.
- Icon und Pfeil nicht gleichzeitig zeigen.
- Reihenfolge und Farben nicht je Seite ändern; die aktuelle Seite bleibt im Raster stehen.
Produktkarte
Weißgraue Karte mit Foto, Produktname und einer Zeile Beschreibung. Der runde Pfeil-Button sitzt oben rechts in einem weißgrauen Kreis, der die Fotoecke rund ausschneidet. Die Kartenkante bleibt gerade. Zwei Karten stehen als Paar versetzt im 12er-Raster (.pcards): die erste in Spalte 1–5, die zweite tiefer in Spalte 7–11.
Produkt-Detailkarte
Für die Versicherungsübersicht: Bereich, Name, Beschreibung, versicherte Risiken als Chips, „Mehr erfahren“ zum Produktabschnitt (C-24) und „Jetzt berechnen“. Passt ein Produkt zur Auswahl „Was passt zu meinem Betrieb?“, bekommt es Rahmen und Badge. Fehlt ein passendes Foto, steht ein Farbfeld mit Doppelspur.
EmpfohlenEmpfohlenBiogas
Zustand „Empfohlen“: Rahmen in Dunkelgrün, Badge sichtbar.
- Maschinenbruch
- Ertragsausfall
Finder über dem Produktraster (.prods, 3 Spalten): Frage links, Auswahl der Betriebsart (C-09) und Statuszeile rechts. Passende Karten rücken nach vorn und bekommen Rahmen und Badge.
Beratungskarte (.prod--cta) am Ende des Produktrasters: dunkel, mit Gelbgrün-Button.
Ohne Foto: Farbfeld mit Doppelspur in vier festen Paaren (mark--dunkel, --hell, --gelb, --schwarz), dieselben wie im Beispiel-Panel des Produktabschnitts.
Chips & Badges
Chips kennzeichnen Kategorien, Risiken und Filter oder führen als Sprunglinks zu Abschnitten der Seite. Badges markieren Zustände wie „Neu“, „In Kürze“, „Empfohlen“ oder „Sie sind hier“.
Standard
Kontur
Erneuerbare Energien
Dunkel
Neu
In Kürze
Filter-Chips mit aria-pressed, aktiv in Dunkelgrün.
Sprunglinks: Kontur-Chips im Statement einer Bereichsseite, die zu den Produktabschnitten führen. Nur ab zwei Abschnitten.
Auf Dunkel
Akzent
Segmented Control
Für Zielgruppen-Tabs, die Produktempfehlung und Szenarien. Die dunkle Markierung gleitet zur gewählten Option. Bedienbar mit Pfeiltasten. Optionen können ein Icon vor dem Label tragen, wie die Betriebsarten im Finder.
Für Ihren eigenen Betrieb.
Sie kennen Ihren Hof am besten. FARMRISK zeigt Ihnen, welche Absicherung dazu passt, und Sie schließen sie direkt online ab.
- Alle Agrarversicherungen an einem Ort
- Leistungen verständlich erklärt
Zielgruppen-Panel (.audience__panel) unter den Tabs: Foto in Spalte 1–6, Text ab Spalte 7. Beim Wechsel schiebt sich das Foto von rechts ins Bild und der Text steigt nacheinander auf.
Accordion
Für FAQ. Basiert auf <details>, öffnet sich mit weicher Höhenanimation; das Plus dreht sich zum Minus. Im FAQ-Abschnitt stehen links Label, Headline und Kontakt-Button, rechts die Fragen. Auf Weißgrau werden die Kreise weiß.
Was ist ein Layer?
Eine zusätzliche Deckungsschicht über der Grundversicherung.
Auf Weißgrau, wie im FAQ der Bereichsseiten.
FAQ-Abschnitt (.faq__grid): links Label, Headline, Hinweis und Kontakt-Button, rechts die Fragen.
Formularfelder
Weißgraue Felder mit Label darüber. Im Fokus werden sie weiß mit dunkelgrünem Rahmen. Fehler zeigen einen stärkeren Rahmen und eine Meldung mit Ausrufezeichen; die Palette enthält bewusst kein Rot.
Formular: .form stapelt die Felder, .form__row setzt zwei nebeneinander (auf dem Smartphone untereinander). Freiwillige Felder tragen „(optional)“ im Label; Pflichtfelder bleiben ohne Zeichen.
Auswahlkarten für Radio- und Checkbox-Gruppen im Rechner.
Gruppiert: Bei langen Listen ordnen Bereichs-Labels die Karten, wie die Versicherungen im Rechner.
Stepper & Fortschritt
Zeigt im Rechner, wo man steht: erledigt in Hellgrün, aktuell in Gelbgrün. Der Fortschrittsbalken wird auch als Lesefortschritt im Artikel genutzt.
- ✓Ihre Rolle
- 2Absicherung
- 3Ihr Betrieb
Kennzahlen
Große Zahl in Headline-Größe, die beim Erscheinen hochzählt, darunter eine kurze Erklärung.
Laufband
Produktnamen laufen endlos durch, getrennt von der Bildmarke in Schriftfarbe. Beim Scrollen beschleunigt das Band kurz. Gelbgrün als Fläche mit dunkelgrüner Schrift.
Artikelkarte
Teaser für den Ratgeber: veröffentlichte Beiträge in Dunkelgrün, geplante Themen in Weißgrau mit Badge „In Kürze“.
Feature-Karte (.acard--feature) für den neuesten Beitrag, auf Weißgrau über die volle Breite des Rasters (.acards). Ohne Foto trägt sie die PV-Illustration: Module in Hellgrün und Gelbgrün auf Dunkelgrün, die sich beim Erscheinen nacheinander aufbauen.
Infobox & Checkliste
Die Infobox hebt Tipps hervor, hell oder dunkel; mit Button (.ask) wird sie zur Aufforderung, etwa „Ihr Thema fehlt?“ im Ratgeber. Die Häkchenliste zählt Leistungen auf. Die Checkliste lässt Leser ihren eigenen Vertrag prüfen, merkt sich den Stand im Browser, lässt sich zurücksetzen und lobt, wenn alles erfüllt ist (.checklist__done).
Häkchenliste für Leistungen, etwa „Versichert sind unter anderem“ im Produktabschnitt (C-24). Auf Dunkel wird der Kreis gelbgrün.
Brotkrumen & Inhaltsverzeichnis
Brotkrumen erscheinen erst ab der zweiten Ebene und ersetzen dort die Eyebrow-Zeile über der Headline, im Foto-Hero den Kicker. Auf Seiten der ersten Ebene entfallen sie, denn die Navigation markiert die aktuelle Seite. „Start“ wird weggelassen, das Logo führt zur Startseite. Auf dem Smartphone wird der Pfad zu „← übergeordnete Seite“. Das Inhaltsverzeichnis im Artikel bleibt seitlich stehen und markiert den aktuellen Abschnitt; unter 1000 px entfällt es, der Fortschrittsbalken oben zeigt dann die Position.
Photovoltaik-Versicherung für Landwirte.
Zwei Ebenen. Der Pfad steht an Stelle der Eyebrow-Zeile, bündig mit der Headline.
Drei Ebenen. Übergeordnete Ebenen sind Links, die aktuelle Seite steht als Text am Ende.
Smartphone. Unter 640 px zeigt der Pfad nur noch die übergeordnete Seite mit Pfeil zurück.
Do
- Ab der zweiten Ebene ersetzt der Pfad die Eyebrow-Zeile.
- Pfad, Eyebrow und Headline stehen auf einer Kante.
- Übergeordnete Ebenen verlinken; die aktuelle Seite steht als Text am Ende.
- Auf dem Smartphone: „← übergeordnete Seite“.
Don't
- Keine Brotkrumen auf Seiten der ersten Ebene.
- Kein „Start“ im Pfad und keine zusätzliche Eyebrow mit demselben Begriff.
- Den Pfad nicht einrücken oder frei über der Seite schweben lassen.
Tabelle
Für Vergleiche. Kopfzeile in Dunkelgrün, Zeilen abwechselnd Weiß und Weißgrau. Scrollt auf kleinen Bildschirmen seitlich.
CTA-Band
Abschluss fast jeder Seite: Hellgrüne Fläche, Aussage mit betontem Schlüsselwort, zwei Buttons und eine große schwarzgrüne Bildmarke, die mit ihrer Basis auf der Unterkante steht und beim Erscheinen einmal aufsteigt. Auf der Seite steht es als .block in einem .section--tight; der Text kann je Seite wechseln, etwa „Werden Sie FARMRISK-Partner.“ für Vermittler.
Rechner-Layout
Für geführte Abläufe wie den Tarifrechner: links das dunkle Panel mit Titel, Schritten, Auswahl und Bildmarke, rechts der aktuelle Schritt. Auf dem Desktop passt alles auf einen Bildschirm. Die Buttonleiste ist unten fixiert, auf Höhe der Panel-Unterkante, und steht bei jedem Schritt an derselben Stelle. Reicht der Platz nicht, scrollt nur der Schrittinhalt. Auf der Seite heißt der Rahmen .calc.
Verkleinerte Vorschau. Ist noch nichts gewählt, steht unter „Ihre Auswahl“ ein Hinweis (.calc__empty). Live ansehen
Zusatzfragen und Fehler. Ein umrandeter Block (.calc__cond) erscheint nur, wenn das gewählte Produkt ihn braucht. Fehlt eine Auswahl, steht die Meldung unter den Karten.
Abschluss. Weißgraue Fläche mit Bildmarke, Dank und Zusammenfassung der Angaben (.calc__summary).
Do
- Buttonleiste immer unten, auf Höhe der Panel-Unterkante, bei jedem Schritt gleich.
- Nur der Schrittinhalt scrollt, nie die ganze Seite.
- Auf dem Smartphone klebt die Buttonleiste am unteren Bildschirmrand.
- Wird es eng, wird das Panel kompakter (Abstände, Titel, Chips); die Bildmarke bleibt.
Don't
- Buttons nicht mit dem Inhalt mitwandern lassen.
- Keine Schritte, für die man erst zur Buttonleiste scrollen muss.
- Die Bildmarke im Panel nicht ausblenden oder ihren Fuß abschneiden.
Schritte-Block
Erklärt einen Ablauf in Schritten. Links die Schritte, rechts Headline, Text und Button. In der rechten unteren Ecke steht die Bildmarke auf der Kante: schwarzgrün angelegt, füllt sie sich beim Scrollen von unten in Gelbgrün, zu gleichen Teilen pro erreichtem Schritt (bei drei Schritten je ein Drittel). Die Linie über einem Schritt wird hellgrün, sobald er erreicht ist; beim Zurückscrollen leert sich alles wieder. Unter jedem Schritt können Kontur-Chips die Stichworte nennen (.step__tags).
Live: Scrollen Sie langsam durch die Vorschau. Die Bildmarke füllt sich mit jedem erreichten Schritt.
Do
- Schritte links, Headline, Text und Button rechts; im HTML steht die Headline zuerst (Lesereihenfolge).
- Bildmarke rechts unten mit der Basis auf der Kante, nur rechts angeschnitten.
- Füllung von unten, in gleichen Teilen pro Schritt.
- Smartphone: Headline, dann Schritte, die Bildmarke darunter mit eigenem Platz.
Don't
- Die Bildmarke nicht hinter Text legen oder frei schweben lassen.
- Sie nicht von Anfang an voll gelbgrün zeigen: die Füllung ist der Fortschritt.
- Keine weitere gelbgrüne Fläche neben dem Button.
Sprachauswahl
Wechselt zwischen Deutsch und Englisch und führt immer zur gleichen Seite in der anderen Sprache. Zwei Kürzel in einer Pille, die aktuelle Sprache ist gefüllt, wie beim Segmented Control. Auf dem Desktop steht sie in der Navigationsleiste vor dem Button, auf dem Smartphone im Menü.
Hell: in der Navigationsleiste.
Dunkel: im Menü auf dem Smartphone.
Do
- Kürzel DE und EN in Großbuchstaben, aktuelle Sprache gefüllt und nicht klickbar.
- Der Link führt zur gleichen Seite in der anderen Sprache.
- Links mit
langundhreflangauszeichnen, die Gruppe mit einem Label.
Don't
- Keine Flaggen: Sprache ist nicht Land.
- Kein Dropdown für nur zwei Sprachen.
- Nicht auf die Startseite der anderen Sprache springen.
Produktabschnitt
Stellt eine Versicherung auf ihrer Bereichsseite vor: Nummer, Name, Kurzbeschreibung, „Versichert sind unter anderem“ als Häkchenliste (C-16), „Jetzt berechnen“ und „Beratung anfragen“. Daneben steht ein Foto oder, wo es kein passendes Motiv gibt, ein Beispiel aus der Praxis auf einem Farbfeld mit Doppelspur. Auf dem 12er-Raster beginnt der Text an Spalte 7; jeder zweite Abschnitt ist gespiegelt, der Text steht dann in Spalte 1–5. Abschnitte trennt eine Haarlinie; alle Abschnitte einer Seite stehen zusammen in .psecs. Auf dem Smartphone steht das Bild über dem Text.
Reifen
Reifen für Schlepper und Erntemaschinen sind teuer und schnell beschädigt.
- Schnitte und Durchstiche, etwa durch Steine oder Stoppeln
- Schäden durch Fremdkörper und Vandalismus
Mit Foto. Bild in Spalte 1–6 mit Abstand zum Text, Seitenverhältnis 5 : 4.
Gespiegelt, mit Beispiel-Panel. Vier Farbpaare: Dunkelgrün mit Gelbgrün, Hellgrün mit Dunkelgrün, Gelbgrün mit Dunkelgrün, Schwarzgrün mit Hellgrün. Die Doppelspur wächst aus der Ecke unten rechts.
Do
- Ein Abschnitt pro Versicherung, mit Anker (
id) für Produktmenü und Sprunglinks. - Vier Häkchen, kurz und konkret.
- Abschnitte im Wechsel spiegeln, beginnend mit dem Bild links.
Don't
- Kein Stockfoto nur, damit ein Bild da ist: dann das Beispiel-Panel.
- Keine Preise und keine Zusagen, die nicht in den Bedingungen stehen.
- Nicht mehr als zwei Aktionen plus ein Ratgeber-Link.
Wertekarten
Drei weiße Karten auf Weißgrau mit Nummer, Titel und kurzem Text, für Gründe und Vorteile: „Warum FARMRISK“ in der Übersicht, „Ihre Vorteile“ für Vermittler. Sie erscheinen nacheinander.
- 01
Klarheit & Verständlichkeit
Komplexe Versicherungsthemen, einfach erklärt.
- 02
Authentizität & Nahbarkeit
Ehrlich, direkt und auf Augenhöhe.
- 03
Sicherheit & Vertrauen
Transparente Leistungen und ein unkomplizierter Prozess.
Do
- Genau drei Karten, nummeriert 01–03.
- Titel als Substantive, Text in ein bis zwei Sätzen.
Don't
- Keine Icons oder Bilder in den Karten.
- Nicht auf Weiß setzen: Die Karten brauchen den weißgrauen Grund.
Markenmoment
Ein Luftbild über die volle Breite mit großer gelbgrüner Bildmarke in der Mitte und dem Markensatz unten links. Für einen ruhigen Moment zwischen zwei Inhaltsabschnitten der Startseite. Beim Scrollen bewegt sich das Foto langsamer als die Seite, und die Bildmarke wächst mit einer kleinen Drehung auf ihre volle Größe.
Die digitale Agrarversicherung.
Modern, digital und nah an der Landwirtschaft. Damit Sie sich auf Ihren Betrieb konzentrieren können.
Do
- Luftbild mit ruhiger Struktur, abgedunkelt mit Schwarzgrün.
- Höchstens einmal pro Seite.
Don't
- Keine Buttons oder Links im Markenmoment.
- Die Bildmarke nicht anschneiden oder umfärben.
Kontakt
Kontaktwege als Karten (.ccard) neben dem Formular (.contact). Weißgraue Karten für Telefon und E-Mail, Dunkelgrün für „Schaden melden“, Hellgrün für Vermittler. Ein Klick auf eine Karte mit Anliegen wählt das Anliegen im Formular vor. Nach dem Absenden ersetzt eine Bestätigung das Formular.
Kontaktkarten. Icon im Kreis, Art in Großbuchstaben, Wert fett, Hinweis klein. Beim Hover heben sie sich leicht an.
Formularblock mit feiner Kontur und großem Radius, rechts die Bestätigung nach dem Absenden.
Do
- Höchstens eine dunkle und eine hellgrüne Karte.
- Karten mit Anliegen springen zum Formular und wählen es vor.
Don't
- Keine Pflichtfelder ohne Fehlermeldung.
- Das Formular nicht auf Weißgrau setzen: Es steht mit Kontur auf Weiß.
Bild-Text-Block
Hochformatiges Foto links, rechts Label, Headline und ein längerer Text, der Schlüsselwörter in Extra Bold betont. Für die Vorstellung von FARMRISK („Über FARMRISK“). Das Foto öffnet sich beim Erscheinen aus der Mitte.
Über FARMRISK
Die digitale Agrarversicherung.
FARMRISK macht Ihnen den Weg zur passenden Absicherung einfach.
Do
- Foto im Hochformat 4 : 5, auf dem Smartphone 4 : 3 über dem Text.
- Ein bis drei Schlüsselwörter fett.
Don't
- Nicht für Produkte verwenden: dafür gibt es den Produktabschnitt (C-24).
Artikelseite
Aufbau eines Ratgeber-Artikels: oben ein Lesefortschritt über die volle Breite (.readbar, Hellgrün), dann der Kopf mit Brotkrumen (C-17), Thema als Chip, Headline links und Einleitung mit Autorenzeile rechts. Darunter ein breites Titelbild. Der Text steht im 12er-Raster: Inhaltsverzeichnis in Spalte 1–3, Text in Spalte 5–11 mit begrenzter Zeilenlänge. Am Ende stehen Quellen und ein Hinweis zur Beratung. Der ganze Artikel steht in .article.
Kopf (.article-head) mit Autorenzeile (.article-meta): Bildmarke als Avatar, Redaktion, Datum und Lesezeit, rechts „Link kopieren“.
Titelbild (.article-hero) im Format 21 : 9, auf dem Smartphone 4 : 3, mit großem Radius.
Text (.prose): Zwischenüberschriften in Subline-Größe, Absätze höchstens 66 Zeichen breit, Hervorhebungen in Extra Bold. Unten Quellen und Hinweis (.article-foot) über einer Haarlinie.
Do
- Jede Zwischenüberschrift steht im Inhaltsverzeichnis.
- Quellen nennen, mit Datum.
- Am Ende darauf hinweisen, dass der Artikel keine Beratung ersetzt.
Don't
- Keinen Fließtext über die volle Breite setzen.
- Keine Werbung mitten im Text, außer dem Artikel-CTA (C-30).
Artikel-Module
Bausteine, die einen Artikel gliedern: „Das Wichtigste in Kürze“ am Anfang, nummerierte Fakten mit Quelle, eine erklärende Grafik zum Umschalten, nummerierte Bausteine, ein Artikel-CTA und am Ende passende Kacheln. Dazu kommen Infobox, Checkliste (C-16), Tabelle (C-18) und Accordion (C-10).
Zusammenfassung (.summary) auf Weißgrau mit Häkchenliste.
Rangliste (.damage): der erste Punkt dunkel über die volle Breite, die übrigen zu zweit. Direkt darunter die Quelle (.source).
Erklärgrafik (.surge): dunkle Fläche mit Schema in den Markenfarben und Segmented Control zum Umschalten zwischen zwei Zuständen. Die Bildunterschrift erklärt den gewählten Zustand. Probieren Sie „Mit Schutz“.
Bausteine (.modules): nummerierte Karten mit Kontur, die Nummer im hellgrünen Kreis.
Artikel-CTA (.article-cta) nach dem Fazit: dunkle Fläche, Produkt als Eyebrow, Gelbgrün-Button.
Passend dazu (.related): drei Kacheln (C-05) zu den Versicherungen, um die es im Artikel geht.
Do
- „Das Wichtigste in Kürze“ immer als erstes Modul.
- Zahlen und Ranglisten mit Quelle.
- Höchstens ein Artikel-CTA, nach dem Fazit.
Don't
- Grafiken nicht ohne Text: Die Bildunterschrift erklärt, was zu sehen ist.
- Keine Module direkt hintereinander ohne Text dazwischen.