/* Rückmeldung Ilona Kuhlmann vom 25.08.2026 — die Punkte, die eine Regel und keine neue Seite brauchen. Warum eine eigene Datei und nicht Elementors post-.css: die betroffenen Regeln verteilen sich über post-81, post-583, post-1622 und post-6858, und jede davon wird beim nächsten Crawl von crossalm.com überschrieben. Diese Datei gehört dem Repo, `patch_public.py` hängt sie als letztes Stylesheet in jeden . Letztes Stylesheet heißt: sie gewinnt bei gleicher Spezifität, ohne !important. Wo trotzdem !important steht, ist daneben notiert, gegen welche Regel es geht. Die Zahlen darin sind gemessen, nicht geschätzt — jeweils im Browser an der genannten Seite abgelesen. Die Nummern 2 und 3 fehlen: das waren die Regeln fürs Aufklappmenü, am 27.08.2026 wieder entfernt. Sie machten den Kopfbereich kaputt — zwei Chevrons je Zeile und ein Ausklapper, der nicht an seinem Menü hing. Die übrigen Nummern bleiben, wie sie sind, damit die Verweise in den Commits weiter stimmen. */ /* --------------------------------------------------------------------------------- 1. Fuß: die Knöpfe für LinkedIn und Xing sind größer als ihre Symbole --------------------------------------------------------------------------------- Gemessen unter 1300px: Symbol 10px in einem Knopf von 22px — das Symbol füllt 45% der Fläche, der Rest ist Polster. Über 1300px dasselbe Verhältnis mit 18px auf 40px. Das Verhältnis macht `--icon-padding:0.6em`: der Knopf ist immer 2,2-mal so groß wie das Symbol. **Nachtrag 25.08.2026, zweite Runde:** nur das Polster zu verkleinern war zu wenig. Der Knopf schrumpfte von 22px auf 16px, das Symbol blieb bei 10px — es war weiterhin winzig, nur in einem kleineren Kasten. Der eigentliche Grund steckt in Elementors Sprungmarke: `--icon-size` steht über 1300px auf 18px, unter 460px auf 18px, aber **dazwischen auf 10px**. Genau in diesem Band liegt jeder Laptop, also auch der, auf dem die Rückmeldung entstanden ist. **Dritte Runde, 25.08.2026:** 18px war weiterhin zu klein. Jetzt 24px Symbol bei 0.4em Polster — Knopf 43px, Füllung 56%. Damit ist das Symbol mehr als doppelt so groß wie der Ausgangswert von 10px und der Knopf etwas größer als der, den Elementor über 1300px zeigte (40px), aber mit einem Symbol von 24px statt 18px darin. Die drei Runden in Zahlen, jeweils gemessen bei 1280px Fensterbreite: Ausgangswert Knopf 22px Symbol 10px Füllung 45% erste Runde Knopf 16px Symbol 10px Füllung 63% (nur Polster — falsch) zweite Runde Knopf 31px Symbol 18px Füllung 59% (noch zu klein) dritte Runde Knopf 43px Symbol 24px Füllung 56% (im Bild noch zu viel Rand) jetzt Knopf 44px Symbol 28px Füllung 64% Der letzte Schritt geht nur noch ins Symbol, nicht in den Knopf: 28px statt 24px bei 0.28em statt 0.4em Polster. Der Knopf bleibt damit bei 44px und die Fußzeile wächst nicht weiter, das Logo darin ist aber knapp dreimal so groß wie der Ausgangswert von 10px. Nachgesehen im Bild `pruefbilder/fuss-symbole.png`, nicht nur gemessen. `--icon-size` wird am Behälter gesetzt und nicht am Knopf: Elementor setzt es am Widget, und der Behälter liegt näher am Symbol. Näher gewinnt bei geerbten Eigenschaften, das !important ist trotzdem nötig, weil Elementors Regel die Seiten-Id vor sich her trägt. */ .elementor-social-icons-wrapper { --icon-size: 28px !important; } .elementor-social-icons-wrapper .elementor-social-icon { --icon-padding: 0.28em !important; } /* --------------------------------------------------------------------------------- 4. Die Aufzählungen mit den runden Symbolen standen kreuz und quer --------------------------------------------------------------------------------- Der häufigste Punkt der Rückmeldung — sie nennt ihn dreimal (SAP, SAP-Entwicklung, Atlassian) und einmal als „generell". Ursache ist Elementors Umbruch-Layout `--layout-inline` zusammen mit `elementor-align-center`: die Punkte laufen als eine umbrechende Zeile und werden zeilenweise mittig gesetzt. Gemessen auf /sap-consulting: die sieben Symbole einer Aufzählung beginnen bei x = 293, 316, 363, 386, 391, 433 und 452 — sieben verschiedene Kanten. Es sind ganze Sätze („welche Prozesse heute im Solution Manager laufen"), also gehört jeder auf seine eigene Zeile. Damit ist auch der Punkt zu Atlassian erledigt, wo unklar war, wohin CC4 gehört: bei einem Punkt pro Zeile gibt es keine Zuordnung mehr zu raten. Betrifft 27 Seiten und 56 Aufzählungen, alle auf Produkt-, Leistungs- und Säulenseiten — kein Blog-Kopf mit Datum und Kategorie ist darunter, wo die waagerechte Reihe richtig wäre. Nachgezählt am 25.08.2026. */ .elementor-widget-icon-list.elementor-icon-list--layout-inline .elementor-icon-list-items { display: block; } .elementor-widget-icon-list.elementor-icon-list--layout-inline .elementor-icon-list-item { display: flex; justify-content: flex-start; text-align: left; } /* Elementor gibt den Punkten der Umbruch-Reihe ein waagerechtes Polster, damit sie in der Zeile auseinanderstehen. Untereinander erzeugt dasselbe Polster einen Einzug links und Luft rechts; senkrecht gehört der Abstand zwischen die Zeilen. */ .elementor-widget-icon-list.elementor-icon-list--layout-inline .elementor-icon-list-item:not(:last-child) { margin-bottom: .5em; } .elementor-widget-icon-list.elementor-icon-list--layout-inline .elementor-icon-list-item > a, .elementor-widget-icon-list.elementor-icon-list--layout-inline .elementor-icon-list-item { padding-left: 0; padding-right: 0; } /* Das Symbol darf nicht mit der ersten Textzeile mitwachsen oder mitrutschen: bei zweizeiligen Punkten soll es an der ersten Zeile stehen, nicht in der Mitte. */ .elementor-widget-icon-list.elementor-icon-list--layout-inline .elementor-icon-list-icon { align-self: flex-start; flex-shrink: 0; } /* --------------------------------------------------------------------------------- 5. Zwischen einer einführenden Überschrift und dem, was sie einführt, war zu viel Luft --------------------------------------------------------------------------------- Gemessen auf /sap-consulting: zwischen „Unsere SAP-ALM-Leistungen" und der ersten Kachel „Zielarchitektur" liegen 215px. Den größten Teil davon macht das Fußpolster des Fließtext-Bandes selbst: 101px. Das Band (`2c87a71f`, der blaue Fließtext-Baustein) steht auf einer Produktseite mehrfach. Wo darin nur eine Überschrift steht, ist es kein eigener Abschnitt, sondern die Überschrift des nächsten — und die 101px trennten sie davon ab. Genau das ist der Eindruck „als würde etwas fehlen" und „die Kacheln stehen für sich". Getroffen werden soll nur das Band, dessen **letztes** Widget eine Überschrift ist — nicht jedes Band mit einer Überschrift darin. Der Unterschied hängt an der Spalte: die einführenden Bänder haben eine einzige Spalte über die volle Breite (`elementor-col-100`), das Band „So fangen wir an" dagegen zwei halbe, in denen Überschrift und Formular stehen. Dessen Fußpolster muss bleiben, sonst klebt das Formular am nächsten Abschnitt. Nachgemessen auf /sap-consulting: von sechs Bändern treffen genau zwei zu — das mit „Unsere SAP-ALM-Leistungen" und das mit „Typische Projekte". Nicht getroffen werden das Band mit fünf Überschriften, die zwei Bänder, die auf Fließtext enden, und das Band „So fangen wir an". */ .elementor-section.elementor-element-2c87a71f:has( .elementor-col-100 > .elementor-widget-wrap > .elementor-widget-heading:last-child ) { padding-bottom: 24px; } /* --------------------------------------------------------------------------------- 6. Das Kontaktfeld: weiße Schrift auf hellgrauem Grund --------------------------------------------------------------------------------- Der Punkt, den sie dreimal nennt. Gemessen: der Kasten ist #E1E6F0 (`--e-global-color-accent`), die Beschriftungen kommen weiß aus HubSpot — Kontrast 1,2:1. Der Kasten wird Hausblau statt hellgrau (Entscheidung vom 25.08.2026). Damit ist die weiße HubSpot-Schrift bei 8,6:1 lesbar, ohne dass am Formular in HubSpot etwas geändert werden muss. Der Weg über HubSpot wäre der andere gewesen — beide zugleich gehen nicht, dunkle Schrift auf Blau wäre wieder unlesbar. Getroffen wird nicht eine Spalten-Id, sondern **jede Spalte, in der ein HubSpot-Formular steht**. Nachgezählt: das Formular liegt in rund 30 verschiedenen Elementor-Spalten, und fast jede holt ihren Hintergrund aus derselben Variablen `--e-global-color-accent`. Eine Regel auf `3dd04444` hätte 22 Produktseiten getroffen und die Startseite, /solutions, die englischen Seiten und die Beiträge weiter hellgrau gelassen — also genau den Teil, den sie mit „generell" meint. Angeknüpft wird an **beiden** Ankern, `:is(, .hbspt-form)`. Vor der Einwilligung steht nur der Platzhalter im Markup; sobald HubSpots Skript läuft, ersetzt es ihn durch `.hbspt-form`, und der Platzhalter ist weg. Am 27.08.2026 auf Staging gemessen: mit nur dem Platzhalter als Anker war der Kasten nach der Einwilligung wieder `#E1E6F0` — also genau in dem Zustand hellgrau, den ein Besucher sieht. Beide Anker liegen an derselben Stelle im Baum (`Spalte > widget-wrap > widget-html > widget-container`), eine Regel deckt beide. Das `>` vor `.elementor-widget-wrap` ist nötig, damit nur die Spalte trifft, die das Formular **direkt** enthält. Ohne es würde jede übergeordnete Spalte mitgefärbt und halbe Seiten wären blau. Nachgeprüft auf /solutions: genau ein Treffer. !important: die Elementor-Regel setzt die Farbe über `.elementor-583 .elementor-element.elementor-element-3dd04444:not(…) > .elementor-widget-wrap` und trägt die Seiten-Id vor sich her. */ .elementor-column:has(> .elementor-widget-wrap > .elementor-widget-html :is([data-borlabs-cookie-content-blocker-id="hubspot-form"],.hbspt-form)) > .elementor-widget-wrap { background-color: var(--e-global-color-e66f267, #004C79) !important; } /* Die Überschriften und Absätze, die mit im Kasten stehen, waren auf dunkle Schrift gestellt, weil der Kasten hell war. */ .elementor-column:has(> .elementor-widget-wrap > .elementor-widget-html :is([data-borlabs-cookie-content-blocker-id="hubspot-form"],.hbspt-form)) > .elementor-widget-wrap, .elementor-column:has(> .elementor-widget-wrap > .elementor-widget-html :is([data-borlabs-cookie-content-blocker-id="hubspot-form"],.hbspt-form)) > .elementor-widget-wrap > .elementor-widget-heading .elementor-heading-title { color: #fff; } /* --------------------------------------------------------------------------------- 6b. Eine helle Karte für das Formular auf dem blauen Grund --------------------------------------------------------------------------------- Nachtrag 25.08.2026: „Das HubSpot eigene Element ist so komisch grau." Gemessen: der Kasten, der im blauen Feld steht, ist Borlabs' Platzhalter `.brlbs-cmpnt-cb-preset-a` mit `background: rgb(0,0,0)` — schwarz, 1031x179px. Er ist nicht von HubSpot, sondern der Einwilligungs-Platzhalter, der **vor** dem Klick auf „Inhalt entsperren" steht. Deshalb ist er von hier aus zu beheben. Der Bereich, in dem der Platzhalter und später das Formular selbst stehen, wird eine weiße Karte auf dem blauen Grund. Das ist auch die Voraussetzung dafür, dass die Schrift des HubSpot-Formulars auf **schwarz** gestellt werden kann: schwarz auf Blau wäre wieder unlesbar, schwarz auf dieser Karte ist 12,6:1. Die Karte gehört ins Repo, die Schriftfarbe des Formulars nach HubSpot — beide Teile greifen dann ineinander statt gegeneinander. `background` und nicht `background-color`: Borlabs setzt die Fläche selbst über die Kurzschreibweise (`background: var(--content-blocker-background-color)`), und eine Kurzschreibweise überschreibt man am sichersten mit derselben. Nachgesehen in `borlabs-cookie-1-de.css`. */ .elementor-column:has(> .elementor-widget-wrap > .elementor-widget-html :is([data-borlabs-cookie-content-blocker-id="hubspot-form"],.hbspt-form)) > .elementor-widget-wrap > .elementor-widget-html > .elementor-widget-container { background: #fff; border-radius: 10px; padding: 1.5rem; /* Die Regel für den blauen Grund setzt `color:#fff`, und das erbt alles darin — auch das HubSpot-Formular, das dann weiß auf weißer Karte stünde. */ color: #333; /* Die Karte umschließt das Formular, statt über die volle Spaltenbreite zu laufen: 560px Formular in 1120px Karte hießen 280px leeres Weiß auf jeder Seite, und das sah nach Versehen aus. 608px = 560 + zweimal das Kartenpolster von 24px. Bei 1440px und bei 375px nachgesehen, in beiden Zuständen — vor der Einwilligung stapeln die zwei Borlabs-Knöpfe darin, und das trägt. */ max-width: 608px; margin-left: auto; margin-right: auto; } /* Alles in der Karte auf dunkle Schrift — die Regel oben färbt den blauen Grund weiß, und die Karte liegt darin. */ .elementor-column:has(> .elementor-widget-wrap > .elementor-widget-html :is([data-borlabs-cookie-content-blocker-id="hubspot-form"],.hbspt-form)) .brlbs-cmpnt-content-blocker, .elementor-column:has(> .elementor-widget-wrap > .elementor-widget-html :is([data-borlabs-cookie-content-blocker-id="hubspot-form"],.hbspt-form)) .brlbs-cmpnt-cb-preset-a { background: none !important; color: #333 !important; } .elementor-column:has(> .elementor-widget-wrap > .elementor-widget-html :is([data-borlabs-cookie-content-blocker-id="hubspot-form"],.hbspt-form)) .brlbs-cmpnt-cb-description { color: #333 !important; } /* --------------------------------------------------------------------------------- 7. Das Kontaktfeld unter die Überschrift statt daneben --------------------------------------------------------------------------------- Aufgebaut war der Abschnitt als zwei halbe Spalten: links allein die Überschrift („So fangen wir an"), rechts das Formular. Die linke Spalte enthielt nichts weiter, also standen 840px leer neben einem Formular von 634px. Beide Spalten laufen jetzt über die volle Breite und stapeln sich: Überschrift oben, Formular darunter. Das ist die Anordnung, die sie auf der SAP-Entwicklungsseite als die schönere beschreibt. */ .elementor-element-6c4a9554 > .elementor-container { flex-wrap: wrap; } .elementor-element-6c4a9554 > .elementor-container > .elementor-element-1ed65e34, .elementor-element-6c4a9554 > .elementor-container > .elementor-element-3dd04444 { width: 100%; } /* Das seitliche Polster von 4% war dafür da, den Kasten von der Nachbarspalte abzusetzen. Über die volle Breite ist es nur noch ein Rand. */ .elementor-element-6c4a9554 > .elementor-container > .elementor-element-3dd04444 > .elementor-widget-wrap { margin-left: 0; margin-right: 0; } /* Gestapelt stoßen die Innenabstände beider Spalten aufeinander, die nebeneinander nie übereinander lagen: 30px unten an der Überschriftenspalte, 44,8px oben an der Formularspalte, dazu 24px Kartenpolster. Auf Staging gemessen: 151px Luft zwischen „So fangen wir an" und der weißen Karte — dieselbe Sorte Lücke, die sie an zwei anderen Stellen ausdrücklich als zu groß benannt hat. Auf 8+8 gekürzt, mit dem Kartenpolster bleiben 40px. */ .elementor-element-6c4a9554 > .elementor-container > .elementor-element-1ed65e34 > .elementor-widget-wrap { padding-bottom: 8px; } .elementor-element-6c4a9554 > .elementor-container > .elementor-element-3dd04444 > .elementor-widget-wrap { padding-top: 8px; } /* --------------------------------------------------------------------------------- 8. Ein Kontaktfeld, das überall gleich breit ist --------------------------------------------------------------------------------- Das HubSpot-Formular steht an 35 Stellen in rund 30 verschiedenen Elementor-Spalten, und jede bringt ihre eigene Breite mit — daher „auf manchen Seiten ist das Kontaktfeld breiter als auf anderen". Nachgezählt am 25.08.2026. Begrenzt wird deshalb das Formular selbst und nicht die 30 Spalten: eine Regel statt 30, und sie greift auch dort, wo später eine neue Spalte dazukommt. 560px ist die Breite, bei der die Felder noch eine Zeile pro Angabe halten, ohne über den Kasten hinauszulaufen. */ .hbspt-form { max-width: 560px; margin-left: auto; margin-right: auto; } /* --------------------------------------------------------------------------------- 9. Der nächste Abschnitt legte sich über den Text des Kontaktfelds --------------------------------------------------------------------------------- Gemeldet am 28.08.2026 an https://staging.crossalm.net/en/cross-archiver/#demo: der letzte Aufzählungspunkt („Together we plan the procedure and create a roadmap for archiving your SAP Solution Manager") war unten abgeschnitten. Gemessen bei 1920px: das Kontaktband #demo ist 464px hoch, sein Text endet 40px über der Unterkante — aber der folgende Abschnitt beginnt 115px früher und deckt die letzten 75px zu. Der Grund steht in post-1854.css: .elementor-1854 .elementor-element.elementor-element-7f98b21b{ margin-bottom:-6%; padding:02% 0% 0% 0%; } -6% von 1905px sind genau die gemessenen -114px. Die Überlappung ist Absicht: der folgende Abschnitt soll sich mit seiner Wellengrafik unter das dunkle Band schieben. Sie ging nur so lange gut, wie in der rechten Spalte der HubSpot-Buchungskalender stand — der war hoch genug, dass die Überlappung leeren Raum fraß. Seit dort das Kontaktformular steht, ist das Band kürzer, und die Überlappung frisst Text. Deshalb wird der negative Rand nicht entfernt, sondern ausgeglichen: 6% Polster unten, gegen -6% Rand. Beide Prozentwerte beziehen sich auf dieselbe Breite des umgebenden Blocks und heben sich damit bei jeder Fensterbreite exakt auf. Das Band überlappt weiter wie entworfen, der Text steht aber immer über der Kante. Betroffen sind die zwei Seiten, die diese Regel wirklich treffen — /en/cross-archiver/ und /cross-archiver/. Die daraus erzeugten Seiten tragen die Klasse zwar auch, dort greift die Regel aus post-1854.css aber nicht (gemessen: margin-bottom 0px). --------------------------------------------------------------------------------- */ #demo.elementor-element-7f98b21b { padding-bottom: 6%; }