/* default styles for extension "tx_frontend" */ .ce-align-left { text-align: left; } .ce-align-center { text-align: center; } .ce-align-right { text-align: right; } .ce-table td, .ce-table th { vertical-align: top; } .ce-textpic, .ce-image, .ce-nowrap .ce-bodytext, .ce-gallery, .ce-row, .ce-uploads li, .ce-uploads div { overflow: hidden; } .ce-left .ce-gallery, .ce-column { float: left; } .ce-center .ce-outer { position: relative; float: right; right: 50%; } .ce-center .ce-inner { position: relative; float: right; right: -50%; } .ce-right .ce-gallery { float: right; } .ce-gallery figure { display: table; margin: 0; } .ce-gallery figcaption { display: table-caption; caption-side: bottom; } .ce-gallery img { display: block; } .ce-gallery iframe { border-width: 0; } .ce-border img, .ce-border iframe { border: 2px solid #000000; padding: 0px; } .ce-intext.ce-right .ce-gallery, .ce-intext.ce-left .ce-gallery, .ce-above .ce-gallery { margin-bottom: 48px; } .ce-image .ce-gallery { margin-bottom: 0; } .ce-intext.ce-right .ce-gallery { margin-left: 48px; } .ce-intext.ce-left .ce-gallery { margin-right: 48px; } .ce-below .ce-gallery { margin-top: 48px; } .ce-column { margin-right: 48px; } .ce-column:last-child { margin-right: 0; } .ce-row { margin-bottom: 48px; } .ce-row:last-child { margin-bottom: 0; } .ce-above .ce-bodytext { clear: both; } .ce-intext.ce-left ol, .ce-intext.ce-left ul { padding-left: 40px; overflow: auto; } /* Headline */ .ce-headline-left { text-align: left; } .ce-headline-center { text-align: center; } .ce-headline-right { text-align: right; } /* Uploads */ .ce-uploads { margin: 0; padding: 0; } .ce-uploads li { list-style: none outside none; margin: 1em 0; } .ce-uploads img { float: left; padding-right: 1em; vertical-align: top; } .ce-uploads span { display: block; } /* Table */ .ce-table { width: 100%; max-width: 100%; } .ce-table th, .ce-table td { padding: 0.5em 0.75em; vertical-align: top; } .ce-table thead th { border-bottom: 2px solid #dadada; } .ce-table th, .ce-table td { border-top: 1px solid #dadada; } .ce-table-striped tbody tr:nth-of-type(odd) { background-color: rgba(0,0,0,.05); } .ce-table-bordered th, .ce-table-bordered td { border: 1px solid #dadada; } /* Space */ .frame-space-before-extra-small { margin-top: 1em; } .frame-space-before-small { margin-top: 2em; } .frame-space-before-medium { margin-top: 3em; } .frame-space-before-large { margin-top: 4em; } .frame-space-before-extra-large { margin-top: 5em; } .frame-space-after-extra-small { margin-bottom: 1em; } .frame-space-after-small { margin-bottom: 2em; } .frame-space-after-medium { margin-bottom: 3em; } .frame-space-after-large { margin-bottom: 4em; } .frame-space-after-extra-large { margin-bottom: 5em; } /* Frame */ .frame-ruler-before:before { content: ''; display: block; border-top: 1px solid rgba(0,0,0,0.25); margin-bottom: 2em; } .frame-ruler-after:after { content: ''; display: block; border-bottom: 1px solid rgba(0,0,0,0.25); margin-top: 2em; } .frame-indent { margin-left: 15%; margin-right: 15%; } .frame-indent-left { margin-left: 33%; } .frame-indent-right { margin-right: 33%; } .form-fieldset { border: 0; width: 100%; max-width: 800px; } .form-fieldset-label { padding: 16px 0; font-size: 1.25em; font-weight: 600; } .form-row { display: flex; } .form-row > div { flex: 1 1 calc(50% - 10px); max-width: calc(50% - 10px); margin-right: 20px; } .form-row > div:last-child { margin-right: 0; } @media only screen and (max-width: 800px) { .form-row { flex-direction: column; } .form-row > div { flex: 1 1 100%; max-width: 100%; margin-right: 0; } } .form-group, .btn-group { max-width: 100%; margin-bottom:1em; overflow:hidden; } .btn-group .previous{margin-right:24px;} .form-group-show_company_name { margin-top: 1em; } .form-group-company_name { max-width: 100%; transition: max-width 400ms; } .form-group-company_name.hidden-by-sliding-left { max-width: 0; } label.form-check-label { width:100%; } .inputs-list .radio { overflow:hidden; } input[type="radio"] { margin-right:1em; } /* show labels as coloured buttons */ .show-labels-as-coloured-buttons { display: flex; flex-wrap: wrap; } .show-labels-as-coloured-buttons .form-check { margin-right: 8px; border-top: none; } .form-group-amount .show-labels-as-coloured-buttons .form-check { flex: 1 1 90px; max-width: 90px; } .show-labels-as-coloured-buttons .form-check-label { padding: 12px 16px 12px 16px; background-color: #094f9e; color: white; font-size: 18px; font-weight: 700; text-align: center; line-height: 1; letter-spacing: .5px; cursor: pointer; } .show-labels-as-coloured-buttons .form-check-label:has(input:checked) { background-color:#F45E5E; color:white; } .show-labels-as-coloured-buttons .form-check-label input[type="radio"] { position: absolute; z-index: -10; visibility: hidden; } .form-group-amount .form-check.contains-input-field { flex:1 1 166px; max-width:166px; } .form-check.contains-input-field .input-group { display: flex; } .form-check.contains-input-field input[type="number"] { padding-top: 12px; padding-bottom: 11px; padding-left: 20px; } .show-labels-as-coloured-buttons .form-check.contains-input-field { position: relative; } .show-labels-as-coloured-buttons .form-check.contains-input-field input[type="number"] { background-color: transparent; border: none; box-shadow: none; color:white; font-weight: 600; } .show-labels-as-coloured-buttons .form-check.contains-input-field input[type="number"]::placeholder { color: white; font-weight: 600; text-align: left; } .show-labels-as-coloured-buttons .form-check.contains-input-field .form-check-label { padding: 0; background-color: #094f9e; } .show-labels-as-coloured-buttons .form-check.contains-input-field .form-check-label:has(input:checked) { background-color: #f95050; color: white; } .show-labels-as-coloured-buttons .form-check.contains-input-field .input-group-addon { position: absolute; top: 0; right: -16px; padding: 11px 0 0 2px; border: none; background-color: transparent; color: #202020; font-size: 18px; font-weight: 600; } /* progress bar */ .progress { height: 44px; margin-bottom: 0; border: unset; border-radius: unset; box-shadow: unset; background-color: #ccc; overflow: hidden; } .progress-bar { height: 100%; padding-top: 5px; color: #fff; font-size: 12px; line-height: 20px; text-align: center; overflow: hidden; transition: width 1s ease; } .progress-bar span { font-size: 20px; line-height: 30px; } .donation-goal p { margin-bottom: 0; } .finisher-confirmation-message { width: 100%; max-width: 800px; margin-left: auto; margin-right: auto; padding: 20px; } .toggle-next-fieldset { cursor: pointer; color: #8da700; } .inpersoneventform > h2 { visibility: hidden; height: 0; } .orderform-veto .form-group-amountstatictext { padding-top: 18px; } .orderform-veto .form-group-amountstatictext p { line-height: 1.4; } /* ── Spendenformular: Zwei-Klick-Einwilligung ───────────────────────────────── Markup baut .../custom_forms/Resources/Public/JavaScript/donateActivate.js, eingehängt in .../Resources/Private/Templates/Fundraisingbox/Donationform.html. ⚠️⚠️ DIE WERTE SIND ABSICHTLICH DIESELBEN wie bei den beiden Geschwistern — wer hier etwas ändert, ändert es dort mit, sonst laufen die drei Flächen auseinander: Karte: .../md_events/Resources/Public/Css/listMap.css (.map-activate) Video: .../custom_md2022/Resources/Public/Css/styles-plugins.css .../custom_sprezu/Resources/Public/Css/styles.css (.video-shariff-preview-*) Gemeinsam sind: Symbol 3rem, Lücke 0.625rem, Anbieterband 0.8125rem/700, Hinweisband max 32rem mit 1rem Abstand und 0.625rem/1rem Innenabstand, Kopfzeile 1.125rem, Hinweis fett mit 0.25rem Abstand, Schleier weiß 0.2. Diese Datei liegt über page.includeCSS.custom_forms ohnehin auf jeder Seite jeder Site — deshalb steht der Block hier und nicht doppelt in den Sitepackages. Der Cache-Buster ist die mtime, hier gibt es also NICHTS von Hand hochzuzählen (anders als bei der JS-Datei und bei md_events). */ /* ── Stellschrauben: das Einzige, was eine Site überschreiben sollte ── */ .donate-embed { /* f3d1 = money-bill-1, ausgewählt vom User am 10.8.2026. ⚠️ Die Glyphe gibt es in FA 6.2.1 Free in ZWEI Schnitten: solid (900, gefüllter Schein) und regular (400, nur Umriss). Die Sites binden aber nur fontawesome + solid + brands ein — regular.min.css liegt nirgends. ⚠️⚠️ Das fällt NICHT auf: gemessen am 10.8.2026 (Chrome 151, örtlicher Prüfstand) ergibt font-weight:400 exakt dieselben Maße wie 900. Weil die Familie nur einen Schnitt hat, nimmt der CSS-Schriftabgleich ihn auch für 400 — es bleibt also kein leeres Kästchen stehen, sondern still die SOLIDE Form. Wer den Umriss wirklich will, muss regular.min.css einbinden; die 900 steht hier ausgeschrieben, damit niemand die 400 für den Umriss hält. Nachgesehen in .../custom_md2022/…/fontawesome-free-6.2.1-web/metadata/icons.json und in den includeCSS-Zweigen beider Sitepackages. */ --donate-icon: "\f3d1"; --donate-icon-weight: 900; --donate-host: "FundraisingBox (secure.fundraisingbox.com)"; /* --color-red ist nur in custom_sprezu gesetzt (#ff6157); überall sonst greift der Rückfallwert, das MD-Dunkelblau. Genau wie bei der Karte. */ --donate-icon-color: var(--color-red, #003567); --donate-surface-bg: #e9edf1; --donate-band-bg: #1271ee; /* deckend — weiß darauf ergibt 4,54:1 */ /* Rückmeldung beim Zeigen, derselbe Sprung wie bei den Buttons der Site (styles-defaultscreen.css:833/866), beim Video (--video-band-bg-hover) und auf der Karte (--map-band-bg-hover). ⚠️ Weiß darauf sind nur noch 3,15:1 statt 4,54:1 — bewusste Entscheidung des Users am 12.8.2026 zugunsten der Einheitlichkeit. Wer sie zurücknimmt, nimmt sie an allen vier Stellen zurück. */ --donate-band-bg-hover: #2e92ff; --donate-band-color: #ffffff; --donate-band-radius: 0; /* mehr-demokratie.de ist eckig */ /* ⚠️⚠️ EIGENE Stellschraube, NICHT --donate-icon-color mitbenutzen. Die Symbolfarbe darf hell sein: sprezu setzt dort sein Rot, und das ergibt als Fokusring auf creme nur 2,79:1 — unter den 3:1, die ein Fokusindikator braucht. Gekoppelt würde sprezu still schlechter, während md (dunkelblau, 10,5:1 auf der Fläche) gut aussieht. Am 12.8.2026 gerechnet. */ --donate-focus-ring: var(--color-blue, #003567); /* Platzhalterhöhe. Das fertige Formular ist höher und wächst per fbResize selbst; hier geht es nur darum, dass die Fläche vor dem Klick nicht wie ein vergessener Streifen aussieht. Eine Zeile, wenn sie jemand anpassen will. */ --donate-min-height: 25rem; position: relative; } .donate-embed .donate-activate { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; min-height: var(--donate-min-height); padding: 0; border: 0; overflow: hidden; cursor: pointer; background: var(--donate-surface-bg); font: inherit; /* nimmt eventuelle button-Regeln der Site zurück */ color: inherit; text-align: center; } .donate-embed .donate-activate--busy { cursor: progress; } .donate-embed .donate-activate--error { cursor: pointer; } /* ⚠️ KEINE Vorschau — hier fehlt absichtlich das Gegenstück zu .map-activate__preview (Kartenpunkte) und zum Standbild des Videos. Angedeutete Formularzeilen waren gebaut und am 10.8.2026 vom User abgelehnt: „keine vertikalen balken im Hintergrund bitte". Die Fläche bleibt einfarbig; wer die Symmetrie zu den Geschwistern „repariert", baut genau das zurück, was weg sollte. Der Schleier bleibt: er trägt den Aufhell-Wechsel beim Überfahren. */ .donate-embed .donate-activate__overlay { position: absolute; inset: 0; background: rgba(255, 255, 255, 0.2); transition: background 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); } .donate-embed .donate-activate:hover .donate-activate__overlay, .donate-embed .donate-activate:focus .donate-activate__overlay { background: transparent; } .donate-embed .donate-activate__group { position: relative; z-index: 1; display: block; width: 100%; padding: 0 1rem; } .donate-embed .donate-activate__icon { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.625rem; margin: 0 auto; color: var(--donate-icon-color); font: inherit; } .donate-embed .donate-activate__icon::before { content: var(--donate-icon); font-family: 'Font Awesome 6 Free'; font-weight: var(--donate-icon-weight); font-style: normal; font-size: 3rem; line-height: 1; } /* Ziel des Klicks im Klartext neben dem Symbol, eigener deckender Grund wie beim Video. ⚠️ Für Vorlesesoftware ist per CSS erzeugter Text zweite Wahl — der lange Hinweis im Band darunter ist echtes Markup und trägt die Aussage allein. */ .donate-embed .donate-activate__icon::after { content: var(--donate-host); padding: 0.25rem 0.5rem; border-radius: var(--donate-band-radius); background: var(--donate-band-bg); color: var(--donate-band-color); font-size: 0.8125rem; font-weight: 700; line-height: 1.3; } .donate-embed .donate-activate__text { display: block; max-width: 32rem; margin: 1rem auto 0; padding: 0.625rem 1rem; border-radius: var(--donate-band-radius); background: var(--donate-band-bg); color: var(--donate-band-color); font-size: 0.9375rem; line-height: 1.45; } .donate-embed .donate-activate__title { display: block; font-weight: 700; font-size: 1.125rem; line-height: 1.3; } .donate-embed .donate-activate__hint { display: block; margin-top: 0.25rem; font-weight: 700; } /* Rückmeldung an den BÄNDERN — dieselbe wie beim Video und auf der Karte. ⚠️⚠️ WARUM NICHT DER SCHLEIER REICHT: die Fläche hat hier bewusst KEINE Vorschau (siehe Kasten oben), der Schleier liegt also auf glattem --donate-surface-bg. Nachgerechnet am 12.8.2026: 20 % Weiß auf #e9edf1 ergibt #edf1f4 — eine Differenz von 4/4/3 Stufen von 255. Der Schleier-Hover ist hier also nicht schwach, sondern praktisch nicht vorhanden. Auf der Karte lag wenigstens noch ein Bild darunter. Der Schleier bleibt trotzdem: er kostet nichts und trägt, sobald jemand der Fläche doch einmal einen Hintergrund gibt. */ .donate-embed .donate-activate__text, .donate-embed .donate-activate__icon::after { transition: background-color 120ms ease-in-out; } .donate-embed .donate-activate:hover .donate-activate__text, .donate-embed .donate-activate:hover .donate-activate__icon::after, .donate-embed .donate-activate:focus-visible .donate-activate__text, .donate-embed .donate-activate:focus-visible .donate-activate__icon::after { background: var(--donate-band-bg-hover); } /* ⚠️⚠️ DUNKEL, NICHT HELL. Bis zum 12.8.2026 stand hier var(--color-light, #fbf8f4), also nahezu Weiß — auf --donate-surface-bg (#e9edf1) unsichtbar, der Knopf mit der Tastatur damit nicht auffindbar. Dieselbe Stelle war bei Video und Karte genauso falsch; alle drei sind am 12.8.2026 zusammen umgestellt worden. */ .donate-embed .donate-activate:focus-visible { outline: 0.1875rem solid var(--donate-focus-ring); outline-offset: -0.3125rem; } /** * ============================================================================ * 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; } .hidden{display:none!important;visibility:hidden}.visuallyhidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;clip:rect(0 0 0 0);overflow:hidden}.visuallyhidden.focusable:active,.visuallyhidden.focusable:focus{position:static;width:auto;height:auto;margin:0;clip:auto;overflow:visible}.invisible{visibility:hidden}.clearfix::after{content:" ";display:table;clear:both}.cursor-pointer{cursor:pointer}ul.navi{list-style:none}.navi li{margin-left:0}.horizontal{display:flex}.navi.horizontal li{margin-right:1rem}.debug-info{display:inline-block;position:fixed;top:40px;left:20px;border:1px solid gray;padding:3px;background-color:#fff;opacity:.5;font-size:11px;z-index:9999}.typo3-messages{max-width:800px;margin-left:auto;margin-right:auto;padding:0;background-position:10px 12px;background-repeat:no-repeat}.typo3-messages .alert{padding:1em 3em 1em 3em;border:none}.aside .typo3-messages .alert,.right .typo3-messages .alert{padding:1em}.typo3-messages h3,.typo3-messages h4{margin-top:0;color:inherit;font-size:1.2em}.typo3-messages .alert-link{font-weight:700}.typo3-messages .alert-message{margin-bottom:0}.typo3-messages>p,.typo3-messages>ul{margin-bottom:0}.typo3-messages>p+p{margin-top:.5rem}.typo3-messages a{color:inherit;text-decoration:underline}.typo3-messages .media{margin:0}.typo3-messages .media .fa-stack>.fa:first-child{opacity:.2;filter:alpha(opacity=20)}.typo3-messages .media-body{vertical-align:middle}.typo3-messages .message-header{font-weight:700;margin-bottom:.75rem}.typo3-messages ul,.typo3-messages ol{padding-left:1rem}.typo3-messages .message-header{display:block}.typo3-messages .t3-icon-actions-message-close{cursor:pointer;float:right}ul.typo3-messages>li{margin-bottom:1rem;list-style:none;margin-left:0;font-size:.85em}ul.typo3-messages>li:last-child{margin-bottom:0}.typo3-messages a{text-decoration:underline}.alert-notice{color:#777;background-color:#f6f7fa;border-color:#c2cbcf}.alert-notice a{color:#777}.alert-info{background-color:#fff0;border-color:#fff0;}.alert-info hr{border-top-color:#fff0}.alert-info .alert-link{color:#e6e6e6}.alert-info a{color:#4c73a1}.alert-success{background-color:#79a548;border-color:#fff0;color:#fff}.alert-success hr{border-top-color:#fff0}.alert-success .alert-link{color:#e6e6e6}.alert-success a{color:#3b7826}.alert-warning{background-color:#e8a33d;border-color:#fff0;color:#fff}.alert-warning hr{border-top-color:#fff0}.alert-warning .alert-link{color:#e6e6e6}.alert-warning a{color:#9e7d4a}.alert-danger{background-color:#c83c3c;border-color:#fff0;color:#fff}.alert-danger hr{border-top-color:#fff0}.alert-danger .alert-link{color:#e6e6e6}.alert-danger a{color:#aa0225}.browserupgrade{margin:.2em 0;background:#ccc;color:#000;padding:.2em 0}body::after{display:block;visibility:hidden;position:fixed;top:10px;left:20px;z-index:900;border:1px solid #8a8a8a;padding:3px;background-color:#fff;opacity:.75;color:#8a8a8a;font-size:11px}body.debug::after{visibility:visible}.ce-gallery[data-ce-columns="2"] .ce-row,.ce-gallery[data-ce-columns="3"] .ce-row,.ce-gallery[data-ce-columns="4"] .ce-row{display:flex}.imageWrapper{position:relative}.image-metadata{position:absolute;bottom:2px;right:2px;padding:2px 2px 2px 6px;background-color:#fff;opacity:.8;color:#000;font-size:12px;line-height:1;cursor:context-menu}@media print{*,*::before,*::after{background:transparent!important;color:#000!important;box-shadow:none!important;text-shadow:none!important}a,a:visited{text-decoration:underline}a[href]::after{content:" (" attr(href) ")"}abbr[title]:after{content:" (" attr(title) ")"}a[href^="#"]:after,a[href^="javascript:"]:after{content:""}pre,blockquote{border:1px solid #999;page-break-inside:avoid}thead{display:table-header-group}tr,img{page-break-inside:avoid}img{max-width:100%!important}p,h2,h3{orphans:3;widows:3}h2,h3{page-break-after:avoid}} /* Mediaqueries */ html { font-family: "default-screen"; } body::after { content: "default-screen"; } /** * The Layout * * contains layout related style definitions */ .outerWrapper, .contentWrapper, .innerWrapper { width: 100%; margin-left: auto; margin-right: auto; } .outerWrapper { max-width: var(--outerWidth); } .contentWrapper { max-width: var(--contentWidth); } .innerWrapper { max-width: var(--innerWidth); } .pageHeader { position: sticky; top: 0; left:0; z-index: 1; width: 100%; padding: 20px; background-color: #fff; box-shadow: 0 6px 6px -4px #aaa; } .pageHeader .outerWrapper { position: relative; overflow: hidden; } .logo { float: left; width: 160px; min-width: 160px; height: 100px; } .logo a { display: block; } .naviWrapper, .metanaviWrapper, .mainnaviWrapper { clear: right; float: right; } .naviWrapper.opened { display:block; } .pageContent { padding-top: 2rem; padding-bottom: 4em; } .pageContent:has(.topvisual) { padding-top: 0; } .backendlayout-aside .pageContent .content .contentWrapper { display:flex; justify-content: space-between; } .pageContent .main { flex: 1 1 calc(75% - 50px); max-width: calc(75% - 50px); margin-right: 50px; } .pageContent .aside { flex: 1 1 25%; max-width: 25%; } .pageFooter { padding-bottom: 2em; } #naviToggle { position: absolute; top: 0; right: 0; display: flex; justify-content: center; align-items: center; clear: right; float: right; height: 30px; } .naviToggle { color: var(--textColor); cursor: pointer; visibility: hidden; } .naviToggle .icon { display: inline-block; width: 30px; height: 30px; margin-right: 10px; padding: 0; background-color: transparent; background-image: url('../../../typo3conf/ext/custom_steuerdebatte/Resources/Public/Icons/icon_bars.svg'); background-position: center; background-repeat: no-repeat; background-size: contain; } .naviToggle .label { padding: 0; font-size: 1rem; } .grid-row { display:flex; justify-content: space-between; height: 100%; } .grid-column { height: 100%; margin: 0 1em; } .grid-row > div:first-child { margin-left: 0; } .grid-row > div:last-child { margin-right: 0; } .grid_2cols .grid-column { flex:1 1 calc(50% - 1em); width: calc(50% - 1em); } .grid_3cols .grid-column { flex:1 1 calc(33% - 1.333em); width: calc(33% - 1.333em); } .grid_4cols .grid-column { flex:1 1 calc(25% - 1.5em); width: calc(25% - 1.5em); } .grid-column > div { height: 100%; } /** * The Styling * * contains design related style definitions */ :root { --pageWidth: 1920px; --outerWidth: 1600px; --contentWidth: 1300px; --innerWidth: 1000px; --mainFontFamily: "Jost"; --textFontSize: 20px; --textFontWeight: 400; --h1FontSize: 50px; --h2FontSize: 30px; --h3FontSize: 25px; --h4FontSize: 20px; --bodyBgColor: #ffffff; --textColor: #0b1657; --linkColor: #0b1657; --linkHoverColor: #ff7900; --header1Color: #0b1657; --header2Color: #ff7900; --bgColor1: #ff7900; --bgColor2: #18c991; --bgColor3: #9b80ff; --bgColorGray: #f2f2f2; --buttonBgColor: #0b1657; --buttonBgColor2: #9b80ff; --buttonHoverBgColor: #ff7900; --buttonTextColor: #fff; } /* @media (prefers-color-scheme:dark) { :root { --bodyBg: #242424; --menuBgColor: rgba(0,0,0,0.8); --textColor: #FFFFFF; --textColorLight: #ffffff; --textColorDark: #ffffff; --accentColor: #C100CF; --bgLight: #242424; --bgDark: #1A1A1A } } */ /* General styles */ body { background-color: var(--bodyBgColor); color: var(--textColor); font-size: var(--textFontSize); font-family: var(--mainFontFamily), sans-serif; font-weight: var(--textFontWeight); } .bgcolor-white, .frame-bgcolor-white { background-color: #ffffff; } .bgcolor-orange, .frame-bgcolor-orange { background-color: var(--bgColor1); color: white; } .bgcolor-turquois, .frame-bgcolor-turquois { background-color: var(--bgColor2); color: white; } .bgcolor-lila, .frame-bgcolor-lila { background-color: var(--bgColor3); color: white; } .bgcolor-gray, .frame-bgcolor-gray { background-color: var(--bgColorGray); } .bgcolor-darkblue2 { background-color: var(--textColor); } .frame-bgcolor-white, .frame-bgcolor-turquois, .frame-bgcolor-orange, .frame-bgcolor-lila, .frame-bgcolor-gray { padding: 2em; } h1, h2, h3 { font-weight: 700; margin-top: 0; margin-bottom: 1em; line-height: 120%; } h2:has(+ h3), .ce-bodytext h2:has(+h3) { margin-bottom: .25rem; } h2 + h3, .ce-bodytext h2 + h3 { margin-top: 0; font-size: 20px; font-weight: 400; } h1 { font-size: var(--h1FontSize); color: var(--header1Color) } h2 { font-size: var(--h2FontSize); color: var(--header2Color); } h3 { font-size: var(--h3FontSize); color: var(--header2Color); } h4 { font-size: var(--h4FontSize); color: var(--header1Color); } :is(h1, h2, h3, h4).fgcolor-gray { color: #404040; } :is(h1, h2, h3, h4).fgcolor-blue { color: var(--textColor); } :is(.frame-bgcolor-turquois, .frame-bgcolor-orange, .frame-bgcolor-lila) :is(h1, h2, h3, h4) { color: white; } .ce-bodytext :is(h1, h2, h3) { margin-top: 2em; } p,li, dt,table { margin-bottom:1em; line-height:150%; } .ce-bodytext > p:last-child { margin-bottom:0; } .ce-bodytext > dl > dt:last-child { margin-bottom:0; } .ce-bodytext > table:last-child { margin-bottom:0; } :is(.ce-intext.ce-right .ce-gallery, .ce-intext.ce-left .ce-gallery, .ce-above .ce-gallery) { margin-bottom: 0; } :is(.ce-intext.ce-right .ce-gallery, .ce-intext.ce-left .ce-gallery, .ce-above .ce-gallery):has(+div.ce-bodytext) { margin-bottom: 48px; } a { color: inherit; font-weight: 600; text-decoration: underline; transition: 0.4s; } .no-touchevents a:hover { color: var(--linkHoverColor); text-decoration: underline; } :is(.button, .button-filled, .button-outlined) { display: inline-block; margin-right: 1em; padding: 4px 16px; font-family: var(--mainFontFamily), sans-serif; font-weight: 400; text-align: center; text-decoration: none; } :is(.button, .button-filled, .button-outlined):last-child { margin-right: 0; } .button-filled { border: 1px solid var(--buttonBgColor2); background-color: var(--buttonBgColor2); color: var(--buttonTextColor); } .button-outlined { border: 1px solid var(--buttonBgColor2); background-color: var(--buttonTextColor); color: var(--buttonBgColor2); } .no-touchevents :is(.button, .button-filled, .button-outlined):hover { color: var(--buttonTextColor); opacity: 0.85; } /* Metanavi */ .metanaviWrapper { margin-bottom: 20px; } .metanavi li { padding: 4px 8px; font-size: 1rem; } .metanavi a { font-weight: 400; text-decoration: none; } .no-touchevents .metanavi li.active a { color: var(--linkHoverColor); text-decoration: underline; } .metanavi li.emphasized { position: relative; background-color: var(--bgColor3); } .metanavi li.emphasized a, .metanavi li.emphasized.active a { color: white; } /* Mainnavi */ .mainnavi li { font-size: 1rem; } .mainnavi a { padding: 0.75rem 1.5rem; border-right: 1px solid var(--textColor); text-decoration: none; } .mainnavi li:last-child a { padding-right: 0; border-right: unset; } .no-touchevents .mainnavi li.current a { color: var(--linkHoverColor); text-decoration: underline; } .bodytext-larger { font-size: 1.2em; } .bodytext-smaller { font-size: 0.8em; } .ce-text-left { text-align: left; } .ce-text-center { text-align: center; } .ce-text-right { text-align: right; } .ce-text-justify { text-align: justify; } .frame-padding-top-none { padding-top: 0; } .frame-padding-bottom-none { padding-bottom: 0; } .imageWrapper { position: relative; } .image-metadata { position: absolute; bottom: 2px; right: 2px; padding: 2px 2px 2px 6px; background-color: white; opacity: 0.8; color: black; font-size: 12px; line-height:1; cursor: context-menu; } /* textmedia */ .ce-column { margin-bottom: 40px; margin-right: 40px; } .ce-textpic:has(.ce-bodytext) .ce-column { margin-bottom: 0; } /* form */ .mandatory_helper { max-width: 600px; margin-left: auto; margin-right:auto; } .contactform > h2 { display:none; } div:has(>label), .powermail_fieldwrap.powermail_fieldwrap_type_submit, .powermail_fieldwrap.powermail_fieldwrap_type_content { margin-bottom: 2rem; } label, .form-control-label { display: block; } select, input[type="text"], input[type="email"], input[type="date"], input[type="password"], textarea { display: block; width: 100%; max-width: 800px; margin-bottom: 2rem; padding: 0.5em; background-color: #aaa; border: none; font-size: 1em; } :is(.frame-bgcolor-turquois, .frame-bgcolor-orange, .frame-bgcolor-lila) :is(select, input[type="text"], input[type="email"], input[type="date"], input[type="password"], textarea) { background-color: white; } select:focus, input[type="text"]:focus, input[type="email"]:focus, input[type="date"]:focus, input[type="password"]:focus, textarea:focus { background-color: #f8bf2d; outline: none; } input[type="submit"], button[type="submit"] { padding: 0.5em 2.0em; background-color: var(--buttonBgColor); border: none; color: var(--buttonTextColor); font-size: 1em; cursor: pointer; } .no-touchevents input[type="submit"]:hover, .no-touchevents button[type="submit"]:hover { background-color: var(--buttonHoverBgColor); } .mandatory_helper { font-size:0.8em; } /* call to action element */ .callToAction { position: fixed; right: 0; top: 30%; z-index: 10; width: 200px; padding: 1em 2em; background-color: var(--bgColor3); color: var(--buttonTextColor); } .callToAction a { font-family: var(--mainFontFamily), sans-serif; font-weight: 400; text-decoration: none; } .callToActionClose { position: absolute; top: 10px; right: 10px; width: 20px; height: 20px; background: url('../../../typo3conf/ext/custom_steuerdebatte/Resources/Public/Icons/icon_hide.svg') center center no-repeat; background-size: contain; cursor: pointer; } .no-touchevents a.mfp-popup-link:hover { color: var(--buttonTextColor); } .mfp-content { background-color: var(--bgColor3); max-width: 800px; } .mfp-close-btn-in .mfp-close { top: 12px; right: 12px; width: 32px; height: 32px; color: white; border: 1px solid white; border-radius: 50%; line-height: 32px; opacity: 1; } /* scroll to top */ .scrollToTop { position: fixed; bottom: 100px; z-index: 90; padding: 3px 6px 3px 24px; border: none; background: #f8bf2d url('../../../typo3conf/ext/custom_steuerdebatte/Resources/Public/Icons/scrollToTop_black.png') 4px center no-repeat; border-top-right-radius: 6px; border-bottom-right-radius: 6px; color: #202020 !important; font-family: "IBM Plex Sans",sans-serif; font-weight: 400; text-align: center; text-decoration: none; } /* press */ .news-list-view .article { position: relative; } .news-list-view .article .header { padding-top: 50px; } .news .article h3 { margin-bottom: 2rem; } .news-list-view .article .footer { position: absolute; top: 0; left: 0; max-width: 200px; margin: 0; padding: 0; border-top: unset; color: var(--textColor); } .news-single .article .footer { border-top: unset; color: var(--textColor); } .news-single .teaser-text { font-size: inherit; font-weight: 700; color: inherit; } /* ========================================================================== Print styles ========================================================================== */ @media print { } @media print, (-o-min-device-pixel-ratio: 5/4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) { } /* ====================================================================== */ /* MD-Design fuer orestbida/cookieconsent 3 (ab Fassung 2.4, 17.8.2026) */ /* ====================================================================== */ /* ⚠️ Die Bibliothek wird ueber IHRE Variablen eingefaerbt, nicht durch Ueberschreiben ihrer Regeln. Ein Update der Bibliothek bringt sonst jedes Mal die Gestaltung durcheinander, und man merkt es erst am fertigen Banner. Die vollstaendige Liste der erlaubten Variablen steht in Libs/orestbida/cookieconsent.css - was dort nicht vorkommt, faellt hier STILL aus. ⚠️⚠️ UMSTELLUNG AM 17.8.2026 - HELL STATT DUNKEL. Ansage des Nutzers: das Cookie-Fenster soll aussehen wie der Termin-Dialog der Veranstaltungskarte (md_events/Resources/Public/Css/listMap.css, `dialog.dialog-event`), und das ganze Plugin soll moeglichst KEINE eigenen Werte mitbringen, sondern Bestehendes benutzen. Bis dahin stand hier ein dunkles Banner (rgba(0,15,41,0.92), weisse Schrift) aus der Osano-Zeit. Bemerkenswert: die Bibliothek ist von Haus aus HELL (--cc-bg:#fff) - der Umbau nimmt also groesstenteils eigene Uebersteuerungen WEG, statt neue zu setzen. ⚠️⚠️ ALLE FARBEN STAMMEN AUS DER FARBSEITE der Site (/testseite-farben), keine einzige ist erfunden: #1271ee blue #2e92ff blue:hover #000f29 darkblue #ffffff white #ebebeb gray #cccccc lightgray #a0a0a0 mediumgray #606060 darkgray #003567 "Background" ⚠️ Wer hier einen Wert ergaenzt, nimmt ihn von dieser Seite - nicht aus dem Gefuehl. ⚠️⚠️ DIE BEIDEN KNOEPFE BLEIBEN GLEICHGEWICHTIG (OH Digitale Dienste Rn. 135). Die Bibliothek besorgt das ueber `equalWeightButtons: true`; wer hier unterschiedliche Groessen oder Schriftstaerken setzt, hebelt es aus. Deshalb unterscheiden sich "Zustimmen" und "Ablehnen" unten NUR in der Fuellung, nicht in Groesse oder Gewicht - dieselbe Loesung, die das dunkle Banner schon hatte. ── KONTRASTE, am 17.8.2026 GERECHNET (nicht geschaetzt) ────────────────────── Fliesstext #000f29 auf #ffffff .......... 19,08:1 OK Zweitrang #606060 auf #ffffff ........... 6,29:1 OK Zweitrang #606060 auf #ebebeb ........... 5,27:1 OK Link #1271ee auf #ffffff ........... 4,54:1 OK Knopf #ffffff auf #1271ee ........... 4,54:1 OK Fokusring #003567 auf #ffffff ........... 12,32:1 OK ⚠️ ZWEI bewusst in Kauf genommene Werte, beide GEERBT und nicht hier entstanden: Knopf-Hover #ffffff auf #2e92ff ........... 3,15:1 unter 4,5 -> derselbe Sprung, den die Buttons der Site, das Video und die Karte machen. Vom Nutzer am 12.8.2026 ausdruecklich so entschieden ("wie bei den buttons auch #2e92ff"). Wer das aendert, aendert es an allen vier Stellen. Schalter AUS #cccccc gegen #ffffff ........ 1,61:1 unter 3,0 -> das ist EXAKT der Aus-Zustand der Kartenlegende (listMap.css, .slider). Uebernommen, weil der Auftrag "an die Karte angleichen" lautet. Der Unterschied AN/AUS traegt trotzdem: #1271ee gegen #cccccc. ⏰ Wer die 3:1 will, setzt --cc-toggle-off-bg auf #606060 (6,29:1) - dann weicht der Schalter aber sichtbar von der Karte ab. Das ist eine Entscheidung, keine Reparatur. ────────────────────────────────────────────────────────────────────────────── */ #cc-main { /* Schrift der Site, nicht die Systemschrift der Bibliothek. */ --cc-font-family: "Source Sans Pro", sans-serif; /* Grund und Schrift wie die weissen Inhaltskarten des Karten-Dialogs (listMap.css: `dialog .dialog-event-item { background:#ffffff }`). */ --cc-bg: #ffffff; --cc-primary-color: #000f29; --cc-secondary-color: #606060; --cc-link-color: #1271ee; /* Zustimmen - die Aktionsfarbe der Site, wie die Zoomknoepfe der Karte und der Schliessknopf des Termin-Dialogs. */ --cc-btn-primary-bg: #1271ee; --cc-btn-primary-color: #ffffff; --cc-btn-primary-border-color: #1271ee; --cc-btn-primary-hover-bg: #2e92ff; --cc-btn-primary-hover-color: #ffffff; --cc-btn-primary-hover-border-color: #2e92ff; /* Ablehnen - GLEICHE Groesse und Schriftstaerke, nur ungefuellt. Auf hellem Grund ist die Kontur die blaue Aktionsfarbe (auf dem alten dunklen Banner war sie weiss); im Hover fuellt sie sich wie der Erstknopf. */ --cc-btn-secondary-bg: #ffffff; --cc-btn-secondary-color: #1271ee; --cc-btn-secondary-border-color: #1271ee; --cc-btn-secondary-hover-bg: #2e92ff; --cc-btn-secondary-hover-color: #ffffff; --cc-btn-secondary-hover-border-color: #2e92ff; /* Eckig wie alles andere auf der Site - die Bibliothek haette .4rem. */ --cc-btn-border-radius: 0; --cc-modal-border-radius: 0; /* Trenner und Gruppenbloecke in den Grautoenen der Palette. ⚠️⚠️ HOVER GEHT HELLER, NICHT DUNKLER. Vom Nutzer am 17.8.2026 gemeldet: "normales button / hover verhalten ist, dass das element dunkler / gesaettigter ist und auf hover heller wird." Genau so macht es die ganze Site - #1271ee wird im Hover zu #2e92ff, also heller. Mein erster Entwurf hatte es umgedreht (#ebebeb -> #cccccc) und damit gegen die Hausregel gebaut. ⚠️ Zweiter Einwand desselben Satzes: der Hover war #cccccc - und das ist die Farbe des AUSGESCHALTETEN Schalters. Dieselbe Farbe fuer "hier zeigt die Maus hin" und fuer "dieser Schalter ist aus" laesst zwei verschiedene Aussagen gleich aussehen. Der Hover ist deshalb jetzt Weiss. ⚠️ Damit der Block auf weissem Grund nicht verschwindet, traegt er in BEIDEN Zustaenden eine #cccccc-Kontur. Die Kontur ist kein Fuellton und kollidiert deshalb nicht mit der Aussage des Schalters. ⚠️ FESTGELEGT VOM NUTZER am 17.8.2026: "deaktiviertes toggle auf a0a0a0, ausklapper auf ccc, hover auf ebebeb". Damit steht eine durchgehende Staffelung, in der jeder Zustand seinen eigenen Ton hat und keiner doppelt vorkommt: #a0a0a0 Schalter AUS (am dunkelsten, siehe --cc-toggle-off-bg unten) #cccccc Gruppenblock Ruhe #ebebeb Gruppenblock Hover -> heller als Ruhe, wie ueberall auf der Site #ffffff Gruppenblock aufgeklappt Die frueheren Fassungen dieses Blocks hatten den Hover teils dunkler als die Ruhe und teils in der Farbe des ausgeschalteten Schalters - beides ist damit erledigt. */ --cc-separator-border-color: #ebebeb; --cc-section-category-border: #cccccc; --cc-cookie-category-block-bg: #cccccc; --cc-cookie-category-block-border: #cccccc; --cc-cookie-category-block-hover-bg: #ebebeb; --cc-cookie-category-block-hover-border: #cccccc; /* ⚠️ AUFGEKLAPPT BLEIBT DER BLOCK FARBIG, nicht weiss. Vom Nutzer am 17.8.2026 gemeldet: "aufgeklappt soll es auch eine hintergrundfarbe fuer das element geben, nicht nur weiss." Sonst loest sich der Block beim Aufklappen im weissen Fenstergrund auf, und man sieht nicht mehr, wo eine Gruppe anfaengt und aufhoert. ⚠️⚠️ FALLE: die zweite Variable heisst zwar "...-hover-bg", die Bibliothek benutzt sie im aufgeklappten Zustand aber als RAHMENFARBE: .pm__section--toggle.is-expanded { --cc-cookie-category-block-bg: var(--cc-cookie-category-expanded-block-bg); --cc-cookie-category-block-border: var(--cc-cookie-category-expanded-block-hover-bg); } Wer sie nach dem Namen belegt und Weiss einsetzt, macht den Rahmen unsichtbar - ohne dass eine Regel fehlt oder etwas meldet. Deshalb steht hier die Konturfarbe. ⚠️ ENDSTAND nach drei Zwischenschritten am 17.8.2026 - hier kurz, damit niemand einen davon fuer den gewollten Zustand haelt: erst weiss (Block loeste sich im Fenstergrund auf), dann #ebebeb ("kann heller sein"), dann wieder weiss, und schliesslich die Ansage "aufgeklappt auch ccc". Aufgeklappt traegt die Kopfzeile also DIESELBE Farbe wie zugeklappt: der Block behaelt sein Aussehen, geoeffnet wie geschlossen, und nur der gedrehte Pfeil zeigt den Zustand an. ⚠️ Gemessen: die Inhaltsflaeche darunter (.pm__section-desc) ist transparent und war von all dem nie betroffen - es ging immer nur um die Kopfzeile. */ --cc-cookie-category-expanded-block-bg: #cccccc; --cc-cookie-category-expanded-block-hover-bg: #cccccc; /* ── Schalter wie die Kartenlegende ────────────────────────────────────── Vorbild: listMap.css, `.mdevents_map .legend-item .toggleswitch`. Dort: 40x24 Pille, Radius 24px, weisser 18px-Knopf, AUS #cccccc, AN = die Kategoriefarbe. Hier ist "AN" die Aktionsfarbe der Site. ⚠️ Der GESPERRTE Zustand (Gruppe "notwendig", nicht abwaehlbar) hat in der Karte KEIN Vorbild - dort ist nichts gesperrt. Deshalb ist er der einzige Wert, der frei zu waehlen war: #606060 (darkgray, 6,29:1). Die naechstliegende Wahl #a0a0a0 kam nur auf 2,61:1 und haette die 3:1 gerissen. */ --cc-toggle-on-bg: #1271ee; /* ⚠️ #a0a0a0, festgelegt vom Nutzer am 17.8.2026 - nicht mehr das #cccccc der Kartenlegende. Zwei Gruende, beide gemessen: der Ton gehoert allein dem AUS-Zustand und kommt sonst nirgends im Fenster vor, und der Kontrast steigt von 1,61:1 auf 2,61:1 gegen Weiss. Die 3:1 fuer grafische Bedienelemente sind damit immer noch knapp verfehlt - #606060 kaeme auf 6,29:1, weicht aber deutlicher von der Karte ab. Bewusste Wahl des Nutzers, kein Versehen. */ --cc-toggle-off-bg: #a0a0a0; --cc-toggle-on-knob-bg: #ffffff; --cc-toggle-off-knob-bg: #ffffff; --cc-toggle-readonly-bg: #606060; --cc-toggle-readonly-knob-bg: #ffffff; --cc-toggle-enabled-icon-color: #ffffff; --cc-toggle-disabled-icon-color: #ffffff; --cc-toggle-readonly-knob-icon-color: #606060; --cc-pm-toggle-border-radius: 24px; --cc-footer-bg: #ebebeb; --cc-footer-color: #606060; --cc-footer-border-color: #cccccc; /* Der Schleier hinter dem Einstellungsdialog - wie der Grund des Karten-Dialogs. */ --cc-overlay-bg: rgba(0, 15, 41, 0.8); } /* SCHRIFTGROESSE = FLIESSTEXT (Ansage des Nutzers 17.8.2026). ⚠️ Die Bibliothek stellt dafuer KEINE Variable bereit - die --cc-Liste kennt nur --cc-font-family. Deshalb ausnahmsweise eine echte Regel statt einer Variablen. Gemessen auf dev: body steht auf 16px/24px, also 1rem/1.5. Vorher lief das Banner auf der Vorgabe der Bibliothek und war damit kleiner als der Text daneben. */ #cc-main, #cc-main .cm__desc, #cc-main .pm__section-desc { font-size: 1rem; line-height: 1.5; } /* ── Schriftstufen: 24 / 18 / 16 ───────────────────────────────────────────────── ⚠️ Vom Nutzer am 17.8.2026 in zwei Schritten vorgegeben: "cookie-einstellung groesser wie eine ueberschrift", dann "Gruppennamen auch etwas groesser, dann auch 'wir fragen, bevor wir laden' genau so gross. und cookie-einstellung groesser als diese." Vorher lagen alle drei fast gleichauf und die Rangfolge war nicht zu sehen: Cookie-Einstellungen 16,0 px Wir fragen … 16,8 px Gruppennamen 15,2 px ⚠️⚠️ DIE WERTE STAMMEN AUS DER SCHRIFTSEITE DER SITE, /testseite-schriften - das ist die verbindliche Skala, nicht mein Augenmass: H1 28px / 35px / 600 H2 24px / 30px / 600 -> Fenstertitel "Cookie-Einstellungen" H3 20px / 30px / 600 -> Abschnitts- und Gruppennamen H4 18px / 27px / 600 p 16px / 24px / 400 -> Fliesstext ⚠️ Ich hatte zuvor an einzelnen Inhaltselementen der Startseite gemessen und war dabei auf 18px/27px fuer die Gruppennamen gekommen - die Seite lieferte dort ein H4. Richtig ist H3. Und mein damaliger Vermerk "h3 ist 32px" war ein Messfehler an einem Element mit eigener Klasse; laut Schriftseite ist H3 20px. Im Zweifel die Schriftseite lesen, nicht ein beliebiges Element abgreifen. ⚠️ Weight 600 stand ueberall schon so - gefehlt hat allein die Groesse. */ #cc-main .pm__title { font-size: 1.5rem; line-height: 1.875rem; } #cc-main .cm__title, #cc-main .pm__section-title { font-size: 1.25rem; line-height: 1.875rem; } /* Knoepfe: 18px und BOLD 700. ⚠️ Die Schriftseite sagt es woertlich in ihrer Richtlinie: "4) Buttons sind Bold 700." Am `.btn` der Site nachgemessen: 18px / 18px / 700. Die Bibliothek liefert ihre Knoepfe kleiner und mit Gewicht 600 - sie standen damit unter der Fliesstext- groesse des Fensters daneben. ⚠️⚠️ Groesse und Gewicht gelten fuer BEIDE Knoepfe gleich. "Alle erlauben" und "Nur notwendige" muessen gleichgewichtig bleiben (OH Digitale Dienste Rn. 135) - eine Abstufung genau hier waere der klassische Weg, die Ablehnung unauffaelliger zu machen. Deshalb steht in beiden Selektoren derselbe Wert. */ #cc-main .cm__btn, #cc-main .pm__btn { font-size: 1.125rem; font-weight: 700; } /* Rahmen des Fensters wie beim Karten-Dialog: eckig, ohne Schlagschatten-Spielerei. ⚠️ Der Weichzeichner des alten dunklen Banners ist WEG. Er hatte dort einen Zweck (die Seite schien durch den halbdurchsichtigen Grund), auf weissem Grund erzeugt er nur Rechenlast ohne sichtbare Wirkung. */ #cc-main .cm, #cc-main .pm { border: 1px solid #cccccc; } /* ⚠️ KEIN ANIMIERTER UNTERSTREICHUNGS-HOVER (Ansage des Nutzers 17.8.2026). Der Link "Weitere Informationen zum Datenschutz" traegt die Klasse `cc__link` und erbt sonst die Link-Gestaltung der Site, die die Unterstreichung einblendet. Hier steht sie fest an: sichtbar, ohne Uebergang. ⚠️⚠️ Der Fokusring darf dabei NICHT mitverschwinden - er ist eine Barrierefreiheits-Anforderung, keine Zier. Deshalb nur `transition` und `background-image` zuruecknehmen, NICHT `outline`. */ #cc-main .cc__link { background-image: none; text-decoration: underline; transition: none; } #cc-main .cc__link:hover { color: #2e92ff; text-decoration: underline; } /* Schliessknopf wie im Karten-Dialog. Vorbild: listMap.css, `dialog.dialog-event .btn-close-container > button.close` - 45x45, #1271ee, weisses Kreuz, Hover #2e92ff, Uebergang 0.4s. ⚠️⚠️ DAS KREUZ IST DAS SVG DER BIBLIOTHEK, KEINE FONT-AWESOME-GLYPHE. Der erste Entwurf am 17.8.2026 blendete das SVG aus und setzte stattdessen ein ::before mit "\f00d" - wie es die Karte tut. Ergebnis auf dev: ein blaues Quadrat OHNE Kreuz. Nachgemessen war der Inhalt korrekt (Zeichencodes 0x22, 0xf00d, 0x22), die Schrift geladen und weiss - die Glyphe wurde trotzdem nicht sichtbar; der Knopf traegt overflow:hidden und line-height:normal aus der Bibliothek. Statt das weiter aufzudroeseln, bleibt das mitgelieferte SVG stehen und wird nur eingefaerbt. Das ist ZUGLEICH das, was der Auftrag verlangt ("keine neuen Styles, auf Bestehendes zurueckgreifen") - und es ueberlebt ein Update der Bibliothek. ⚠️ Nicht "reparieren", indem die Glyphe zurueckkommt. Der Weg war gemessen erfolglos. ⚠️ Messfalle, die dabei fast eine Fehldiagnose erzeugt haette: getComputedStyle() liefert den Inhalt als Zeichenkette mit einem PUA-Zeichen, und das ueberlebt den Weg aus dem Browserwerkzeug NICHT - der Wert sah wie ein leerer String aus. Erst die Ausgabe als ZAHLENliste zeigte, dass er stimmt. */ /* ⚠️ Der Knopf liegt UEBER dem Fenster, nicht darin - wie beim Karten-Dialog, wo `.btn-close-container` mit margin-bottom:1rem ueber der weissen Karte steht und `dialog.dialog-event` selbst gar keinen Grund hat. ⚠️⚠️ `.pm` traegt von der Bibliothek `overflow:hidden` und wuerde den herausragenden Knopf abschneiden. Das Aufheben ist hier gefahrlos, weil das INNERE Scrollen an `.pm__body` haengt (eigenes overflow:auto, gemessen 686x445) und nicht an `.pm`. */ #cc-main .pm { overflow: visible; } /* ── Hoehe waechst mit dem Inhalt, wie beim Karten-Dialog ──────────────────────── ⚠️ Vom Nutzer am 17.8.2026 gemeldet ("hoehe automatisch anpassen ... oder hoehe wie beim dialog"): bei drei zugeklappten Gruppen stand unter dem letzten Block ein grosses leeres Feld. Ursache ist die Bibliothek: #cc-main .pm--box { height: calc(100% - 2em); max-height: 37.5em } also eine feste Hoehe, unabhaengig vom Inhalt. Der Karten-Dialog macht es umgekehrt und genau so, wie es hier sein soll: das Fenster selbst waechst mit, gedeckelt wird nur der INHALTSBEREICH (listMap.css: `dialog .dialog-event-group { max-height:70vh; overflow:auto }`). ⚠️ Die Deckelung an `.pm` bleibt trotzdem stehen - ohne sie koennte das Fenster bei vielen aufgeklappten Cookie-Tabellen ueber den Schirm hinauswachsen, und der Schliessknopf sitzt oberhalb der Oberkante. Er waere dann nicht mehr erreichbar. */ #cc-main .pm--box { height: auto; max-height: calc(100% - 2em); } #cc-main .pm__body { max-height: 70vh; } #cc-main .pm__close-btn, #cc-main .cm__close-btn { position: absolute; top: -3.8125rem; /* 45px Knopf + 16px Abstand, entspricht dem margin-bottom:1rem der Karte */ right: 0; display: flex; align-items: center; justify-content: center; width: 45px; height: 45px; padding: 0; border: none; border-radius: 0; background: #1271ee; transition: 0.4s; } /* ⚠️⚠️ DAS SVG DER BIBLIOTHEK WIRD AUSGEBLENDET, das Kreuz kommt als Font-Awesome-Glyphe - so macht es der Karten-Dialog (listMap.css: `button.close::before { content:"\f00d" }`), und der Nutzer hat den Unterschied am 17.8.2026 gesehen: das SVG der Bibliothek ist duenner gestrichelt und sitzt anders im Quadrat. ⚠️ Ausgeblendet wird das umschliessende , NICHT nur das darin. Beim ersten Versuch stand nur `svg { display:none }` da - der leere span blieb als Flex-/Blockelement stehen, und die ::before-Glyphe war im 45px-Quadrat nicht zu sehen. Zusammen mit display:flex + Zentrierung sitzt sie jetzt mittig. ⚠️ font-weight:900 gehoert dazu: "Font Awesome 6 Free" liegt auf den Sites nur als solid-Schnitt, und ohne die 900 waehlt der Schriftabgleich zwar denselben Schnitt, aber man verlaesst sich dabei auf ein Verhalten statt auf eine Angabe. */ #cc-main .pm__close-btn > span, #cc-main .cm__close-btn > span { display: none; } #cc-main .pm__close-btn::before, #cc-main .cm__close-btn::before { content: "\f00d"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-style: normal; font-size: 1.5rem; line-height: 1; color: #ffffff; } .no-touchevents #cc-main .pm__close-btn:hover, .no-touchevents #cc-main .cm__close-btn:hover, #cc-main .pm__close-btn:active, #cc-main .cm__close-btn:active { background: #2e92ff; } /* ── Schalter wie die Kartenlegende ────────────────────────────────────────────── ⚠️ Vom Nutzer am 17.8.2026 gemeldet: "bei den toggles der karte gibt es keine harken und kein x, auch sehen die toggles insgesamt anders aus." Stimmt - die Bibliothek legt ein ✓ und ein ✗ in die Bahn und baut 50x23 statt 40x24. Vorbild (listMap.css, `.mdevents_map .legend-item .toggleswitch`): Bahn 40x24, Radius 24px, ohne Ring und ohne Schatten Knopf 18x18, weiss, 3px Rand, im Ein-Zustand translateX(16px) ⚠️ Die fuenf Zahlen 40/24/18/3/16 sind EIN Satz und haengen zusammen - genau wie drueben in listMap.css vermerkt. Wer eine davon aendert, aendert alle. */ #cc-main .toggle__icon-on, #cc-main .toggle__icon-off { display: none; } #cc-main .toggle__icon { width: 40px; height: 24px; border-radius: 24px; box-shadow: none; } #cc-main .toggle__icon-circle { top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; box-shadow: none; } #cc-main .section__toggle:checked ~ .toggle__icon .toggle__icon-circle { transform: translateX(16px); } /* ── Ausklapp-Pfeile und Uebergangszeit ────────────────────────────────────────── ⚠️ Vom Nutzer am 17.8.2026 nachgereicht: "auch die ausklapper pfeile und die transision von 0.4 bitte aus dem design uebernehmen." Vorbild ist der Karten-Dialog (listMap.css): dialog.dialog-event .event-item-category::before -> "\f0da" zugeklappt (caret-right) "\f0d7" aufgeklappt (caret-down) ⚠️ Hier wird NICHT der Inhalt getauscht, sondern EIN Zeichen gedreht: "\f0da" um 90 Grad ist deckungsgleich mit "\f0d7", und nur so laesst sich der Wechsel ueberhaupt weich fuehren. Ein Inhaltswechsel springt hart - und die 0,4 s, die ausdruecklich mitgewuenscht sind, waeren wirkungslos. Dieselbe Loesung benutzt die Kartenlegende bereits (`.legend-filter-angle::before`, dort mit "\f105"). ⚠️ Das Icon sitzt VORNE, an der Stelle, an der die Bibliothek ihren eigenen Pfeil hat: ein 20px-SVG in einem gefuellten Kreis, absolut bei left:18px, wofuer der Titel bereits padding-left:3.4em reserviert. Der Kreis entfaellt ersatzlos - der Karten-Dialog setzt dort einen blanken Caret ohne Hintergrund. ⚠️⚠️ ZWEI Stolpersteine, beide am 17.8.2026 auf dev gemessen, nicht vermutet: 1. `#cc-main .pm__section-arrow { display:none }` GREIFT NICHT. Die Bibliothek schreibt `#cc-main .pm__section--expandable .pm__section-arrow{display:flex}` - Spezifitaet 1-2-0 gegen 1-1-0, ihre Regel gewinnt. Es standen dadurch zwei Pfeile nebeneinander. Der Selektor unten nennt deshalb dieselbe Klassenkette. 2. Der Aufklapp-Zustand haengt an der Klasse `is-expanded` AM ABSCHNITT, nicht an `aria-expanded` am Knopf. Mit dem Attributselektor drehte sich nichts (gemessen: transform blieb in beiden Zustaenden "none"). */ #cc-main .pm__section--expandable .pm__section-arrow { display: none; } /* ⚠️ ABSTAND: der Pfeil steht DICHT am Text, nicht in einem breiten Feld davor. Vom Nutzer am 17.8.2026 an einem Akkordeon der Site gezeigt ("Ausklapper wie hier ... bzgl. abstaende"). Die Bibliothek reserviert fuer ihren Kreis-Pfeil `padding-left: 3.4em` am Titel - bei den 20px Schriftgroesse dieser Zeile sind das rund 68px, und der blanke Caret stand darin verloren weit links. Gerechnet wird jetzt wie im Karten-Dialog, der `margin-right: 8px` hinter dem Caret setzt: Pfeil bei 1rem, Pfeil 1rem breit -> endet bei 2rem Text bei 2.5rem -> 0,5rem = 8px Abstand ⚠️ NUR padding-left ueberschreiben. Die senkrechten Innenabstaende der Zeile stammen aus derselben Kurzschreibweise der Bibliothek - wer `padding` statt `padding-left` setzt, plattet die Zeile mit. */ #cc-main .pm__section--expandable .pm__section-title { padding-left: 2.5rem; } /* ⚠️ DIE AUFGEKLAPPTE INHALTSFLAECHE BLEIBT WEISS. Ansage des Nutzers am 17.8.2026 ("den bereich nicht faerben ... oder weiss faerben"), nachdem die Kopfzeile auf #cccccc gesetzt wurde: die Bibliothek zieht denselben Wert auch unter Beschreibung und Cookie-Tabelle, weil beide `--cc-cookie-category-block-bg` benutzen und die Variable im aufgeklappten Zustand umdefiniert wird. Gefaerbt werden soll aber nur die KOPFZEILE - der Text darunter steht auf dem Fenstergrund. ⚠️ Ausgeschrieben und nicht ueber die Variable geloest: die Variable traegt hier zwei Bedeutungen (Kopfzeile UND Inhaltsflaeche), eine Aenderung an ihr faerbt immer beides. Nur eine eigene Regel trennt die zwei. */ #cc-main .pm__section--toggle .pm__section-desc-wrapper, #cc-main .pm__section--toggle .pm__section-desc { background: #ffffff; } #cc-main .pm__section--expandable .pm__section-title::before { content: "\f0da"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-style: normal; font-size: 1rem; line-height: 1; position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); width: 1rem; text-align: center; transition: transform 0.4s; } #cc-main .pm__section--expandable.is-expanded .pm__section-title::before { transform: translateY(-50%) rotate(90deg); } /* ⚠️ 0,4 s ueberall, wie im Kartendesign. Die Bibliothek liefert 0,25 s an den Schaltern und 0,15 s an den Knoepfen - beides schneller als alles andere auf der Site (`transition:0.4s` steht in listMap.css an Zoomknoepfen, Schliessknopf, Schalter und Kategoriezeile). ⚠️ An den Knoepfen werden die EINZELNEN Eigenschaften genannt und nicht `all`: ein pauschales `all` zoege auch Groessen- und Positionswechsel mit, und die Knoepfe muessen gleichgewichtig BLEIBEN (OH Rn. 135) - ein animierter Groessenunterschied waere genau das, was die Regel verhindern soll. */ #cc-main .toggle__icon, #cc-main .toggle__icon-circle { transition: transform 0.4s ease, background-color 0.4s ease; } #cc-main .cm__btn, #cc-main .pm__btn { transition: background-color 0.4s, border-color 0.4s, color 0.4s; } /* ── DAS BANNER STEHT HOEHER, STATT PLATZ ANZUHAENGEN (18.8.2026) ──────────── Ansage des Nutzers: "setz den banner etwas hoeher, so dass man einen kleinen abstand unter dem banner hat, so das man, wenn man moechte dazwischen das Impressum oder Datenschutz anklicken kann. Ohne Fussraumluecke" - fester Wert fuer ALLE Sites. Zuerst 50px probiert, am 18.8.2026 auf 100px erhoeht. Vorher haengte fussraumFreihalten() dem die volle BANNERHOEHE als padding-bottom an, damit die Fusszeile ueber das Banner geschoben werden kann. Auf sprezu LIVE gemessen: 397px bei 1920 Breite, 373px bei 390 - ein leerer Streifen unter dem Footer, solange das Banner steht. Genau der sollte weg. ⚠️ Die Bibliothek setzt `#cc-main .cm--bottom { bottom: var(--cc-modal-margin) }`, also 1rem = 16px. Hier werden daraus 100px. ⚠️⚠️ DIE ZWEI REGELN UNTEN GEHOEREN ZUSAMMEN. Das Anheben allein bringt gar nichts: fussraumFreihalten() bemisst den Fussraum an der HOEHE des Banners, nicht an seiner Lage - die Luecke bliebe stehen und der Abstand kaeme obendrauf. Wer eine der beiden Regeln entfernt, bekommt entweder die Luecke zurueck oder ein Banner, das die Fusszeile wieder verdeckt. ⚠️ Der Fussraum ist ein INLINE-Stil am - den schlaegt nur `!important`. Eng gefasst auf `html.show--consent`, weil er genau dann gesetzt wird; vorher geprueft, dass keine der Sites selbst ein padding-bottom am body fuehrt (die Treffer waren durchweg `body:after`-Debugmarken). ⚠️ Das Skript RECHNET den Wert weiterhin und setzt ihn - er wird hier nur ueberschrieben. Das ist fuer den Versuch Absicht: vollstaendig reversibel und ohne die Fassungsnummer des eID-Skripts anzufassen (eine CSS-Datei bekommt ihren Cache-Brecher aus der mtime, das eID-Skript nicht). Bleibt die Loesung, gehoert das Abschalten in fussraumFreihalten() selbst - dann MIT v=-Bump. 🔴🔴 OFFEN UND UNGEPRUEFT, BEVOR DAS AUF PROD GEHT: ob 100px reichen, damit Impressum und Datenschutz am Seitenende anklickbar BLEIBEN (OH Digitale Dienste, Rn. 121). Der Spalt zeigt am Scroll-Anschlag die letzten 100px des Dokuments - liegt die Linkzeile hoeher, ist sie verdeckt, und das war der ganze Zweck des Fussraums. Der bisherige Weg war haesslich, aber er MASS und zog automatisch nach (247-499px je nach Breite und Textlaenge); dieser hier ist ein fester Wert an einer Rechtspflicht. Im Browser nachmessen. */ #cc-main .cm--bottom { bottom: 100px; } html.show--consent body { padding-bottom: 0 !important; } /* Der dauerhafte Widerrufsreiter. ⚠️⚠️ Er ersetzt den `.cc-revoke`-Reiter der alten Bibliothek. orestbida bringt keinen mit, und ohne ihn gaebe es nach der Entscheidung KEINEN sichtbaren Weg mehr, sie zu aendern - Verstoss gegen Art. 7 Abs. 3 S. 4 DS-GVO und OH Rn. 126. Am 14.8.2026 nachgemessen: ohne diesen Knopf null Widerrufswege auf der Seite. ⚠️⚠️ ER BLEIBT UNVERAENDERT, auch nachdem das Fenster hell geworden ist. Beim Umbau am 17.8.2026 hatte ich ihn auf deckendes #1271ee gezogen; der Nutzer hat das noch am selben Tag zurueckgewiesen ("das flag auf der Startseite links am rand unten soll wieder aussehen wie vorher"). Der Grund traegt auch fachlich: der Reiter liegt ueber der SEITE, nicht im Fenster, und muss sich gegen beliebige Seiteninhalte behaupten - der durchscheinende Weissschleier mit Weichzeichner tut das auf hellen wie auf dunklen Hintergruenden. Nicht erneut an die Fenstergestaltung angleichen. */ .md-consent-reiter { position: fixed; left: 0; bottom: 100px; z-index: 100; display: flex; justify-content: center; align-items: center; text-align: center; /* ⚠️ Die 1.875rem OBEN sind kein Zierrat - sie sind der Platz, auf dem das Cookie-Symbol sitzt (`::before`, absolut bei top:8px). Wer sie kuerzt, legt das Symbol in das Wort "Cookies". Genau das ist bis zum 19.8.2026 auf den Landesverbands-Sites passiert, weil der Reiter als