/** * ============================================================================ * EXPRESSFORMULAR 2026 -- Angleichung an das Spendenformular * ---------------------------------------------------------------------------- * Gilt fuer das Bauteil der "Donation Form Suite" von * FundraisingBox, eingebettet auf /spenden/expressspende * (Formular-UUID 01a020d0-d801-7182-81c2-0909da413e66). * * ⚠️⚠️ DAS IST NICHT DAS KLASSISCHE FORMULAR. * /spenden/dauerspende laedt ein iframe von secure.fundraisingbox.com und * wird von * /home/timeras/PhpstormProjects/MehrDemokratie/typo3conf/ext/ * custom_forms/Resources/Public/Css/FundraisingBox/fundraisingbox-2026.css * gestaltet. Diese Datei hier ist ein anderes Produkt: eine Web-Component * mit eigenem Shadow DOM, die direkt in unserer Seite steckt. Von den * 118 --fb-*-Variablen des klassischen Formulars existiert hier KEINE * einzige, und keiner seiner Selektoren trifft. Die beiden Dateien haben * nichts gemeinsam ausser den Hausfarben. * * ⚠️⚠️ WARUM ALLES !important IST -- und warum das hier kein Notnagel ist. * Das Bauteil erzeugt seine Farb- und Radienwerte aus der Backend-Einstellung * (designTokens: brandColorPrimary / brandColorSecondary / borderRadius) und * schreibt sie per style.setProperty als INLINE-Deklaration auf den Wirt. * Eine geerbte Custom Property verliert dagegen immer. Am 20.8.2026 gemessen: * ohne !important kommt NICHTS an (Sonde --spacing:10px -> Hoehe blieb exakt * 625 px), mit !important schlaegt jedes Token durch (Sonde * --color-background-default:#c8ffc8 -> Felder wurden gruen). * * ⚠️ Was NICHT geht, damit niemand danach sucht: * - ::part() -- das Bauteil vergibt 0 part-Attribute (in form.js gezaehlt). * - Regeln fuer Elemente IM Formular -- der Shadow Root ist mode:"closed", * von aussen kommt man weder per CSS-Selektor noch per JavaScript hinein. * - eigene Elemente einschleusen -- der einzige traegt einen * generierten Namen und hat einen Testabsatz nicht uebernommen. * Es bleiben also ausschliesslich vererbte Custom Properties. Alles, was * unten NICHT als Variable auftaucht, ist von hier aus nicht erreichbar. * * Die Sollwerte stammen aus dem Spendenformular, nicht aus dem Gefuehl: * .choice min-height 40px, font-size 1rem, font-weight 600 * --md-abstand 1.25rem als EINZIGER Abstandswert * Eingabefelder weiss mit #c9ced6, Text #606060 * Fokus 2px --md-blau-dunkel * ============================================================================ */ frb-donation-form { /* ---- Hausfarben -------------------------------------------------------- * Quelle ist der :root-Block am Ende von fundraisingbox-2026.css, dort * gemessen an https://dev.mehrdemokratie.de/testseite-farben. * Jede Farbe hat ihren eigenen Hover-Ton; die gehoeren zusammen benutzt. */ --md-blau: #1271ee; --md-blau-hover: #2e92ff; --md-blau-dunkel: #094f9e; --md-blau-dunkel-hov: #3a72b1; --md-rot: #f45e5e; --md-rot-hover: #f67e7e; --md-text: #606060; --md-rahmen: #c9ced6; --md-hintergrund: #003567; /* Der EINE Abstandswert, wie im Spendenformular. Wer die Dichte aendern will, aendert nur diese Zeile. */ --md-abstand: 1.25rem; /* ---- Betragsknoepfe und Rhythmus-Umschalter ---------------------------- * Im Vorbild sind ALLE Betragsknoepfe dunkelblau gefuellt und nur der * gewaehlte rot. Die Vorgabe hier war umgekehrt: weiss mit Rahmen, der * gewaehlte blau. * * ⚠️ Die Tokens sind an den Elementen gemessen, nicht geraten: * nicht gewaehlt Grund --color-interactive-secondary-outlined-background * Rahmen --color-border-default * Schrift--color-interactive-neutral-outlined-text * gewaehlt Grund --color-interactive-secondary-solid-background-selected * Rahmen --color-interactive-secondary-solid-border-selected * Schrift--color-interactive-secondary-solid-text-selected * * ⚠️⚠️ Rhythmus-Umschalter und Betragsknoepfe TEILEN SICH die Tokens des * gewaehlten Zustands. "Einmalig/Monatlich" rot und der gewaehlte Betrag * rot ist deshalb keine Entscheidung, sondern eine Folge: getrennt * einfaerben liesse sich nur mit einem Selektor IM Shadow-Baum, und den * gibt es nicht. Wer den Rhythmus blau haben will, bekommt auch den * gewaehlten Betrag blau. */ --color-interactive-secondary-outlined-background: var(--md-blau-dunkel) !important; --color-border-default: var(--md-blau-dunkel) !important; --color-interactive-neutral-outlined-text: #fff !important; /* ⚠️ GETEILT mit "Zu weiteren Zahlungsarten" -- und genau deshalb ist der Knopf unten dunkelblau. Vorgeschichte, damit niemand rueckbaut: Beide Elemente tragen hover:bg-interactive-neutral-outlined-background-hover, ein spezifischeres Token gibt es nicht (beide Klassenlisten vollstaendig durchgesehen, 21 bzw. 28 Klassen). Solange der Link ein heller Textlink war, hiess das: entweder #3a72b1 (Kacheln richtig, Link bekommt einen blauen Kasten) oder transparent (Link richtig, Kacheln springen auf den Formulargrund und wirken fast weiss). ⚠️ Ein halbtransparentes Weiss loest es NICHT -- rgba(255,255,255,.2) ist rechnerisch exakt #3a72b1 ueber #094f9e, aber background-color wird ERSETZT, nicht ueberlagert: gemessen mischte sich die Kachel mit dem Formulargrund und wurde fast weiss. Ausweg war, den Link ebenfalls dunkelblau zu machen (s. unten) -- dann WOLLEN beide dieselbe Ueberfahren-Farbe, und der Konflikt ist keiner mehr. */ --color-interactive-neutral-outlined-background-hover: var(--md-blau-dunkel-hov) !important; --color-interactive-secondary-solid-background-selected: var(--md-rot) !important; --color-interactive-secondary-solid-border-selected: var(--md-rot) !important; --color-interactive-secondary-solid-text-selected: #fff !important; /* ⚠️ Der GEWAEHLTE Zustand hat einen eigenen Ueberfahren-Ton, und dessen Vorgabe ist BLAU -- gemeldet am 21.8.2026 als "das hover blau passt nicht" am roten Freibetragsfeld. Betrifft genauso den gewaehlten Betragsknopf und den gewaehlten Rhythmus. #f67e7e ist --md-rot-hover aus der Palette: die Vorlage nennt zu jeder Farbe ihren Hover-Ton, und beim Rot ist er HELLER, nicht dunkler. ⚠️ Diese Tokens waren von aussen nicht auffindbar -- die zugehoerige Regel steht im Stilblatt des Shadow-Baums, und das laesst sich nur in den Entwicklerwerkzeugen lesen. Der Name kam vom Nutzer: .hover\:bg-interactive-secondary-solid-background-selected-hover\!:hover Die Utility traegt selbst !important; unser Wert setzt sich trotzdem durch, weil er nur die VARIABLE belegt, die sie ausliest. */ --color-interactive-secondary-solid-background-selected-hover: var(--md-rot-hover) !important; --color-interactive-secondary-solid-border-selected-hover: var(--md-rot-hover) !important; --color-interactive-secondary-solid-text-selected-hover: #fff !important; /* Die Schiene hinter dem Umschalter stand auf #e3e8ef (hellgrau). Auf hellgrauem Grund waere die jetzt weisse Schrift unlesbar -- die Schiene muss also mitwandern. Das ist dieselbe Falle wie im Spendenformular: wer eine Variable umwidmet, muss jede daran haengende Eigenschaft nachziehen. */ --segmented-control-background: var(--md-blau-dunkel) !important; /* ---- Masse der Betragsknoepfe ------------------------------------------ * Ziel sind die 40 px des Vorbilds (.choice { min-height: 40px }). * Rechnung: Zeile 1.5 x 16 px = 24 px, zwei Rahmen à 1 px = 2 px, * bleiben 14 px fuer oben und unten -> 7 px = 0.4375rem. * * ⚠️ Auf Desktop setzt das Bauteil mit md:p-(--toggle-button-padding-x) * ALLE VIER Seiten aus der X-Variablen. Der Wert ist deshalb zugleich der * seitliche Innenabstand -- das faellt nicht auf, weil die Knoepfe im * Raster ohnehin gleich breit sind. */ --toggle-button-padding-x: 0.4375rem !important; --toggle-button-padding-y-mobile: 0.4375rem !important; --toggle-button-font-size: 1rem !important; --toggle-button-line-height: 1.5 !important; --toggle-button-gap: 0.625rem !important; /* ⚠️ 700, nicht 600. Nachgelesen in der Vorlage statt geschaetzt: .choice .amount { font-weight: 700 } -- 600 ist dort die Schrift der WEITER-Knoepfe (--fb-button-font-weight), nicht die der Betragskacheln. Ich hatte zuerst 600 gesetzt. */ --toggle-button-font-weight: 700 !important; /* ⚠️ Auf schmalen Fenstern (unter 768 px) nimmt die Beschriftung NICHT --toggle-button-font-size, sondern --paragraph-font-size-lg (1.25em). Ohne diese Zeile waren die Knoepfe dort 46 px hoch und 20 px gross, auf Desktop dagegen 40/16 -- derselbe Knopf in zwei Groessen. Geprueft, wer das Token sonst noch benutzt: NUR diese drei Beschriftungen. Sollte spaeter eine Meldung oder ein neuer Textblock damit gestaltet werden, ist diese Zeile erneut zu pruefen. */ --paragraph-font-size-lg: 1rem !important; /* ---- Rhythmus-Umschalter, Masse ---------------------------------------- */ --segmented-control-height: 40px !important; --segmented-control-height-mobile: 40px !important; --segmented-control-font-size: 1rem !important; --segmented-control-font-size-mobile: 1rem !important; --segmented-control-font-weight: 700 !important; /* ⚠️⚠️ Die Luecke zwischen "Einmalig" und "Monatlich" bleibt bewusst 0. Eine Luecke laesst sich zwar setzen (10 px waren eingebaut und geometrisch nachgemessen), sie ist aber UNSICHTBAR: der nicht gewaehlte Eintrag hat gar keinen eigenen Grund (gemessen: rgba(0,0,0,0)) -- das Dunkelblau kommt von der durchgehenden Schiene, die auch unter der Luecke durchlaeuft. Sichtbar wuerde sie nur mit heller Schiene, und die verlangt dunkle Schrift; dasselbe Textfarb-Token gilt aber auch fuer die Betragskacheln, die dann ebenfalls hell werden muessten. Am 20.8.2026 vorgelegt und so entschieden: dunkel bleiben, ohne sichtbare Luecke. */ --segmented-control-gap: 0 !important; --segmented-control-line-height: 1.5 !important; --segmented-control-line-height-mobile: 1.5 !important; --segmented-control-item-padding-x: 0.75rem !important; --segmented-control-item-padding-y: 0.25rem !important; --segmented-control-item-padding-y-mobile: 0.25rem !important; /* ---- Betragsfeld ------------------------------------------------------- * Im Vorbild ist das Freibetragsfeld ein normales Eingabefeld: weiss, * grauer Rahmen, Text in --md-text. Hier war es 72 px hoch mit einer * 28 px grossen, halbfetten Zahl. */ --input-amount-height: 40px !important; --input-amount-height-mobile: 40px !important; --input-amount-content-padding-y: 0.25rem !important; --input-amount-content-padding-y-mobile: 0.25rem !important; --input-amount-content-padding-x: 0.75rem !important; --input-amount-currency-font-size: 1rem !important; --input-amount-currency-font-size-mobile: 1rem !important; /* ⚠️ NAMENSFALLE, am 20.8.2026 durchgemessen: die Schrift im Feld haengt an --input-amount-placeholder-*, NICHT an --input-number-*, obwohl der zweite Name danach klingt. Kontrollmessung: Platzhalter-Token auf 900 -> Feld wurde 900; --input-number-font-weight auf 900 -> Feld blieb 400. Die --input-number-*-Zeilen sind deshalb bewusst NICHT gesetzt. 700 ist der Wert der Vorlage: .input-custom-amount { font-weight: 700 }. ⚠️ Dort ist nur der EINGEGEBENE Wert 700, der Platzhalter 400 -- hier haengen beide am selben Token, trennen laesst sich das nicht. 700 gewinnt, weil im Normalfall ein Betrag vorbelegt ist und der Platzhalter gar nicht zu sehen. */ --input-amount-placeholder-font-size: 1rem !important; --input-amount-placeholder-font-size-mobile: 1rem !important; --input-amount-placeholder-font-weight: 700 !important; /* Eigene Tokens des Feldes -- beruehren die Knoepfe nicht (geprueft: das Feld nutzt --color-form-control-*, die Knoepfe --color-border-default). Weiss, nicht der Formulargrund #f8fafc: die Vorlage hat .choice.choice-custom { background-color: #fff }. */ --color-form-control-background: #fff !important; --color-form-control-border: var(--md-rahmen) !important; --color-form-control-text: var(--md-text) !important; /* Das Feld hat EIGENE Ueberfahren-Tokens -- unabhaengig von allem anderen, am Element abgelesen (hover:bg-form-control-background-hover, hover:text-form-control-text-hover, hover:border-form-control-border-hover). Voreingestellt war ein fremdes Blau als FLAECHE; gemeldet als "komisches Blau". ⚠️ Zweiter Anlauf: ich hatte den Rahmen auf Hausblau gesetzt -- damit war der Wechsel zwar in Hausfarbe, aber es gab ihn weiterhin ("Hover ist immer noch gleich"). Die Vorlage laesst das Freibetragsfeld beim Ueberfahren UNVERAENDERT; nur die blauen Kacheln hellen auf. Alle drei Werte stehen deshalb auf dem Normalzustand: kein Hover. */ --color-form-control-background-hover: #fff !important; --color-form-control-text-hover: var(--md-text) !important; --color-form-control-border-hover: var(--md-rahmen) !important; /* ⚠️ Die Platzhalterfarbe wird NICHT gesetzt: die Vorgabe des Bauteils ist bereits #9199a5 -- exakt der Wert der Vorlage (.choice.choice-custom input::placeholder { color: #9199a5 }). Nachgemessen mit Positivkontrolle: --color-form-control-placeholder auf Magenta schlaegt durch, drei Kontrolltokens nicht. Eine Zeile, die den vorhandenen Wert wiederholt, waere nur Ballast. */ /* ---- Fliesstext und Ankreuzfeld ---------------------------------------- * Die Belegung von --color-text-subtle steht weiter unten, zusammen mit * der Begruendung -- hier stand sie frueher doppelt. * * Kaestchengroesse wie in der Vorlage: --fb-checkbox-size: 1rem = 16 px (hier waren 20 px voreingestellt), Rahmen 1 px, Radius 0. * * ⚠️⚠️ WAS HIER NICHT GEHT, und warum es beim naechsten Blick auffaellt: * die Vorlage will VIER verschiedene Farben -- * Rahmen unangekreuzt #e5e7eb (sehr hell) * Fuellung angekreuzt #1271ee (Hausblau, --fb-primary) * Beschriftung #606060 * Hinweis darunter #606060 * Hier speist ALLE VIER dasselbe Token --color-text-subtle: das Kaestchen * traegt text-text-subtle / border-text-subtle / ring-text-subtle, und die * Regel des Bauteils lautet * input[type=checkbox]:checked { background-color: currentColor } * -- die Fuellung IST also die Textfarbe. Ein eigenes Farb-Token fuer das * Kaestchen gibt es in der ganzen --checkbox-Gruppe nicht (7 Variablen, * alle nur Masse). Getrennt einfaerben ginge nur mit einem Selektor im * Shadow-Baum. * ⚠️⚠️ AM 21.8.2026 ZWEIMAL ENTSCHIEDEN -- Endstand ist #606060. * Erst wurde Hausblau gewaehlt (Kaestchen hat Vorrang), am gebauten * Ergebnis dann verworfen: mit Blau werden Beschriftung ("Ich moechte den * Newsletter erhalten") UND der Hinweis darunter ("Name & E-Mail werden an * die Organisation uebermittelt") ebenfalls blau, und blauer Fliesstext * liest sich wie ein Link, obwohl beide Zeilen keiner sind. * Jetzt also: Texte auf dem Vorlagenwert #606060, das Kaestchen grau * statt hausblau. Blau kostet die beiden Texte -- das ist der ganze * Handel, eine Zeile in jede Richtung. * ⚠️ Beim Pruefen NICHT nach dem Bildschirmfoto urteilen: im komprimierten * Ausschnitt sah die Beschriftung dunkel aus, gemessen war sie blau. */ --color-text-subtle: var(--md-text) !important; --checkbox-control-size: 1rem !important; --checkbox-border-width: 1px !important; /* ---- Knoepfe ("Zu weiteren Zahlungsarten") ------------------------------ * Masse wie --fb-button-padding im Spendenformular. Der PayPal-Knopf ist * eine Grafik des Anbieters und bleibt davon unberuehrt. */ --button-padding-x: 1.5rem !important; --button-padding-y: 0.55rem !important; --button-medium-font-size: 1rem !important; --button-medium-line-height: 1.5 !important; /* "Zu weiteren Zahlungsarten" als dunkelblauer Knopf im selben Ton wie die Betragskacheln -- entschieden am 20.8.2026, nachdem der Hover-Konflikt (s. oben) sich mit Tokens nicht aufloesen liess. ⚠️ Der GRUND-Token gehoert ihm allein (die Kacheln nehmen --color-interactive-secondary-outlined-background), nur der Hover ist geteilt. Beide auf denselben Ton zu stellen macht die Teilung harmlos. ⚠️ Der Name des Textfarb-Tokens ist irrefuehrend: -text-focus ist der NORMALZUSTAND (am Element nachgelesen), nicht der Fokuszustand. ⚠️ Die Unterstreichung bleibt -- sie kommt aus einer Utility-Klasse am Element und ist ohne Selektor im Shadow-Baum nicht abzuschalten. */ --color-interactive-neutral-outlined-background: var(--md-blau-dunkel) !important; --color-interactive-neutral-outlined-text-focus: #fff !important; --color-interactive-neutral-outlined-text-hover: #fff !important; /* ---- Abstaende --------------------------------------------------------- * Alle drei auf denselben Wert, wie im Spendenformular. Gemessen ergibt * das 20 px zwischen Umschalter und Knoepfen UND zwischen Knoepfen und * Feld -- vorher waren es zwei verschiedene Werte. */ --container-gap: var(--md-abstand) !important; --fieldset-gap: var(--md-abstand) !important; --input-amount-section-gap: var(--md-abstand) !important; /* ---- Fokus ------------------------------------------------------------- * Das Spendenformular hat dafuer EINE Sammelregel am Dateiende (2px * --md-blau-dunkel). Hier gibt es keine Selektoren, also drei Tokens. * Mit Positivkontrolle geprueft: Token auf Magenta -> Ring wurde magenta, * also zeigt der blaue Ring tatsaechlich unseren Wert und nicht die * Vorgabe des Anbieters. */ --color-form-control-focus-outline: var(--md-blau-dunkel) !important; --color-interactive-focus-outline: var(--md-blau-dunkel) !important; --color-interactive-secondary-focus-outline: var(--md-blau-dunkel) !important; /* ⚠️⚠️ Der Fokusring ist KEIN outline, sondern ein ::after-Rechteck. Am Markup nachgelesen, nachdem zwei Linien stehen blieben: has-focus-visible:outline-0! <- outline wird ausdruecklich abgeschaltet has-focus-visible:after:absolute has-focus-visible:after:-inset-(--input-amount-outline-offset) has-focus-visible:after:border-(length:--input-amount-outline-width) has-focus-visible:after:border-form-control-focus-outline Entscheidend ist das MINUS in -inset-(...): der gesetzte Wert wird negiert. Die Vorgabe war calc(.0625em + .125em + .125em) = 5px, also inset:-5px -> ein abgesetzter Ring mit Luft. Mein erster Versuch mit -2px ergab inset:+2px -> der Ring rutschte NACH INNEN und stand als zweite Linie neben dem grauen 1px-Rahmen. Genau die zwei Linien. Richtig ist +1px: inset:-1px legt das Rechteck exakt ueber den 1px breiten Rahmen des Feldes, seine 2px-Kante deckt ihn vollstaendig ab. Ergebnis: EINE Linie, wie in der Vorlage. ⚠️ --input-outline-offset / --input-outline-width sind hier tot: sie speisen has-focus-visible:outline-*, und das outline wird eine Zeile weiter mit outline-0! abgeschaltet. Deshalb NICHT gesetzt. */ --input-amount-outline-offset: 1px !important; --input-amount-outline-radius: 0 !important; --input-amount-outline-width: 2px !important; /* ---- Meldungsbaender --------------------------------------------------- * Das Bauteil kennt zwei Typen, am Quelltext abgelesen: * type INFO -> "Ihre Spende wurde abgebrochen" (Vorgabe hellblau) * type ERROR -> "Zahlungsfehler" (Vorgabe hellrot) * Die Vorlage faerbt beide gleich: * .alert-error, .error-banner { background: #ff7300; color: #fff } * * Je Typ drei Tokens, einzeln mit Positivkontrolle bestimmt: * --color--light die Flaeche * --color- Symbol und Ueberschrift * --color--light-contrast der Fliesstext * ⚠️ Der Fliesstext haengt NICHT an --color-text-default -- das faerbt die * eingebaute Ueberschrift. Magenta-Probe darauf liess das Band unberuehrt. * * ⚠️ KONTRAST, aus der Vorlage uebernommen: weiss auf #ff7300 sind * 2,73:1 und verfehlen die 4,5:1. Der Nutzer hat sich am 19.8.2026 nach * Vorlage der Messung ausdruecklich fuer weisse Schrift entschieden; hier * gilt dieselbe Entscheidung, damit beide Formulare gleich aussehen. * Ab etwa #c25400 traegt Weiss wieder ueber 4,5:1. * * ⚠️⚠️ --color-error faerbt NICHT nur das Band. Die vier Zeilen darunter * sind kein Beiwerk, sondern die Reparatur eines Fehlers, den nur ein * echter Test gezeigt hat: mit --color-error:#fff wurde auch die Meldung * UNTER dem Feld weiss -- "Dies ist ein Pflichtfeld." stand unsichtbar auf * weissem Grund. Ausgeloest habe ich den Fall ohne Absenden, indem ich das * Betragsfeld geleert habe. * Trennbar ist es, weil --color-interactive-error-text nur eine ABLEITUNG * von --color-error ist: setzt man es ausdruecklich, gewinnt es. Einzeln * mit Magenta belegt: * --color-error Ueberschrift + Symbol im Band * --color-interactive-error-text die Meldung unter dem Feld * --color-form-control-text-error der Feldinhalt im Fehlerfall * ⚠️ #dc3545 statt --md-rot fuer die Meldung: exakt die Begruendung der * Vorlage -- #f45e5e schafft auf Weiss keine 4,5:1, #dc3545 mit 4,53:1 * gerade so. Rahmen duerfen 3:1 und nehmen deshalb --md-rot. */ --color-info-light: #ff7300 !important; --color-info: #ffffff !important; --color-info-light-contrast: #ffffff !important; --color-error-light: #ff7300 !important; --color-error: #ffffff !important; --color-error-light-contrast: #ffffff !important; /* ---- Eingebaute Ueberschrift ------------------------------------------- * Schwarz wie das H1.title auf /spenden (dort rgb(0,0,0) gemessen). * ⚠️ Das ist alles, was an ihr erreichbar ist: Groesse (30 px statt 28), * Gewicht (500 statt 600) und die Zentrierung stehen fest im Bauteil * (.prose-lg h2 ohne Variable, text-center als Utility-Klasse). * ⚠️ Geprueft, dass dieses Token sonst nichts faerbt: einziger weiterer * Nutzer waere der Fliesstext im Meldungsband, und der folgt gemessen * --color--light-contrast. Gegenprobe im Fehlerfall: Titel * rgb(0,0,0), Bandtext rgb(255,255,255). */ --color-text-default: #000 !important; --color-interactive-error-text: #dc3545 !important; --color-form-control-text-error: var(--md-text) !important; --color-form-control-border-error: var(--md-rot) !important; --color-form-control-background-error: #fff !important; } /* ============================================================================ * EIGENE UEBERSCHRIFT UEBER DEM FORMULAR * ---------------------------------------------------------------------------- * ⚠️ Setzt voraus, dass im FundraisingBox-Backend der Titel ABGESCHALTET ist * (in der Konfiguration: title.isActive). Sonst stehen zwei Ueberschriften * untereinander. * * Warum ueberhaupt eine eigene: die eingebaute laesst sich nicht angleichen. * Das Bauteil rendert sie als

in einem prose-Container, und dort steht * .prose-lg h2 { font-size: 1.5em; font-weight: 500 } * fest im Blatt -- ohne Variable, also von aussen nicht erreichbar. Die * Zentrierung kommt aus der Utility-Klasse text-center am Elternelement und * ist ebenso wenig zu ueberschreiben, weil kein Selektor in den Shadow-Baum * reicht. Erreichbar waere allein die Farbe. * * Die Werte sind am echten H1.title auf /spenden gemessen, nicht geschaetzt: * 28px / 600 / #000 / Source Sans Pro. * ============================================================================ */ /* ⚠️⚠️ DIESE Ueberschrift ist die gewollte -- 28 px / 600 / schwarz / * linksbuendig, gemessen am H1.title auf /spenden. * * Die eingebaute Ueberschrift des Bauteils (customWordings.title) muss dafuer * im FundraisingBox-Backend ABGESCHALTET werden: title.isActive. Solange sie * an ist, stehen zwei "Jetzt foerdern" untereinander. * * ⚠️ Ich hatte am 21.8.2026 zwischenzeitlich DIESE hier ausgeblendet und * stattdessen die eingebaute schwarz eingefaerbt -- das war die falsche von * beiden. Die eingebaute ist 30 px / Gewicht 500 / zentriert, und daran ist * von aussen nichts zu aendern: .prose-lg h2 setzt Groesse und Gewicht fest * ohne Variable, text-center ist eine Utility-Klasse am Elternelement. * Erreichbar waere allein die Farbe. Deshalb bleibt es beim Backend-Schalter. * * ⚠️ --color-text-default weiter oben faerbt genau jene eingebaute * Ueberschrift. Ist der Schalter aus, ist die Zeile wirkungslos -- sie stoert * nicht, macht aber auch nichts mehr. */ .md-express-kopf { /* ⚠️ margin 0 mit Nachdruck: die h2-Regel der Site setzt 16 px unten, und diese 16 px waren als dunkler Streifen zwischen Ueberschrift und Formular zu sehen -- genau die Naht, die nicht sichtbar sein soll. Der Innenabstand entspricht --container-padding des Bauteils (1.5em), damit die Ueberschrift auf derselben Flucht steht wie der Inhalt. */ margin: 0 !important; padding: 1.5rem 1.5rem 0; background: #f8fafc; font-family: "Source Sans Pro", sans-serif; font-size: 1.75rem; /* 28 px */ font-weight: 600; line-height: 1.2; color: #000; } /* ============================================================================ * DATENSCHUTZHINWEIS UNTER DEM FORMULAR * ---------------------------------------------------------------------------- * Wortlaut und Link sind identisch mit dem Spendenformular (dort setzt * mdDatenschutzhinweisSetzen() in fundraisingbox-2026.js denselben Satz * ueber den Absende-Knopf). * * ⚠️ Hier steht er UNTER dem Formular, nicht ueber dem PayPal-Knopf. Der * Knopf liegt im geschlossenen Shadow-Baum; die Express-Vorlage kennt nur * die Bausteine "amount" und "payment" und sechs feste Wordings, also gibt * es auch im FundraisingBox-Backend kein Feld dafuer. Beides gemessen, nicht * vermutet. * * Damit keine Kante sichtbar wird, traegt der Absatz den Grund des Bauteils * (--color-background-subtle = #f8fafc, im offenen Spiegelbaum ausgelesen) * und dessen seitlichen Innenabstand (--container-padding = 1.5em). * * ⚠️ Der Absatz gehoert in das TYPO3-Inhaltselement neben , * NICHT per JavaScript erzeugt: der Hinweis ist eine Pflichtangabe und darf * nicht verschwinden, wenn ein Skript ausbleibt. * ============================================================================ */ .md-express-datenschutz { margin: 0; padding: 0 1.5rem 1.5rem; background: #f8fafc; color: #606060; font-size: 0.875rem; line-height: 1.4; /* Die Seite trennt lange Woerter automatisch. Ohne diese Zeile brach "Datenschutzerklärung" mitten im Link um ("Datenschutzer-klärung"). */ hyphens: manual; } /* Wie auf der uebrigen Website: helles Hausblau, beim Ueberfahren dunkel. Andersherum -- dunkel als Normalzustand -- widerspricht der Gewohnheit auf mehr-demokratie.de. ⚠️ Hier stehen die Farben als Zahl, nicht als var(--md-blau): die Hausfarben sind oben am Bauteil deklariert, und der Absatz ist dessen GESCHWISTER, erbt sie also nicht. Ein var(--md-blau) waere hier still auf den Rueckfallwert gelaufen -- sichtbar identisch, und beim naechsten Farbwechsel unbemerkt falsch. */ .md-express-datenschutz a { color: #1271ee; text-decoration: underline; } .md-express-datenschutz a:hover, .md-express-datenschutz a:focus-visible { color: #003567; } .md-express-datenschutz a:focus-visible { outline: 2px solid #094f9e; outline-offset: 2px; }