/* * 21X — Design-Konsistenz-Ebene (R20, 2026-09) * ============================================================================ * Ergebnis eines gemessenen Audits über 11 Seiten (Desktop 1600px + Mobil 390px). * Diese Datei korrigiert AUSSCHLIESSLICH Abweichungen von einem System, das es * bereits gibt — sie führt keine neue Gestaltung ein. Alles ist nach Regelgruppe * sortiert und einzeln entfernbar; die Datei wird nach redesign-v2.css geladen. * * Zugrundeliegendes System (aus dem Elementor-Kit, Ratio 1.25, root 18px): * Typo 68.67 / 54.94 / 35.15 / 28.13 / 22.5 px * Farben Ink #1A1A2E · Text #4B5563 · CI-Blau #2B5CA8 → #2278C0 · Hell #1DACE4 * Radius Karten 12px · Bilder 12px · Buttons 10px * Raster 96px Standard · 120px Auftakt · 64px kompakt (Home) * ============================================================================ */ /* ============================================================ 1 — TYPO: Widgets zurück auf die Skala Fünf Widgets lagen daneben (61.8 / 21.6 / 20.7 / 18px). Alle anderen Überschriften sitzen bereits korrekt und werden nicht angefasst. ============================================================ */ /* Home-H1 war als einzige Seite 61.8px statt 68.67px. */ body.page-id-44 .elementor-element-3d85ee2 .elementor-heading-title { font-size: 3.815rem !important; line-height: 1.15em !important; } /* Kartentitel: Partner (18) · Team (18) · Media-Artikel (18) · Stellen (21.6) lagen unter dem Wert, den Announcements/Documents (22.5) schon nutzen. */ .elementor-element-51aa40c .elementor-heading-title, .elementor-element-0f5926e .elementor-heading-title, .elementor-element-6070414 .elementor-heading-title, .elementor-element-a8608ea .elementor-heading-title, .personio-job-postings .job-posting h3, body .personio-job-postings .job-posting h3.job-posting-title, body .job-posting h3.job-posting-title { font-size: 1.25rem !important; /* 22.5px */ line-height: 1.25 !important; } /* Die "Why 21X"-Pillar-Karten standen als einzige Kartentitel auf 18px. */ body .tox-why .tox-why__card h4 { font-size: 1.25rem !important; /* 22.5px */ line-height: 1.25 !important; } /* "Why it matters" stand als H2 auf 18px — kleiner als der Fließtext daneben. */ body.page-id-46 .elementor-element-a1b2c41 .elementor-heading-title { font-size: 1.953rem !important; /* 35.15px */ line-height: 1.15em !important; } /* ============================================================ 2 — LABELS: Kategorie-Auszeichnungen vereinheitlichen Drei verschiedene Umsetzungen für dieselbe Rolle: Announcement-Topic (H2, 14.4px), Media-Kategorie (H3, 14.4px) und die P&S-Sektionsmarke (H2, 20.7px, Fremdblau). Alle bekommen dieselbe Label-Sprache wie die 19 bestehenden Eyebrows — nur ohne Oberlinie, weil sie in Karten sitzen. ============================================================ */ .elementor-element-f4b9649 .elementor-heading-title, .elementor-element-0c8271d .elementor-heading-title { font-size: 12px !important; font-weight: 700 !important; letter-spacing: .12em !important; text-transform: uppercase !important; color: #2278C0 !important; line-height: 1.3 !important; } /* Sektionsmarke auf Products & Services: gleiche Sprache wie alle anderen Eyebrows der Seite (13px, Oberlinie, CI-Blau). */ body.page-id-48 .elementor-element-e1ce987 .elementor-heading-title { font-size: 13px !important; font-weight: 700 !important; letter-spacing: .18em !important; text-transform: uppercase !important; color: #2278C0 !important; display: inline-block !important; padding-top: 12px !important; border-top: 2px solid #1DACE4 !important; line-height: 1.3 !important; } /* ============================================================ 3 — BUTTONS: Geometrie auf zwei Größen reduzieren Farbe und Radius stimmten bereits; darunter lagen 4 Höhen, 7 Paddings, 5 Schriftgrößen und 3 Gewichte. L = Seiten-CTA, M = alles andere. ============================================================ */ /* M — Standard */ body a.elementor-button, body .elementor-button.elementor-button, body .elementor-element.elementor-element .elementor-button, body .elementor-widget-button .elementor-button { min-height: 46px !important; padding: 13px 22px !important; font-size: 15.3px !important; font-weight: 700 !important; line-height: 1.2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; } /* L — Hero- und Sektions-CTAs behalten die größere Variante */ body .tox-hero-cta__btn, body .elementor-widget-button.elementor-widget-button .elementor-button-lg, body .elementor-button.elementor-size-lg { min-height: 51px !important; padding: 15px 30px !important; font-size: 18px !important; font-weight: 700 !important; } /* Der Hero-CTA war das einzige Element auf der Seite mit Inter statt Grandview und mit einem abweichenden Verlaufsende (#1DACE4 statt #2278C0). */ body .tox-hero-cta__btn { font-family: "Grandview", "Inter", system-ui, -apple-system, sans-serif !important; } body .tox-hero-cta__btn--primary { background-image: linear-gradient(135deg, #2B5CA8 0%, #2278C0 100%) !important; } /* Onboard-Pille und Suchfeld sitzen nebeneinander in der Navigation und hatten 46px vs. 40px Höhe — sichtbarer Versatz. NUR ab Desktop: unterhalb davon teilen sich Logo, Suche, Onboard und der Burger eine 358px-Zeile; groessere Pillen draengen den Burger aus dem Header und die Navigation waere mobil nicht mehr erreichbar. */ @media (min-width: 1025px) { .tox-search-toggle { height: 46px !important; font-size: 15.3px !important; font-weight: 700 !important; } a.tox-nav-onboard { min-height: 46px !important; padding: 13px 22px !important; font-size: 15.3px !important; } /* Die eingefahrene Insel behält ihre kompakten Maße. */ .elementor-location-header.nav-scrolled .tox-search-toggle { height: 28px !important; font-size: 13px !important; } .elementor-location-header.nav-scrolled a.tox-nav-onboard { min-height: 28px !important; padding: 6px 14px !important; font-size: 13px !important; } } /* ============================================================ 4 — KARTEN: eine Kartensprache statt fünf Bestand: Radien 4/8/12/14px, sechs Hintergründe, Ränder 0/1/2/3px in fünf Farben. Vorbild sind die "Why 21X"-Karten (weiß, 1px #DFE3EA, weicher Schatten). ============================================================ */ .elementor-element-1d5a136, .elementor-element-a8a83e4, .elementor-element-c2247be, .elementor-element-d36579b, .elementor-element-52b6eb6, .elementor-element-f8d545c, .elementor-element-d6360d0, .elementor-element-5ed47ee, .elementor-element-910df00, .elementor-element-4bce27d, .elementor-element-2643f8b, .elementor-element-c7a1b48, .elementor-element-a78e7fc, .elementor-element-3854215, .elementor-element-58a2161, .elementor-element-f78462e, .elementor-element-b8ac78f, .elementor-element-60c9b5e, .elementor-element-fc3f338, .elementor-element-74c66ad, .elementor-element-699e8b6, .elementor-element-a3bf514, .elementor-element-a397128, .elementor-element-b9ee4ff, .elementor-element-f2ff4b5, .elementor-element-b1fb232, .elementor-element-302b24d, .elementor-element-32505fea { border-radius: 12px !important; background-color: #ffffff !important; border: 1px solid #DFE3EA !important; box-shadow: 0 1px 2px rgba(15, 23, 42, .04) !important; } .tox-why__card, .personio-job-postings .job-posting { border-radius: 12px !important; } /* Das Teamfoto-Kachelbild trägt das Foto als Hintergrund — kein Rand, kein Weiß. */ .elementor-element-421ba7d { border-radius: 12px !important; border: 0 !important; box-shadow: none !important; } /* ============================================================ 5 — AUSRICHTUNG: alles linksbündig Der Punkt aus dem Kundenfeedback ("Icons mal zentriert, mal linksbündig"). Gemessen: Home 3 verschiedene Werte, Our Story 6 Karten auf flex-end (unten). ============================================================ */ .elementor-element-d6360d0, .elementor-element-3e0a994, .elementor-element-680c2ee, .elementor-element-6a71c60, .elementor-element-910df00, .elementor-element-4bce27d, .elementor-element-2643f8b, .elementor-element-c7a1b48, .elementor-element-a78e7fc, .elementor-element-866def5, .elementor-element-92a7c90, .elementor-element-9c7f15c { align-items: flex-start !important; text-align: left !important; } .elementor-element-d6360d0 .elementor-widget-image, .elementor-element-d6360d0 .elementor-widget-icon, .elementor-element-910df00 .elementor-widget-image, .elementor-element-4bce27d .elementor-widget-image, .elementor-element-2643f8b .elementor-widget-image, .elementor-element-c7a1b48 .elementor-widget-image, .elementor-element-a78e7fc .elementor-widget-image { text-align: left !important; } /* ============================================================ 5b — PARTNER-LOGOS: zentriert lassen (2026-09-06) .partner-logo (= d6360d0) ist ein Flex-Container; das align-items:flex-start aus Abschnitt 5 schob die Logos an den linken Rand (margin:auto/text-align greifen bei Flex nicht). Partner-Logos sind ein zentriertes Raster, daher hier wieder mittig. Steht nach Abschnitt 5 -> gewinnt im Cascade. ============================================================ */ .partner-logo { align-items: center !important; justify-content: center !important; text-align: center !important; } .partner-logo img { display: block !important; } /* ============================================================ 6a/6b — BILDER: zurueckgenommen (2026-09-06) Der Consistency-Pass hatte die 5 Inhaltsfotos (7fbfd3c, 06c8435, 9bda8f9, 0c08aec, 373dca8) auf width:100% gezwungen und ihre -480px-Randmargen (den beabsichtigten seitlichen Bleed) entfernt, ausserdem global .elementor-widget-image img auf height:auto gesetzt. Ergebnis: Header-Bilder der Subpages zu hoch/gross, Mainpage-Bilder als volle Solo-Bloecke statt von links/rechts. Auf Kundenwunsch zurueck auf den alten Zustand: Header-Bilder wieder flach, Inhaltsfotos wieder mit seitlichem Bleed. Regeln daher entfernt. (Die Mobile-Begrenzung <=480px in Abschnitt 8 bleibt aktiv.) ============================================================ */ /* ============================================================ 6 — BILDER: ein Eckradius für Inhaltsbilder Bestand 0 / 8 / 12px. Icons und Logos bleiben bewusst ohne Radius. ============================================================ */ .elementor-element-0c08aec img, .elementor-element-373dca8 img, .elementor-element-03438b8 img, .elementor-element-7fbfd3c img, .elementor-element-06c8435 img, .elementor-element-9bda8f9 img, .elementor-element-7fbfd3c img { border-radius: 12px !important; } /* Media-Kacheln standen im selben Raster auf 216px und 220px Höhe. */ .elementor-element-03438b8 img { aspect-ratio: 16 / 9 !important; height: auto !important; object-fit: cover !important; } /* ============================================================ 7 — VERTIKALES RASTER Home lief auf 50px (viewport-abhaengig), Our Story auf 60px, P&S auf 144px — alle anderen Sektionen der Seite auf 96px bzw. 120px im Auftakt. Der Home-Wert sitzt in der bestehenden R5-Regel in redesign-v2.css (jetzt 64px, kompakt nach Kundenwunsch); hier bleiben die beiden Einzelausreisser. ============================================================ */ body.page-id-46 .elementor-element-a1b2c40 > .e-con-inner { padding-top: 96px !important; padding-bottom: 96px !important; } body.page-id-48 .elementor-element-89f15df > .e-con-inner { padding-top: 96px !important; padding-bottom: 96px !important; } /* ============================================================ 8 — MOBIL (≤ 480px) Inhaltsbilder liefen 32px über den rechten Rand: links 16px Abstand, rechts angeschnitten. Zusätzlich ragte auf P&S ein Container nach links und auf Media eine Filter-Pille nach rechts heraus. ============================================================ */ @media (max-width: 480px) { /* Nur der Seiteninhalt — nicht Header/Footer: eine erzwungene Breite auf jedem Bild-Widget bläht auch das Logo auf die volle Zeile auf und verdrängt den Burger-Button aus dem Header. Hier reicht die Begrenzung. */ .elementor-location-main .elementor-widget-image img, .elementor-location-main .elementor-widget-image > .elementor-widget-container { max-width: 100% !important; height: auto !important; } /* Mehrere Sektionen trugen mobil ein asymmetrisches Padding von 16px links / 49px rechts — die Inhaltsspalte war dadurch 325px statt 358px breit und alles darin saß sichtbar zu weit links. Header und Footer bleiben ausgenommen (eigene Logik, siehe Regression oben). */ .e-con.e-parent:not(.elementor-location-header .e-con):not(.elementor-location-footer .e-con) { padding-left: 16px !important; padding-right: 16px !important; } .e-con.e-parent, .e-con.e-parent > .e-con-inner { max-width: 100% !important; overflow-x: clip; } .e-filter, .elementor-element-52a7ff4 .e-filter { flex-wrap: wrap !important; row-gap: 8px !important; } .e-filter-item { max-width: 100% !important; } /* Der Menü-Button war ein grauer Standardkasten und folgte der Button-Sprache der Seite nicht. */ .elementor-menu-toggle { border-radius: 10px !important; background: linear-gradient(135deg, #2B5CA8 0%, #2278C0 100%) !important; color: #ffffff !important; border: none !important; /* Keine festen Masse: der Toggle ist rechts im Header verankert, eine erzwungene Breite schiebt ihn ueber den Viewport-Rand hinaus. */ } .elementor-menu-toggle svg, .elementor-menu-toggle i { color: #ffffff !important; fill: #ffffff !important; } /* Home folgt mobil derselben kompakten Stufe wie am Desktop. */ body.page-id-44 .elementor-44 > .e-con.e-parent > .e-con-inner { padding-top: 48px !important; padding-bottom: 48px !important; } } /* ============================================================ 4b — KARTEN-INNENLEBEN (R20b, 2026-09) Runde 1 hat Rahmen, Radius und Hintergrund vereinheitlicht — das Innenleben lief weiter auseinander: 5 Icon-Groessen (40/50/56/64/72), 6 Paddings und 3 Body-Farben. Zwei Faelle waren eindeutig Fehler, weil DASSELBE Bauteil zwei Werte rendert: die DLT-Karten (72px auf Products & Services, 64px auf Technology) und die Regulatory-Zeilen (schwarzer Fliesstext auf der Uebersicht, grauer auf den Archivseiten) — jeweils identische Widget-IDs. Ziel: EIN Kartentyp — Innenabstand 28px, Icon 56x56, Titel 22.5px #1A1A2E, Fliesstext #4B5563. Die Textgroesse bleibt bewusst zweistufig: 18px in den breiten 2-spaltigen Karten (≥560px), 14.4px in den kompakten — 18px waere in einer 285px-Karte gedraengt, 14.4px in einer 590px-Karte duenn. Bewusst ausgenommen: Partner-Logokacheln und Team-Fotos (Bildkacheln, kein Karteninhalt), die Personio-Stellenzeilen (Fremd-Widget) und das Newsletter-Panel (Banner ueber die volle Breite, keine Karte). ============================================================ */ /* --- Innenabstand: 28px für alle Inhaltskarten --- */ .elementor-element-1d5a136, .elementor-element-a8a83e4, .elementor-element-c2247be, .elementor-element-d36579b, .elementor-element-52b6eb6, .elementor-element-f8d545c, .elementor-element-910df00, .elementor-element-4bce27d, .elementor-element-2643f8b, .elementor-element-c7a1b48, .elementor-element-a78e7fc, .elementor-element-3854215, .elementor-element-58a2161, .elementor-element-f78462e, .elementor-element-b8ac78f, .elementor-element-a3bf514, .elementor-element-a397128, .elementor-element-b9ee4ff, .elementor-element-f2ff4b5, .elementor-element-b1fb232, .elementor-element-302b24d, .elementor-element-60c9b5e, .elementor-element-fc3f338, .elementor-element-74c66ad, .elementor-element-699e8b6, .elementor-element-32505fea { padding: 28px !important; } body .tox-why .tox-why__card { padding: 28px !important; } /* --- Icons: einheitlich 56x56 (war 40 / 50 / 64 / 72) --- Nur die Karten-Leitikons; die kleinen Inline-Icons in Listen und Zeilen (15px Dokumentsymbol, 20px Listenhaken) behalten ihre Groesse. */ body .tox-why .tox-why__ic { width: 56px !important; height: 56px !important; } .elementor-element-3854215 .elementor-widget-image img, .elementor-element-58a2161 .elementor-widget-image img, .elementor-element-f78462e .elementor-widget-image img, .elementor-element-b8ac78f .elementor-widget-image img { width: 56px !important; height: 56px !important; object-fit: contain !important; } .elementor-element-910df00 .elementor-icon, .elementor-element-4bce27d .elementor-icon, .elementor-element-2643f8b .elementor-icon, .elementor-element-c7a1b48 .elementor-icon, .elementor-element-a78e7fc .elementor-icon, .elementor-element-910df00 .elementor-icon svg, .elementor-element-4bce27d .elementor-icon svg, .elementor-element-2643f8b .elementor-icon svg, .elementor-element-c7a1b48 .elementor-icon svg, .elementor-element-a78e7fc .elementor-icon svg { width: 56px !important; height: 56px !important; } /* --- Kartentitel: eine Groesse, eine Farbe --- Die DLT-Karten standen als einzige Kartentitel auf 28.13px; das "A New Era"- Set als einziges in Blau. Mehrheit und damit Standard ist 22.5px / #1A1A2E. (Zurueck auf Blau: die naechsten drei Zeilen loeschen.) */ .elementor-element-3854215 .elementor-heading-title, .elementor-element-58a2161 .elementor-heading-title, .elementor-element-f78462e .elementor-heading-title, .elementor-element-b8ac78f .elementor-heading-title { font-size: 1.25rem !important; /* 22.5px */ line-height: 1.25 !important; } /* KORREKTUR: `color` ist hier irrefuehrend — praktisch alle Ueberschriften der Seite sind Verlaufstext (background-clip:text, Fill transparent), gemessen als linear-gradient(135deg, #2D5A8E → #0A0A0A). Die Secondary-Markets-Titel rendern damit sichtbar blau, obwohl `color` #1A1A2E meldet. Die einzigen solid gesetzten Kartentitel waren "A New Era" und "Why it matters" — die bekommen denselben Verlauf, dann sind beide Sektionen identisch. */ body .tox-why .tox-why__card h4, body.page-id-46 .elementor-element-a1b2c43 h4, body.page-id-46 .elementor-element-a1b2c44 h4 { background-image: linear-gradient(135deg, #2D5A8E 0%, #0A0A0A 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: #1A1A2E !important; /* Fallback ohne background-clip-Support */ display: inline-block; } /* --- Fliesstext in Karten: durchgaengig #4B5563 --- Our Story, Services und die Regulatory-Uebersicht rendern ihn schwarz, das "A New Era"-Set in einem vierten Grau (#5F6878). */ body .tox-why .tox-why__card p { font-size: 14.4px !important; color: #4B5563 !important; } .elementor-element-910df00 .elementor-widget-text-editor, .elementor-element-4bce27d .elementor-widget-text-editor, .elementor-element-2643f8b .elementor-widget-text-editor, .elementor-element-c7a1b48 .elementor-widget-text-editor, .elementor-element-a78e7fc .elementor-widget-text-editor, .elementor-element-74c66ad .elementor-widget-text-editor, .elementor-element-699e8b6 .elementor-widget-text-editor, .elementor-element-60c9b5e .elementor-widget-text-editor, .elementor-element-fc3f338 .elementor-widget-text-editor, .elementor-element-910df00 .elementor-widget-text-editor p, .elementor-element-4bce27d .elementor-widget-text-editor p, .elementor-element-2643f8b .elementor-widget-text-editor p, .elementor-element-c7a1b48 .elementor-widget-text-editor p, .elementor-element-a78e7fc .elementor-widget-text-editor p, .elementor-element-74c66ad .elementor-widget-text-editor p, .elementor-element-699e8b6 .elementor-widget-text-editor p, .elementor-element-60c9b5e .elementor-widget-text-editor p, .elementor-element-fc3f338 .elementor-widget-text-editor p { color: #4B5563 !important; } /* Nachtrag: In den Our-Story- und Regulatory-Karten ist der beschreibende Text kein Text-Editor, sondern ein Heading-Widget, das als

rendert — der Selektor oben lief deshalb ins Leere. Nur die Absatz-Variante einfaerben, echte Ueberschriften (h1–h6) bleiben unberuehrt. */ .elementor-element-910df00 p.elementor-heading-title, .elementor-element-4bce27d p.elementor-heading-title, .elementor-element-2643f8b p.elementor-heading-title, .elementor-element-c7a1b48 p.elementor-heading-title, .elementor-element-a78e7fc p.elementor-heading-title, .elementor-element-60c9b5e p.elementor-heading-title, .elementor-element-fc3f338 p.elementor-heading-title, .elementor-element-60c9b5e .elementor-heading-title p, .elementor-element-fc3f338 .elementor-heading-title p { color: #4B5563 !important; } /* Ein Logo im Secondary-Markets-Set ist 55px breit und blieb per object-fit einen Pixel unter den anderen — Box fest setzen. */ .elementor-element-d36579b .elementor-widget-image img { width: 56px !important; height: 56px !important; object-fit: contain !important; }