/* ========================================================================== Info-CTA | Kachel mit Icon, Preisblock und Aussparung unten rechts -------------------------------------------------------------------------- Zwei Varianten desselben Bausteins, gesteuert ueber eine einzige CSS-Klasse am Call-to-Action-Widget (Widget > Erweitert > CSS-Klassen): cta--info-dark dunkelgruene Kachel, Titel und Text in Weiss cta--info-light weisse Kachel, Titel und Text in Dunkelgruen Der "+"-Button ist reine Optik und wird von dieser Datei gezeichnet. Das Buttonfeld im Widget bleibt leer; verlinkt wird die Kachel als Ganzes (Widget > Link > "Box"). Ein trotzdem gefuelltes Buttonfeld wird ausgeblendet, damit nicht zwei Buttons uebereinander liegen. Beim Hover waechst nur der Button. Eine im Widget eingestellte Inhaltsanimation wird bewusst abgeschaltet, siehe Abschnitt 4. WIDGET-EINSTELLUNGEN Skin ............... Classic Grafisches Element . Icon (faerbt sich ueber diese Datei ein) Bild ............... leer - die Bildflaeche wird ausgeblendet Link ............... Box Leer lassen, damit diese Datei greift: Innenabstand, Ausrichtung, Hintergrundfarbe des Inhalts, Titel- und Beschreibungsfarbe, Min-Hoehe Bild. BESCHREIBUNGSFELD Der komplette Preisblock steht als HTML in EINEM Feld. Konvention:

traegt die Bezeichnung, das darin den hervorgehobenen Wert, die Fussnote.

Arbeitspreis24,43 ct/kWh

Grundpreis15,77 € / Monat

Vertragslaufzeit ab 01.01.2026
bis 50.000 kWh GLEICHE HOEHE Die Kacheln sind fuer ein Grid gedacht. Grid-Elemente werden von Elementor ohnehin auf Zeilenhoehe gestreckt; die Kachel gibt diese Hoehe hier bis zum Inhalt durch, damit alle Kacheln einer Reihe gleich hoch sind und der Preisblock mittig darin sitzt. FORM DER AUSSPARUNG Die Ecke unten rechts ist bewusst in Pixeln festgelegt und skaliert NICHT mit der Kachelbreite - die Form bleibt also bei jeder Kachelgroesse identisch. Die Maske besteht aus drei Ebenen, die sich ueberlagern: +---------------------------+ | | | 1 Rechteck links (Rest x 100%) | 1 | 3 | 3 Rechteck rechts oben | | | (Ecke x Rest) | +-------------+ | | 2 | 2 Eckstueck mit der Aussparung +-------------+-------------+ (Ecke x Ecke, feste Groesse) Nur Ebene 2 traegt die Form; sie sitzt rechts unten und ist immer genau --cta-info-notch gross. Die drei uebrigen Ecken kommen ueber border-radius, die Ecke unten rechts steckt in der Zeichnung. Radius und Aussparung sind aus derselben Vorlage abgeleitet und bleiben deshalb zueinander passend, wenn --cta-info-notch geaendert wird. SCHATTEN Eine maskierte Flaeche kann keinen box-shadow zeigen: die Maske wird nach dem Schatten angewendet und schneidet ihn weg. Der Schatten liegt deshalb als filter: drop-shadow() auf dem Widget, also eine Ebene ueber der Maske - dadurch folgt er der tatsaechlichen Kontur samt Aussparung. Nebenwirkung: drop-shadow wirkt auf den gesamten Inhalt, der Text bekommt denselben Schatten. Bei der hier gesetzten geringen Deckkraft ist das nicht sichtbar; wer den Schatten deutlich kraeftiger einstellt, sieht ihn irgendwann auch hinter der Schrift. SPEZIFITAET Wie in image-cta.css liegen die Regeln bei 0-3-0 und schlagen damit das Widget-CSS von Elementor Pro (0-2-0). Elementors eigene Steuerelemente erzeugen 0-4-0 und gewinnen - ein im Widget gesetzter Wert uebersteuert diese Datei also bewusst fuer genau dieses eine Widget. ========================================================================== */ /* ========================================================================== 1) Stellschrauben - hier und nur hier werden Groessen geaendert ========================================================================== */ .cta--info-dark, .cta--info-light { /* ---- Form ---- --cta-info-notch ist die Kantenlaenge des Eckstuecks unten rechts. Radius und Position des Buttons leiten sich daraus ab (Faktoren aus der Vorlage), damit beim Aendern nichts auseinanderlaeuft. */ --cta-info-notch: 112px; --cta-info-radius: calc(var(--cta-info-notch) * 0.25099); --cta-info-btn: 70px; /* Durchmesser */ --cta-info-btn-offset: calc(var(--cta-info-notch) * 0.251); /* Mitte ab Rand */ --cta-info-btn-zoom: 1.12; /* Hover */ /* ---- Innenabstand ---- Unten mehr, damit der Text nicht in die Aussparung laeuft. */ --cta-info-pad: 40px; --cta-info-pad-bottom: 72px; /* ---- Schatten ---- */ --cta-info-shadow: 0 10px 24px rgba(19, 83, 71, .12); /* ---- Groessen ---- */ --cta-info-icon-size: 72px; --cta-info-gap: 22px; /* Abstand Icon / Titel / Preiszeilen */ /* ---- Farben, die in beiden Varianten gleich sind ---- */ --cta-info-icon: var(--e-global-color-primary); --cta-info-value: var(--e-global-color-primary); --cta-info-btn-bg: var(--e-global-color-secondary); --cta-info-btn-fg: var(--e-global-color-ffffff); } /* ---------- dunkle Variante ---------- */ .cta--info-dark { --cta-info-bg: var(--e-global-color-secondary); --cta-info-title: var(--e-global-color-ffffff); --cta-info-text: var(--e-global-color-ffffff); } /* ---------- helle Variante ---------- */ .cta--info-light { --cta-info-bg: var(--e-global-color-ffffff); --cta-info-title: var(--e-global-color-secondary); --cta-info-text: var(--e-global-color-secondary); } /* Tablet */ @media (max-width: 1024px) { .cta--info-dark, .cta--info-light { --cta-info-pad: 32px; --cta-info-pad-bottom: 64px; --cta-info-icon-size: 64px; } } /* Smartphone */ @media (max-width: 767px) { .cta--info-dark, .cta--info-light { --cta-info-notch: 92px; --cta-info-btn: 58px; --cta-info-pad: 26px; --cta-info-pad-bottom: 56px; --cta-info-icon-size: 58px; --cta-info-gap: 18px; } } /* ========================================================================== 2) Kachel - Flaeche, Form, Schatten, Hoehe ========================================================================== */ /* Der Schatten sitzt eine Ebene ueber der Maske, siehe Kopfkommentar. height/align-self sorgen dafuer, dass die Kachel die Zeilenhoehe des Grids annimmt und alle Kacheln einer Reihe gleich hoch sind. */ .elementor-element:is(.cta--info-dark, .cta--info-light) { position: relative; /* Bezugsrahmen fuer den Button */ height: 100%; align-self: stretch; filter: drop-shadow(var(--cta-info-shadow)); } /* Der Button ragt konstruktionsbedingt ueber die Kachelkante hinaus: sein Mittelpunkt liegt auf dem Mittelpunkt der Aussparung, also nur rund 28px vom Rand entfernt - bei 35px Radius stehen gut 7px nach rechts und unten ueber. Elementor setzt auf Widget bzw. Widget-Container ein overflow: hidden, das ihn dort abschneidet. Alle drei Ebenen werden deshalb auf visible gestellt; die Kachel selbst wird ohnehin von der Maske beschnitten, overflow wird dafuer nicht gebraucht. !important, weil Elementors eigene Steuerelemente (z.B. Eckenradius im Reiter Erweitert) ihr overflow mit 0-4-0 ausgeben und sonst gewinnen. */ .elementor-element:is(.cta--info-dark, .cta--info-light), .elementor-element:is(.cta--info-dark, .cta--info-light) > .elementor-widget-container, .elementor-element:is(.cta--info-dark, .cta--info-light) .elementor-cta { overflow: visible !important; } /* Nur bei nicht-optimiertem Markup vorhanden - ohne diese Zeile reicht die Zeilenhoehe des Grids nicht bis zur Kachel durch. */ .elementor-element:is(.cta--info-dark, .cta--info-light) > .elementor-widget-container { height: 100%; } .elementor-element:is(.cta--info-dark, .cta--info-light) .elementor-cta { position: relative; height: 100%; min-height: 0; /* 200px-Vorgabe des Widgets abschalten */ display: flex; flex-direction: column; background-color: var(--cta-info-bg); border-radius: var(--cta-info-radius); /* Ebene 1 Rechteck links | Ebene 2 Eckstueck | Ebene 3 Rechteck rechts oben. Die Ebenen werden vereinigt, nur Ebene 2 traegt die Aussparung. */ -webkit-mask-image: linear-gradient(#fff, #fff), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 112.939 112.939'%3E%3Cpath fill='%23fff' d='M0,112.939a28.347,28.347,0,0,0,28.346-28.347,56.246,56.246,0,0,1,56.246-56.246,28.346,28.346,0,0,0,28.347-28.347H0Z'/%3E%3C/svg%3E"), linear-gradient(#fff, #fff); mask-image: linear-gradient(#fff, #fff), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 112.939 112.939'%3E%3Cpath fill='%23fff' d='M0,112.939a28.347,28.347,0,0,0,28.346-28.347,56.246,56.246,0,0,1,56.246-56.246,28.346,28.346,0,0,0,28.347-28.347H0Z'/%3E%3C/svg%3E"), linear-gradient(#fff, #fff); -webkit-mask-position: left top, right bottom, right top; mask-position: left top, right bottom, right top; -webkit-mask-size: calc(100% - var(--cta-info-notch)) 100%, var(--cta-info-notch) var(--cta-info-notch), var(--cta-info-notch) calc(100% - var(--cta-info-notch)); mask-size: calc(100% - var(--cta-info-notch)) 100%, var(--cta-info-notch) var(--cta-info-notch), var(--cta-info-notch) calc(100% - var(--cta-info-notch)); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } /* Die Bildflaeche des Widgets wird nicht gebraucht. */ .elementor-element:is(.cta--info-dark, .cta--info-light) .elementor-cta__bg-wrapper { display: none; } /* ========================================================================== 3) Inhalt - Icon, Titel, Preisblock ========================================================================== */ .elementor-element:is(.cta--info-dark, .cta--info-light) .elementor-cta__content { flex: 1 1 auto; width: 100%; padding: var(--cta-info-pad) var(--cta-info-pad) var(--cta-info-pad-bottom); background-color: transparent; display: flex; flex-direction: column; justify-content: center; /* Preisblock mittig in der Kachelhoehe */ align-items: center; text-align: center; color: var(--cta-info-text); } /* ---------- Icon ---------- Die beiden [fill]/[stroke]-Regeln greifen auch bei hochgeladenen SVGs, die ihre Farbe fest mitbringen: Elementor bindet sie inline ein, dadurch sind die Pfade von aussen erreichbar. */ .elementor-element:is(.cta--info-dark, .cta--info-light) .elementor-cta__icon { margin-bottom: var(--cta-info-gap); color: var(--cta-info-icon); font-size: var(--cta-info-icon-size); line-height: 1; } .elementor-element:is(.cta--info-dark, .cta--info-light) .elementor-cta__icon svg { width: var(--cta-info-icon-size); height: var(--cta-info-icon-size); fill: currentColor; } .elementor-element:is(.cta--info-dark, .cta--info-light) .elementor-cta__icon svg [fill]:not([fill="none"]) { fill: currentColor; } .elementor-element:is(.cta--info-dark, .cta--info-light) .elementor-cta__icon svg [stroke]:not([stroke="none"]) { stroke: currentColor; } /* ---------- Titel ---------- */ .elementor-element:is(.cta--info-dark, .cta--info-light) .elementor-cta__title { margin-bottom: var(--cta-info-gap); color: var(--cta-info-title); } /* ---------- Preisblock ---------- */ .elementor-element:is(.cta--info-dark, .cta--info-light) .elementor-cta__description { width: 100%; color: var(--cta-info-text); } /* Bezeichnung ("Arbeitspreis") */ .elementor-element:is(.cta--info-dark, .cta--info-light) .elementor-cta__description p { margin: 0 0 var(--cta-info-gap); } .elementor-element:is(.cta--info-dark, .cta--info-light) .elementor-cta__description p:last-of-type { margin-bottom: 0; } /* Wert ("24,43 ct/kWh") */ .elementor-element:is(.cta--info-dark, .cta--info-light) .elementor-cta__description strong { display: block; margin-top: .25em; color: var(--cta-info-value); font-size: 1.35em; font-weight: 700; line-height: 1.2; } /* Fussnote ("Vertragslaufzeit ...") */ .elementor-element:is(.cta--info-dark, .cta--info-light) .elementor-cta__description small { display: block; margin-top: var(--cta-info-gap); font-size: .8em; line-height: 1.5; } /* ========================================================================== 4) "+"-Button in der Aussparung Wird von dieser Datei gezeichnet, nicht vom Widget. WICHTIG: Der Button haengt am WIDGET, nicht an .elementor-cta. Die Maske liegt auf .elementor-cta und macht genau die Stelle transparent, an der der Button sitzt - als Kind von .elementor-cta wuerde er also mit weggeschnitten. Eine Ebene darueber ist er von der Maske unberuehrt. Beide Elemente haben dieselbe Box, die Positionierung bleibt daher gleich. pointer-events: none, damit Klicks auf den Button an den darunter liegenden Link der Kachel durchgereicht werden. Die Maske beeinflusst das Klickverhalten nicht - der Bereich der Aussparung gehoert weiterhin zum Link. Der Mittelpunkt liegt auf dem Mittelpunkt der Aussparung, damit der Ring ringsum gleich breit bleibt - unabhaengig von --cta-info-btn. ========================================================================== */ .elementor-element:is(.cta--info-dark, .cta--info-light)::after { content: "+"; position: absolute; right: var(--cta-info-btn-offset); bottom: var(--cta-info-btn-offset); transform: translate(50%, 50%); z-index: 2; pointer-events: none; display: flex; align-items: center; justify-content: center; width: var(--cta-info-btn); height: var(--cta-info-btn); border-radius: 50%; background-color: var(--cta-info-btn-bg); color: var(--cta-info-btn-fg); font-size: calc(var(--cta-info-btn) * .57); font-weight: 400; line-height: 1; text-align: center; transition: transform .3s ease; } /* ---------- Hover: nur der Button waechst ---------- translate MUSS mitgeschrieben werden, sonst springt der Button aus der Aussparung - transform ersetzt immer den kompletten Wert. */ .elementor-element:is(.cta--info-dark, .cta--info-light):hover::after { transform: translate(50%, 50%) scale(var(--cta-info-btn-zoom)); } /* Die Inhaltsanimation des Widgets wird abgeschaltet: der Zoom soll nur den Button betreffen. Greift unabhaengig davon, was im Widget unter "Inhaltsanimation" eingestellt ist (0-4-0 schlaegt Elementors 0-3-0). */ .elementor-element:is(.cta--info-dark, .cta--info-light) .elementor-cta__content-item, .elementor-element:is(.cta--info-dark, .cta--info-light):hover .elementor-cta__content-item { transform: none; } /* Ein trotzdem gefuelltes Buttonfeld des Widgets wuerde doppelt erscheinen. */ .elementor-element:is(.cta--info-dark, .cta--info-light) .elementor-cta__button-wrapper { display: none; }