/** * Codewerk — Modul-Optimierung "Icon-Kacheln" * * Redmine #17839 („Textgröße und Designelemente"), Vorgabe von PAZE: * Figma-Datei „Codewerk – Website", Frame `cdwrk_Moduloptimierung_4k` * (Node 924:1343, Kachel-Reihe 924:1813). * * Soll-Zustand laut Figma (Design-Breite 1920 px, Inhaltsspalte 1600 px): * – eine Reihe mit vier gleich hohen Kacheln statt 2 × 2 * – Icon-Pin zeigt nach unten und steht mittig ÜBER dem Text * – Text zentriert, Barlow Bold 26/32, letter-spacing −0.78, Farbe #032B4D * – Kachel: Radius 16, Innenabstand 64, Schatten 0 12 37.5 rgba(0,0,0,.16) * – Abstand Icon → Text 31, Spaltenabstand 16 * * Die Inhaltsspalte dieser Seiten ist 1190 px breit, nicht 1600 px. Alle * Maße sind deshalb mit dem Faktor 1190/1600 = 0,744 maßstäblich * umgerechnet — die Proportionen des Entwurfs bleiben damit erhalten. * * Die Drehung des Pins steckt nicht hier, sondern in den vier SVG-Dateien * unter wp-content/uploads/2025/02/ (Icon_Einsparung, Icon_Ersatzteil, * Icon_Reduktion, Icon_Flexibilitaet). Sie werden ausschließlich von den * unten genannten acht Seiten verwendet. * * Betroffene Seiten (deutsche Fassung und englische WPML-Übersetzung teilen * sich jeweils dieselben Elementor-Element-IDs): * e6b1335 — SOFTSIBAS PN Stack (16632 / 17551) * 7173967 — SOFTSIBAS TRDP Stack (16636 / 17558) * b97a463 — SOFTSIBAS PN Validierungstest (16634 / 17562) * df1cdd0 — TRDP Validierungstest (16638 / 17567) * * Die Selektoren sind bewusst über die Element-IDs geführt: so bleibt der * Eingriff auf genau diesen einen Abschnitt je Seite beschränkt und die * Elementor-Daten in der Datenbank müssen nicht angefasst werden. Das * vorangestellte `body.cw-modul-optimiert` hebt die Spezifität über die * von Elementor erzeugte Regel `.elementor- .elementor-element.elementor-element-`. */ /* ------------------------------------------------------------------------- * 1. Abschnitt: eine Reihe mit vier Kacheln * ---------------------------------------------------------------------- */ body.cw-modul-optimiert .elementor-element-e6b1335 > .e-con-inner, body.cw-modul-optimiert .elementor-element-7173967 > .e-con-inner, body.cw-modul-optimiert .elementor-element-b97a463 > .e-con-inner, body.cw-modul-optimiert .elementor-element-df1cdd0 > .e-con-inner { display: grid; /* Vier gleich breite Spalten wie im Entwurf. Bewusst feste Stufen (4 → 2 → 1) statt `auto-fit`: bei drei Spalten bliebe die vierte Kachel allein in der zweiten Zeile stehen. */ grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; gap: 12px; } /* Die beiden Zeilen-Container aus dem Elementor-Aufbau lösen sich auf, damit ihre Kacheln direkt zu Rasterfeldern der Reihe werden. */ body.cw-modul-optimiert .elementor-element-2fecf4a, body.cw-modul-optimiert .elementor-element-a436f09, body.cw-modul-optimiert .elementor-element-3aed7ba, body.cw-modul-optimiert .elementor-element-066c997, body.cw-modul-optimiert .elementor-element-6d196fe, body.cw-modul-optimiert .elementor-element-5699f17, body.cw-modul-optimiert .elementor-element-d438e28, body.cw-modul-optimiert .elementor-element-1c08d21 { display: contents; } /* Der Überschriften-Container darüber bleibt ein normales Rasterfeld über die volle Breite. */ body.cw-modul-optimiert .elementor-element-9d93a9f, body.cw-modul-optimiert .elementor-element-f26a307, body.cw-modul-optimiert .elementor-element-0744e91, body.cw-modul-optimiert .elementor-element-42b42dd { grid-column: 1 / -1; margin-bottom: 18px; } /* ------------------------------------------------------------------------- * 2. Kachel: Icon oben, Text darunter, beides zentriert * ---------------------------------------------------------------------- */ body.cw-modul-optimiert .elementor-element-e6b1335 .e-con-inner > .e-con > .e-con, body.cw-modul-optimiert .elementor-element-7173967 .e-con-inner > .e-con > .e-con, body.cw-modul-optimiert .elementor-element-b97a463 .e-con-inner > .e-con > .e-con, body.cw-modul-optimiert .elementor-element-df1cdd0 .e-con-inner > .e-con > .e-con { flex-direction: column; align-items: center; justify-content: flex-start; gap: 23px; padding: 40px 28px; border-radius: 12px; box-shadow: 0 9px 28px rgba(0, 0, 0, 0.16); } /* Icon- und Text-Spalte der alten Aufteilung (40 % / 60 %) auf volle Kachelbreite bringen. */ body.cw-modul-optimiert .elementor-element-e6b1335 .e-con-inner > .e-con > .e-con > .e-con, body.cw-modul-optimiert .elementor-element-7173967 .e-con-inner > .e-con > .e-con > .e-con, body.cw-modul-optimiert .elementor-element-b97a463 .e-con-inner > .e-con > .e-con > .e-con, body.cw-modul-optimiert .elementor-element-df1cdd0 .e-con-inner > .e-con > .e-con > .e-con { width: 100%; padding: 0; align-items: center; justify-content: center; } /* ------------------------------------------------------------------------- * 3. Icon * ---------------------------------------------------------------------- */ /* Elementor setzt die Icon-Größe an zwei Stellen — als Schriftgröße am Wrapper und zusätzlich als feste Höhe am SVG. Beide müssen gesetzt werden, sonst bleibt die alte Höhe stehen. */ body.cw-modul-optimiert .elementor-element-e6b1335 .elementor-widget-icon .elementor-icon, body.cw-modul-optimiert .elementor-element-7173967 .elementor-widget-icon .elementor-icon, body.cw-modul-optimiert .elementor-element-b97a463 .elementor-widget-icon .elementor-icon, body.cw-modul-optimiert .elementor-element-df1cdd0 .elementor-widget-icon .elementor-icon { font-size: 149px; } body.cw-modul-optimiert .elementor-element-e6b1335 .elementor-widget-icon .elementor-icon svg, body.cw-modul-optimiert .elementor-element-7173967 .elementor-widget-icon .elementor-icon svg, body.cw-modul-optimiert .elementor-element-b97a463 .elementor-widget-icon .elementor-icon svg, body.cw-modul-optimiert .elementor-element-df1cdd0 .elementor-widget-icon .elementor-icon svg { height: 149px; width: auto; } body.cw-modul-optimiert .elementor-element-e6b1335 .elementor-widget-icon .elementor-icon-wrapper, body.cw-modul-optimiert .elementor-element-7173967 .elementor-widget-icon .elementor-icon-wrapper, body.cw-modul-optimiert .elementor-element-b97a463 .elementor-widget-icon .elementor-icon-wrapper, body.cw-modul-optimiert .elementor-element-df1cdd0 .elementor-widget-icon .elementor-icon-wrapper { text-align: center; } /* ------------------------------------------------------------------------- * 4. Kacheltext * ---------------------------------------------------------------------- */ body.cw-modul-optimiert .elementor-element-e6b1335 .e-con-inner > .e-con > .e-con .elementor-heading-title, body.cw-modul-optimiert .elementor-element-7173967 .e-con-inner > .e-con > .e-con .elementor-heading-title, body.cw-modul-optimiert .elementor-element-b97a463 .e-con-inner > .e-con > .e-con .elementor-heading-title, body.cw-modul-optimiert .elementor-element-df1cdd0 .e-con-inner > .e-con > .e-con .elementor-heading-title { font-size: 19px; line-height: 24px; letter-spacing: -0.57px; color: #032b4d; text-align: center; /* Nur als letzte Rückfallebene, falls ein Wort breiter als die Kachel ist. Bewusst KEIN `hyphens: auto` — die automatische Trennung zerlegt Komposita an unschönen Stellen („BEGUTACHTUNG DER EINGE-SETZTEN"). */ overflow-wrap: break-word; } /* ------------------------------------------------------------------------- * 5. Kleinere Ansichten * ---------------------------------------------------------------------- */ @media (max-width: 1024px) { body.cw-modul-optimiert .elementor-element-e6b1335 > .e-con-inner, body.cw-modul-optimiert .elementor-element-7173967 > .e-con-inner, body.cw-modul-optimiert .elementor-element-b97a463 > .e-con-inner, body.cw-modul-optimiert .elementor-element-df1cdd0 > .e-con-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } body.cw-modul-optimiert .elementor-element-e6b1335 .elementor-widget-icon .elementor-icon, body.cw-modul-optimiert .elementor-element-7173967 .elementor-widget-icon .elementor-icon, body.cw-modul-optimiert .elementor-element-b97a463 .elementor-widget-icon .elementor-icon, body.cw-modul-optimiert .elementor-element-df1cdd0 .elementor-widget-icon .elementor-icon { font-size: 140px; } body.cw-modul-optimiert .elementor-element-e6b1335 .elementor-widget-icon .elementor-icon svg, body.cw-modul-optimiert .elementor-element-7173967 .elementor-widget-icon .elementor-icon svg, body.cw-modul-optimiert .elementor-element-b97a463 .elementor-widget-icon .elementor-icon svg, body.cw-modul-optimiert .elementor-element-df1cdd0 .elementor-widget-icon .elementor-icon svg { height: 140px; } } @media (max-width: 640px) { body.cw-modul-optimiert .elementor-element-e6b1335 > .e-con-inner, body.cw-modul-optimiert .elementor-element-7173967 > .e-con-inner, body.cw-modul-optimiert .elementor-element-b97a463 > .e-con-inner, body.cw-modul-optimiert .elementor-element-df1cdd0 > .e-con-inner { grid-template-columns: minmax(0, 1fr); } body.cw-modul-optimiert .elementor-element-e6b1335 .e-con-inner > .e-con > .e-con, body.cw-modul-optimiert .elementor-element-7173967 .e-con-inner > .e-con > .e-con, body.cw-modul-optimiert .elementor-element-b97a463 .e-con-inner > .e-con > .e-con, body.cw-modul-optimiert .elementor-element-df1cdd0 .e-con-inner > .e-con > .e-con { padding: 32px 24px; gap: 20px; } body.cw-modul-optimiert .elementor-element-e6b1335 .elementor-widget-icon .elementor-icon, body.cw-modul-optimiert .elementor-element-7173967 .elementor-widget-icon .elementor-icon, body.cw-modul-optimiert .elementor-element-b97a463 .elementor-widget-icon .elementor-icon, body.cw-modul-optimiert .elementor-element-df1cdd0 .elementor-widget-icon .elementor-icon { font-size: 130px; } body.cw-modul-optimiert .elementor-element-e6b1335 .elementor-widget-icon .elementor-icon svg, body.cw-modul-optimiert .elementor-element-7173967 .elementor-widget-icon .elementor-icon svg, body.cw-modul-optimiert .elementor-element-b97a463 .elementor-widget-icon .elementor-icon svg, body.cw-modul-optimiert .elementor-element-df1cdd0 .elementor-widget-icon .elementor-icon svg { height: 130px; } body.cw-modul-optimiert .elementor-element-e6b1335 .e-con-inner > .e-con > .e-con .elementor-heading-title, body.cw-modul-optimiert .elementor-element-7173967 .e-con-inner > .e-con > .e-con .elementor-heading-title, body.cw-modul-optimiert .elementor-element-b97a463 .e-con-inner > .e-con > .e-con .elementor-heading-title, body.cw-modul-optimiert .elementor-element-df1cdd0 .e-con-inner > .e-con > .e-con .elementor-heading-title { font-size: 20px; line-height: 26px; } }