/** * EMEU Icons — Worker-Klassen-Familie plus Theme-Ersaetze (Jelly-Masken) * v1.4.0 — 2026-08-10 (NEU: Scroll-nach-oben-Zeichen-Tausch am Theme- * Element, Lumina-GO auf SSLB-Empfehlung — vierte Anwendung der Masken- * Bauart; v1.3.0: haus-weiter Close-Ersatz an allen Popup-Dialogen, * Lumina-GO; v1.2.1: Lumina-Justage Read-More fest 14px, bottom 5px, * right -6px, Hover-Rutsch mitgehoben; v1.2.0: haus-weiter Weiterlesen- * Pfeil-Ersatz an den Posts-Widgets; v1.1.1: feste 14px/8px fuer alle * Buttons; Bauart Typo-Welt) * * ZWECK: Ein Autor setzt EINE Klasse am Elementor-Button (Advanced / * CSS-Klassen) und bekommt das Haus-Icon — statt pro Widget ein * Custom-SVG hochzuladen. Namens-Schicht: praefixlos icon-{jelly-name} * (Konventionsmodell Form 3, SSLB 2026-08-09). * * ICON-HERKUNFT: Font Awesome Pro 7.3.0, Variante jelly-regular * (Haus-Standard, Lumina-Setzung 2026-08-09). Quelle je Icon: * X:\Webkonzepte\Fontawesome\fontawesome-pro-plus-7.3.0-web\svgs\jelly-regular\ * Pfad byte-gleich uebernommen, fill entfernt (Maske nutzt nur Alpha). * * BAUART (Lehre der Iterationen 1 bis 3, Lumina-Befund 2026-08-09): * Das Icon lebt als INLINE-GLYPHE im Text-Span — nicht als Flex- * Geschwister im Wrapper. Ein fixes px-Icon in der Box-Welt brach bei * jeder Font-Aenderung aufs Neue (stretch, Box-Mitte vs. Versal-Mitte, * Trim-Stuetzwerk). In der Typo-Welt haengt ALLES an denselben * Font-Metriken und skaliert gemeinsam — die Bauart der Icon-Fonts, * die deshalb nie huepfen: * - Groesse in em: skaliert mit jeder Button-Schriftgroesse mit * - Sitz per cap-Formel: vertical-align calc((1cap - Icongroesse) / 2) * setzt den Ueberstand SYMMETRISCH um die Versal-Hoehe — per * Konstruktion, bei jeder Schrift, jeder Groesse, jedem Icon-Faktor. * cap und em sind Font-Metriken, keine harten Zahlen; die einzige * Setzung ist die Design-Proportion Icon-zu-Schrift (Variable) * - EIN Browser-Pfad: cap-Einheit ist ueberall gruen (Chromium, * Safari, Firefox) — keine supports-Staffel, kein Fallback-Delta * - Der Button-Innenaufbau (Wrapper, Flex, gap) bleibt UNBERUEHRT — * minimale Nachbar-Flaeche (W-029) * * VARIABLEN (Defaults = Lumina-Setzung 2026-08-09 nach Server-Sichtung, * v1.1.1): Die 14px sind eine FESTE Design-Groesse fuer ALLE Buttons, * unabhaengig von deren Schriftgroesse — keine Proportion zur Schrift. * Der SITZ bleibt trotzdem bei jeder Schriftgroesse symmetrisch, weil * die cap-Formel unten mit der Font-Metrik rechnet: * --emeu-icon-size 14px (fest, alle Buttons) * --emeu-icon-gap 8px (fest, alle Buttons) * * NEUES ICON ERGAENZEN (drei Stellen, je eine Zeile): * 1. Data-URI als :root-Variable (aus jelly-regular, eine Quelle) * 2. Klassen-Zeile mit --emeu-icon-Mapping * 3. Selektor in der Basis-Regel-Liste */ /* --------------------------------------------------------------- * BASIS-MECHANIK — Selektor-Liste waechst pro Icon um eine Zeile * --------------------------------------------------------------- */ .icon-arrow-right .elementor-button-text::after { content: ""; display: inline-block; width: var(--emeu-icon-size, 14px); aspect-ratio: 1; margin-inline-start: var(--emeu-icon-gap, 8px); vertical-align: calc((1cap - var(--emeu-icon-size, 14px)) / 2); background-color: currentColor; -webkit-mask-image: var(--emeu-icon); -webkit-mask-position: center; -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; mask-image: var(--emeu-icon); mask-position: center; mask-size: contain; mask-repeat: no-repeat; } /* --------------------------------------------------------------- * ICONS — eine Zeile pro Icon (Jelly-Name = Klassen-Name = Suchbegriff) * --------------------------------------------------------------- */ /* Font Awesome Pro 7.3.0 jelly-regular/arrow-right.svg — der Data-URI * lebt EINMAL hier in :root; Klassen-Worker und Theme-Ersatz unten * referenzieren ihn (eine Quelle pro Icon). */ :root { --emeu-icon-arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 560 560'%3E%3Cpath d='M336.7 532c15 0 30-5.2 41.8-15.7 30.3-26.8 125-114.5 175.1-210.1 4.4-8.3 6.4-17.4 6.4-26.2s-2-17.9-6.4-26.2c-50.1-95.6-144.8-183.3-175.1-210.1-11.8-10.5-26.8-15.7-41.8-15.7-29.6 0-56.5 20.4-61.9 51.3-4.1 23.4-9.7 60.6-13 108.1l-186-15.5C35 168.5 0 200.7 0 241.6l0 76.7c0 41 35 73.2 75.8 69.8l186-15.5c3.3 47.5 8.9 84.7 13 108.1 5.4 30.9 32.4 51.3 61.9 51.3zm4.7-57.6c-3.5 3.1-10.6 1.7-11.5-3.3-3.8-21.7-8.8-56.2-11.9-101.7-2.1-31-29.1-55.2-60.9-52.6l-186 15.5C63 333 56 326.5 56 318.4l0-76.7c0-8.2 7-14.6 15.2-14l186 15.5c31.8 2.7 58.7-21.6 60.9-52.6 3.1-45.4 8.1-80 11.9-101.7 .9-5 8-6.4 11.5-3.3 30.1 26.6 117.7 108.7 162.6 194.4-44.9 85.6-132.5 167.8-162.6 194.4z'/%3E%3C/svg%3E"); } .icon-arrow-right { --emeu-icon: var(--emeu-icon-arrow-right); } /* Font Awesome Pro 7.3.0 jelly-regular/close.svg — Lumina-Wort "Close"; * close, times und xmark sind in der Bibliothek byte-identische Aliasse * (ein Hash, gemessen 2026-08-10). ERSTE NICHT-QUADRATISCHE der Familie * (viewBox 504x560) — mask-size contain passt sie unverzerrt in die * quadratische Box ein, dafuer traegt die Bauart das Netz seit v1. */ :root { --emeu-icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 504 560'%3E%3Cpath d='M252.4 122.3c21.1-20.5 39.4-37.5 55.5-51.1 20.7-17.5 39.5-30.9 57.7-38.4 19.3-8 38.5-9.7 57.9-3 17.8 6.2 32.9 18.7 46.7 32.4s26.2 28.8 32.4 46.7c6.7 19.3 5 38.6-3 57.8-7.6 18.2-20.9 37-38.4 57.7-13.6 16.1-30.7 34.4-51.1 55.5 20.5 21.1 37.5 39.4 51.1 55.6 17.5 20.7 30.9 39.5 38.4 57.7 8 19.3 9.7 38.5 3 57.8-6.2 17.8-18.7 32.9-32.4 46.7s-28.8 26.2-46.7 32.4c-19.3 6.7-38.6 5-57.9-3-18.2-7.6-37-20.9-57.7-38.4-16.1-13.6-34.4-30.7-55.5-51.1-21.1 20.5-39.4 37.5-55.6 51.1-20.7 17.5-39.5 30.9-57.7 38.4-19.3 8-38.5 9.7-57.8 3-17.8-6.2-32.9-18.7-46.7-32.4S8.4 468.9 2.2 451.1c-6.7-19.3-5-38.6 3-57.8 7.6-18.2 20.9-37 38.4-57.7 13.6-16.1 30.7-34.4 51.1-55.6-20.5-21.1-37.5-39.4-51.1-55.5-17.5-20.7-30.9-39.5-38.4-57.7-8-19.3-9.7-38.5-3-57.8 6.2-17.8 18.7-32.9 32.4-46.7S63.5 36 81.3 29.8c19.3-6.7 38.6-5 57.8 3 18.2 7.6 37 20.9 57.7 38.4 16.1 13.6 34.4 30.7 55.6 51.1zM99.7 82.7c-5.6 2-13.4 7.1-25.5 19.2S57 121.7 55.1 127.3c-1.4 4.1-1.9 9 1.8 17.9 4.2 10.1 13.1 23.6 29.5 43.1 16.2 19.2 38.3 42.5 67.5 72 10.7 10.9 10.7 28.4 0 39.3-29.1 29.6-51.2 52.8-67.5 72-16.4 19.5-25.3 33-29.5 43.1-3.7 8.9-3.2 13.8-1.8 17.9 2 5.6 7.1 13.4 19.2 25.5s19.9 17.2 25.5 19.2c4.1 1.4 9 1.9 17.9-1.8 10.1-4.2 23.6-13.1 43.1-29.5 19.2-16.2 42.5-38.3 72-67.5 10.9-10.7 28.4-10.7 39.3 0 29.6 29.1 52.8 51.2 72 67.5 19.5 16.4 33 25.3 43.1 29.5 8.9 3.7 13.8 3.2 17.9 1.8 5.6-2 13.4-7.1 25.5-19.2s17.2-19.9 19.2-25.5c1.4-4.1 1.9-9-1.8-17.9-4.2-10.1-13.1-23.6-29.5-43.1-16.2-19.2-38.3-42.5-67.5-72-10.7-10.9-10.7-28.4 0-39.3 29.1-29.6 51.2-52.8 67.5-72 16.4-19.5 25.3-33 29.5-43.1 3.7-8.9 3.2-13.8 1.8-17.9-2-5.6-7.1-13.4-19.2-25.5s-19.9-17.2-25.5-19.2c-4.1-1.4-9-1.9-17.9 1.8-10.1 4.2-23.6 13.1-43.1 29.5-19.2 16.2-42.5 38.3-72 67.5-10.9 10.7-28.4 10.7-39.3 0-29.6-29.1-52.8-51.2-72-67.5-19.5-16.4-33-25.3-43.1-29.5-8.9-3.7-13.8-3.2-17.9-1.8z'/%3E%3C/svg%3E"); } /* --------------------------------------------------------------- * THEME-ERSATZ — Close-Button aller Popup-Dialoge (haus-weit) * Lumina-GO 2026-08-10: Elementors Close rendert sein X als eicons- * SCHRIFT-Zeichen; die Theme-Regel tauscht per important nur die * SCHRIFT (theme-icons), laesst das Zeichen aber stehen — an dessen * Code-Platz liegt in der Theme-Schrift ein Play-Glyph (der Bug). * Der Masken-Ersatz beendet den Font-Streit STRUKTURELL: Mit leerem * content rendert keine Schrift mehr irgendein Zeichen — das * important der Theme-Regel betrifft nur die Schriftart und laeuft * harmlos ins Leere (Levis Latte). * GROESSE 1em (konvergente Empfehlung, Lumina-GO): Der Close erbt * weiter vom Dialog — der Elementor-Groessen-Regler je Popup bleibt * wirksam; als Variable jederzeit auf ein Fest-Mass stellbar. * GEOMETRIE-ERHALT: inline-block auf der Baseline wie das Font- * Zeichen zuvor — bewusst KEIN Frame hier, nur Zeichen-Tausch * (Read-More-Prinzip: Ist-Layout unangetastet). * SPEZIFITAET: 0,2,1 schlaegt die eicons-content-Regel (0,1,1) * deterministisch, lade-reihenfolge-unabhaengig. * FARB-ERBE: currentColor — die Popup-Farb-Regeln (auch je-Instanz- * Akzente) und alle Hover-Zustaende wirken automatisch weiter. * --------------------------------------------------------------- */ .dialog-widget .dialog-close-button i { display: inline-block; width: var(--emeu-close-icon-size, 1em); aspect-ratio: 1; background-color: currentColor; -webkit-mask-image: var(--emeu-icon-close); -webkit-mask-position: center; -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; mask-image: var(--emeu-icon-close); mask-position: center; mask-size: contain; mask-repeat: no-repeat; } /* Font-Zeichen an der Wurzel neutralisieren — kein Glyph, keine Schrift */ .dialog-widget .dialog-close-button i::before { content: ""; } /* --------------------------------------------------------------- * THEME-ERSATZ — Weiterlesen-Pfeil der Posts-Widgets (haus-weit) * Lumina-Setzung 2026-08-09: Der von lafeminite erzwungene Font-Pfeil * (theme-icons e901, im Theme selbst arrow-right benannt) wird an * BEIDEN Widgets (posts plus archive-posts) durch den Jelly-Pfeil * ersetzt — ohne Klasse, die Autoren tun nichts. Die Theme-Bauart * bleibt KOMPLETT erhalten: position absolute unten rechts, Groesse * 1.8em (waechst mit der Karten-Schrift), Hover-Rutsch (die Theme- * Hover-Regel aendert nur right und bleibt unberuehrt). Wir * deklarieren NUR den Zeichen-Ersatz plus Masken-Mechanik — alle * uebrigen Eigenschaften erbt dasselbe Pseudo-Element aus der * Theme-Regel (Kaskaden-Mix am selben Element). * SPEZIFITAETS-GRIFF (gemessen 2026-08-09): emeu-icons laedt VOR dem * Theme-CSS (vamtam-front-all) — bei Gleichstand 0,3,1 gewaenne die * SPAETERE Theme-Regel und das Font-Zeichen bliebe. Die gedoppelte * read-more-Klasse hebt auf 0,4,1: deterministisch, lade-reihenfolge- * unabhaengig, theme-update-fest (W-029-Doppel-Blick). * GROESSE: width 1em — im after-Kontext ist 1em die vom Theme * geerbte font-size 1.8em, exakt die Groesse des bisherigen * Font-Zeichens; als Variable justierbar. * --------------------------------------------------------------- */ .elementor-widget-posts.vamtam-has-theme-widget-styles .elementor-post__read-more.elementor-post__read-more::after, .elementor-widget-archive-posts.vamtam-has-theme-widget-styles .elementor-post__read-more.elementor-post__read-more::after { content: ""; /* LUMINA-JUSTAGE 2026-08-09 (DevTools an der lebenden Werkbank, * v1.2.1): feste 14px statt mitwachsender Theme-1.8em — die * konsistente Fortschreibung der Button-Setzung (14px ueberall) — * plus Position hoeher (bottom 5px statt -0.5em) und leicht ueber * die Link-Box hinaus (right -6px statt 0). font-size ist der * Rechen-Anker (width 1em = 14px), die Variable traegt den * konkreten Standard-Wert. */ font-size: var(--emeu-readmore-icon-size, 14px); width: 1em; aspect-ratio: 1; bottom: 5px; right: -6px; background-color: currentColor; -webkit-mask-image: var(--emeu-icon-arrow-right); -webkit-mask-position: center; -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; mask-image: var(--emeu-icon-arrow-right); mask-position: center; mask-size: contain; mask-repeat: no-repeat; } /* HOVER MITGEHOBEN (W-029-Doppel-Blick): Die Theme-Hover-Regel setzt * right -0.2em relativ zur ALTEN Geometrie — gegen die neue Ruhe-Lage * (-6px) wuerde der Pfeil beim Hover nach LINKS zucken statt nach * rechts zu rutschen. Eigene Hover-Regel (0,5,1 schlaegt Theme-Hover * 0,4,1 deterministisch): Rutsch 6px weiter nach rechts, * original-aequivalente Bewegungs-Weite, Theme-Transition wirkt weiter. */ .elementor-widget-posts.vamtam-has-theme-widget-styles .elementor-post__read-more.elementor-post__read-more:hover::after, .elementor-widget-archive-posts.vamtam-has-theme-widget-styles .elementor-post__read-more.elementor-post__read-more:hover::after { right: -12px; } /* Font Awesome Pro 7.3.0 jelly-regular/arrow-up.svg — viewBox 504x560 * wie close, Pfad byte-gleich uebernommen, fill entfernt. */ :root { --emeu-icon-arrow-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 504 560'%3E%3Cpath d='M504 223.3c0-15-5.2-30-15.7-41.8-26.8-30.3-114.5-125-210.1-175.1-8.3-4.4-17.4-6.4-26.2-6.4s-17.9 2-26.2 6.4c-95.6 50.1-183.3 144.8-210.1 175.1-10.5 11.8-15.7 26.8-15.7 41.8 0 29.6 20.4 56.5 51.3 61.9 23.4 4.1 60.6 9.7 108.1 13l-15.5 186C140.5 525 172.7 560 213.6 560l76.7 0c41 0 73.2-35 69.8-75.8l-15.5-186c47.5-3.3 84.7-8.9 108.1-13 30.9-5.4 51.3-32.4 51.3-61.9zm-57.6-4.7c3.1 3.5 1.7 10.6-3.3 11.5-21.7 3.8-56.2 8.8-101.7 11.9-31 2.1-55.2 29.1-52.6 60.9l15.5 186c.7 8.2-5.8 15.2-14 15.2l-76.7 0c-8.2 0-14.6-7-14-15.2l15.5-186c2.7-31.8-21.6-58.7-52.6-60.9-45.4-3.1-80-8.1-101.7-11.9-5-.9-6.4-8-3.3-11.5 26.6-30.1 108.7-117.7 194.4-162.6 85.6 44.9 167.8 132.5 194.4 162.6z'/%3E%3C/svg%3E"); } /* --------------------------------------------------------------- * THEME-ERSATZ — Scroll-nach-oben-Pfeil (haus-weit) * Lumina-GO 2026-08-10 auf SSLB-Empfehlung: Der handgezeichnete * Skizzen-Schwung des Demo-Bestands (inline-SVG 13x38 im Theme- * Template side-buttons.php) passt nicht zur Jelly-Formsprache des * Portals — ZEICHEN-TAUSCH nach dem Muster des Abends: Bauart, * Position, Pillen-Optik und Ein-Ausblende-Verhalten des Theme- * Elements bleiben KOMPLETT (vamtam-scroll-to-top, fixed 15/15, * 27x30-Pille, opacity-Steuerung per Theme-JS) — nur das Zeichen * wird der Jelly-Pfeil nach oben. Damit spricht jedes Richtungs- * Zeichen dieselbe Sprache (Button, Weiterlesen, Scroll, Close). * FARBE: currentColor erbt die Element-Farbe (rgb 25,25,25 gemessen) * — unauffaellig nach Lumina-Setzung (CI-Messing markiert Inhalt, * nie Bedien-Mechanik); Theme-Farb- und Hover-Wechsel wirken * automatisch weiter. * GROESSE 14px: der Familien-Standard (Button plus Read-More), * sitzt mittig in der 27x30-Pille (absolute plus inset plus margin * auto — der Container ist fixed und damit Bezugs-Rahmen). * --------------------------------------------------------------- */ .vamtam-scroll-to-top svg { display: none; } .vamtam-scroll-to-top::before { content: ""; position: absolute; inset: 0; margin: auto; width: var(--emeu-scrolltop-icon-size, 14px); aspect-ratio: 504 / 560; background-color: currentColor; -webkit-mask-image: var(--emeu-icon-arrow-up); -webkit-mask-position: center; -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; mask-image: var(--emeu-icon-arrow-up); mask-position: center; mask-size: contain; mask-repeat: no-repeat; }