/* ========================================================================== Bild-CTA | Bild + versetzter Textkasten in EINEM Call-to-Action-Widget -------------------------------------------------------------------------- Ersetzt den Nachbau aus Container + Bild-Widget + CTA-Widget. Die Bausteine des Nachbaus stecken alle im CTA-Widget: Bild-Widget -> .elementor-cta__bg-wrapper (Bild des Widgets) grauer Container -> .elementor-cta__content CTA-Widget (nur Text) -> .elementor-cta__content-item (Titel/Text/Button) VERWENDUNG Call-to-Action-Widget einfuegen, Skin "Classic", Bild/Titel/Text/Button fuellen und unter Erweitert > CSS-Klassen eine der beiden Klassen setzen: cta--bild-links Bild links, Kasten rechts cta--bild-rechts Bild rechts, Kasten links Optional zusaetzlich - beliebig mit beiden Richtungen kombinierbar: cta-image-dark dunkelgruener Kasten, Titel und Text in Weiss cta-image-reverse dreht die Richtung um cta-image-reverse ist fuer GLOBALE Widgets gedacht: deren CSS-Klassen sind an allen Einbauorten identisch, lassen sich also nicht pro Platzierung aendern. Die Klasse kommt deshalb an den Container UM das Widget herum - nur dort, wo es gespiegelt erscheinen soll. Sie wirkt als Schalter: aus links wird rechts und aus rechts wird links, egal was das Widget selbst mitbringt. Wird die Richtung im globalen Widget spaeter geaendert, bleiben die gespiegelten Stellen automatisch spiegelverkehrt dazu. Container -> cta-image-reverse Widget -> cta--bild-links cta-image-dark Ergebnis -> Bild rechts, dunkler Kasten Die Klasse darf auch direkt am Widget stehen. Mehrfach verschachtelte Container heben sich NICHT auf - einmal gespiegelt bleibt gespiegelt. GEOMETRIE (Desktop, Werte 1:1 aus der Agenturvorgabe) Bild ......... 50 % breit, 520 px hoch, liegt VOR dem Kasten Kasten ....... calc(100% - 225px) breit, zur Gegenseite buendig, beginnt 100 px tiefer -> ragt 100 px unter das Bild Textspalte ... 50 % der Kasten-Innenflaeche, zur Bildseite abgewandt Aufbau als 3x3-Grid; Bild und Kasten ueberlappen sich in der mittleren Zelle: Spalten: 225px | Bild - 225px | Rest |<---- Bild --->| (bei bild-links) |<-------- Kasten -------------->| Zeilen: 100px <- hier beginnt der Kasten Bild - 100px <- hier endet das Bild min. 100px <- hier endet der Kasten (waechst mit) Der Bereich reserviert seine echte Hoehe (520 + 100 = 620 px). Falls der Abstand nach unten dadurch zu gross wirkt: unteren Innenabstand des umgebenden Containers um 100 px reduzieren. Ab 1024 px wird gestapelt: Bild oben, Kasten darunter mit negativem Abstand (Ueberlappung). Beide Richtungen sehen dort gleich aus, die Spiegelung ist dann folgerichtig ohne Wirkung. SPEZIFITAET Die Regeln liegen bei 0-3-0 und schlagen damit das Widget-CSS von Elementor Pro (0-2-0). Elementors eigene Steuerelemente erzeugen dagegen 0-4-0 und gewinnen - wer also im Widget z. B. einen Innenabstand eintraegt, uebersteuert damit bewusst diese Datei fuer genau dieses eine Widget. Damit das funktioniert, muessen die entsprechenden Felder im Widget leer bleiben: Innenabstand, Hintergrundfarbe des Inhalts, Ausrichtung, Min-Hoehe Bild sowie Titel- und Beschreibungsfarbe. ========================================================================== */ /* ========================================================================== 1) Stellschrauben - hier und nur hier werden Groessen geaendert ========================================================================== */ .cta--bild-links, .cta--bild-rechts { /* ---- Bild ---- */ --cta-img-w: 50%; /* Breite des Bildes */ --cta-img-h: 520px; /* Hoehe des Bildes */ /* ---- Kasten ---- */ --cta-box-inset: 225px; /* um so viel schmaler als die volle Breite */ --cta-box-top: 100px; /* Versatz nach unten = Ueberstand unten */ --cta-box-padding: 100px; /* Innenabstand des Kastens */ --cta-box-bg: color-mix(in srgb, var(--e-global-color-eceeed) 50%, transparent); /* ---- Textfarben (siehe auch cta-image-dark weiter unten) ---- */ --cta-title-color: var(--e-global-color-secondary); --cta-text-color: var(--e-global-color-text); --cta-accent-color: var(--e-global-color-primary); /* im Titel */ /* ---- Textspalte im Kasten ---- */ --cta-text-w: 50%; /* Breite bezogen auf die Kasten-Innenflaeche */ --cta-text-align: start; --cta-radius: 40px; /* Eckenradius Bild + Kasten */ /* nur im gestapelten Layout ab 1024 px relevant */ --cta-overlap: 0px; /* Ueberlappung Kasten unter das Bild */ --cta-box-minh: 0px; /* Mindesthoehe des Kastens */ } /* Laptop (<= 1200 px) */ @media (max-width: 1200px) { .cta--bild-links, .cta--bild-rechts { --cta-img-w: calc(50% - 30px); --cta-img-h: calc(100vw * 0.4); --cta-box-padding: 60px; --cta-text-w: 60%; } } /* Tablet (<= 1024 px) - ab hier gestapelt */ @media (max-width: 1024px) { .cta--bild-links, .cta--bild-rechts { --cta-img-w: calc(100% - 120px); --cta-box-padding: 150px 60px 60px; --cta-text-w: calc(100% - 80px); --cta-overlap: 100px; /* Kasten schiebt sich unter das Bild */ --cta-box-minh: calc(100vw * 0.4); } } /* Smartphone (<= 767 px) */ @media (max-width: 767px) { .cta--bild-links, .cta--bild-rechts { --cta-img-w: calc(100% - 40px); --cta-img-h: calc(100vw * 0.6); --cta-box-padding: 100px 30px 30px; --cta-text-w: 100%; --cta-text-align: center; --cta-overlap: 60px; --cta-radius: 30px; } } /* -------------------------------------------------------------------------- Dunkle Variante -> zusaetzliche CSS-Klasse cta-image-dark Setzt nur Farben um und laesst die Geometrie unberuehrt - dadurch beliebig mit beiden Richtungen und mit der Spiegelung kombinierbar. Steht bewusst NACH den Breakpoint-Bloecken, greift aber auf allen Breiten, weil dort nur Groessen und keine Farben gesetzt werden. -------------------------------------------------------------------------- */ .cta-image-dark { --cta-box-bg: var(--e-global-color-secondary); --cta-title-color: var(--e-global-color-ffffff); --cta-text-color: var(--e-global-color-ffffff); /* --cta-accent-color bleibt Primaergruen - der im Titel setzt sich damit auch auf dem dunklen Kasten ab. */ } /* ========================================================================== 2) Richtung Die beiden Wertesaetze stehen genau einmal hier. Welcher davon gilt, entscheidet der Zuordnungsblock darunter - und dort haengt sich auch cta-image-reverse ein, indem es die Zuordnung ueber Kreuz vergibt. ========================================================================== */ .cta--bild-links, .cta--bild-rechts { /* Bild links, Kasten rechts */ --cta-cols-links: var(--cta-box-inset) calc(var(--cta-img-w) - var(--cta-box-inset)) 1fr; --cta-bild-links: 1 / 1 / 3 / 3; /* Zeile 1-2 / Spalte 1-2 */ --cta-kasten-links: 2 / 2 / 4 / 4; /* Zeile 2-3 / Spalte 2-3 */ --cta-textspalte-links: flex-end; /* Text am rechten Kastenrand */ /* Bild rechts, Kasten links */ --cta-cols-rechts: 1fr calc(var(--cta-img-w) - var(--cta-box-inset)) var(--cta-box-inset); --cta-bild-rechts: 1 / 2 / 3 / 4; /* Zeile 1-2 / Spalte 2-3 */ --cta-kasten-rechts: 2 / 1 / 4 / 3; /* Zeile 2-3 / Spalte 1-2 */ --cta-textspalte-rechts: flex-start; /* Text am linken Kastenrand */ } /* ---------- es gilt: Bild links ---------- also bei cta--bild-links ohne Spiegelung oder bei cta--bild-rechts MIT Spiegelung */ .cta--bild-links, .cta-image-reverse .cta--bild-rechts, .cta-image-reverse.cta--bild-rechts { --cta-cols: var(--cta-cols-links); --cta-bild: var(--cta-bild-links); --cta-kasten: var(--cta-kasten-links); --cta-textspalte: var(--cta-textspalte-links); } /* ---------- es gilt: Bild rechts ---------- */ .cta--bild-rechts, .cta-image-reverse .cta--bild-links, .cta-image-reverse.cta--bild-links { --cta-cols: var(--cta-cols-rechts); --cta-bild: var(--cta-bild-rechts); --cta-kasten: var(--cta-kasten-rechts); --cta-textspalte: var(--cta-textspalte-rechts); } /* ========================================================================== 3) Grundgeruest - fuer beide Richtungen gleich ========================================================================== */ .elementor-element:is(.cta--bild-links, .cta--bild-rechts) .elementor-cta { display: grid; grid-template-columns: var(--cta-cols); grid-template-rows: var(--cta-box-top) calc(var(--cta-img-h) - var(--cta-box-top)) minmax(var(--cta-box-top), auto); align-items: stretch; } /* ---------- Bild ---------- */ .elementor-element:is(.cta--bild-links, .cta--bild-rechts) .elementor-cta__bg-wrapper { grid-area: var(--cta-bild); width: auto; min-height: 0; /* 200px-Vorgabe des Widgets abschalten */ border-radius: var(--cta-radius); z-index: 2; /* Bild liegt vor dem Kasten */ } /* ---------- Kasten ---------- */ .elementor-element:is(.cta--bild-links, .cta--bild-rechts) .elementor-cta__content { grid-area: var(--cta-kasten); width: auto; padding: var(--cta-box-padding); border-radius: var(--cta-radius); background-color: var(--cta-box-bg); text-align: var(--cta-text-align); z-index: 1; /* Textspalte: untereinander, oben buendig - wie in der Vorlage. Fuer optisch mittigen Text im Kasten justify-content auf center. */ flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: var(--cta-textspalte); } .elementor-element:is(.cta--bild-links, .cta--bild-rechts) .elementor-cta__content > .elementor-cta__content-item { width: var(--cta-text-w); max-width: 100%; } /* ========================================================================== 4) Ab Tablet: Bild oben, Kasten darunter mit Ueberlappung (gilt fuer beide Richtungen und steht bewusst NACH dem Grundgeruest) ========================================================================== */ @media (max-width: 1024px) { .elementor-element:is(.cta--bild-links, .cta--bild-rechts) .elementor-cta { display: flex; flex-direction: column; align-items: center; } .elementor-element:is(.cta--bild-links, .cta--bild-rechts) .elementor-cta__bg-wrapper { width: var(--cta-img-w); min-height: var(--cta-img-h); } .elementor-element:is(.cta--bild-links, .cta--bild-rechts) .elementor-cta__content { width: 100%; min-height: var(--cta-box-minh); margin-top: calc(-1 * var(--cta-overlap)); align-items: center; } } /* ========================================================================== 5) Textfarben und Auszeichnungen im Titel -> Akzentfarbe, im Text -> halbfett ========================================================================== */ .elementor-element:is(.cta--bild-links, .cta--bild-rechts) .elementor-cta__title { color: var(--cta-title-color); } .elementor-element:is(.cta--bild-links, .cta--bild-rechts) .elementor-cta__description { color: var(--cta-text-color); } .elementor-element:is(.cta--bild-links, .cta--bild-rechts) .elementor-cta__title span { color: var(--cta-accent-color); } .elementor-element:is(.cta--bild-links, .cta--bild-rechts) .elementor-cta__description strong { font-weight: 500; }