Design-Update 2025 - technische Details

In diesem Artikel werden technische Details zu den Änderungen im Design-Update 2025 aufgelistet um Kunden mit eigenem Layout die Migration zu erleichtern.

Checkboxen

  • Änderungen: Neues Icon vorne, Text linksbündig, optionales Icon hinten und größer
  • Optimierungen: Außenabstände, Links im Text, vertikale Zentrierung
  • Betrifft: Zusätzliches Kontaktfeld, Veröffentlichung in Spendenliste, Spende verschenken, Zusatzbetrag, Kontaktoptionen, Betrag ausblenden im Spendenshop, SEPA-Hinweis, Zusammenfassung im Spendenshop

Betragseingabe

  • Währung deutlicher und ohne Hintergrund
  • Schatten entfernt

Umschalter bei Unternehmensspende

  • Neues, vereinfachtes HTML

Anrede

  • ist jetzt immer im DOM vorhanden, aber mit "display: none" versteckt. Aufbau bleibt gleich
  • CSS Anpassung

Buttons

  • Hover- und Focuszustände ergänzt
  • Layout vereinheitlicht über alle Formulare
  • Pfeil nach rechts/links mit geändertem CSS umgesetzt

Fehlermeldungen

  • Neue HTML-Elemente und damit angepasstes CSS
  • Zusätzliches Element, nicht mehr im Label

Bankdaten

  • Label mit neuem HTML-Element umgesetzt

Prämien

  • Rahmen beim Verzichtsbutton entfernt
  • fixer, weißer Hintergrund bei der Prämienliste
  • HTML nicht geändert, nur CSS Anpassungen

Spendenshop - Zusammenfassung

  • neue, Standard-Checkbox
  • Hintergrund entfernt, Balken bei AGBs entfernt
  • reine CSS-Anpassungen
Spendenurkunden - Header

  • Signalfarbe entfernt, Hintergrund beim Teasertext entfernt 
  • reine CSS-Anpassungen

Farbänderungen

Bei diversen Elementen wurden Farben geändert, vereinheitlicht und kontraststärker gestaltet. An der Farbpalette hat sich nahezu nichts geändert, lediglich Farbkombinationen wurden angepasst. Im Einzelnen:
  • Überschrift "Bitte Zahlungsdaten eingeben": Primärfarbe → Textfarbe
  • Spendenliste: Name der Unterstützer: Grau → Textfarbe
  • Social-Sharing-Leiste "Anderen von der Spende erzählen": Primärfarbe → Textfarbe
  • Labelfarbe bei fokussierten Feldern: Primärfarbe → Labelfarbe
  • Bankdaten, Überschrift: Labelfarbe → Textfarbe
  • Neue Grauwerte für: Zahlungs-Hinweistext, SSL-Hinweistext, Eingabefelder-Rahmen, Placeholder-Texte
  • Fehlermeldungen in neuem, etwas dunklerem Rot
  • Fortschrittsnavigation bei hover: Primärfarbe → Hoverfarbe
  • Spendenshop, Produktbeschreibung: Grau → Textfarbe
  • Spendenshop, Warenkorb: Grau → Textfarbe
  • Spendenshop: Signal-Grün verändert