/* Theme Name: Hello Elementor Child Theme URI: https://pfaff.de Description: Child Theme für Hello Elementor Author: PFAFF Author URI: https://pfaff.de Template: hello-elementor Version: 1.0.0 Text Domain: hello-elementor-child */ /* ========================================================== Eigene Styles ab hier einfügen ========================================================== */ /* Globales horizontales Scrollen unterbinden (z.B. wenn einzelne Elemente minimal ueber die Viewport-Breite hinausragen und einen seitlichen Scrollbalken/Wackeln verursachen). */ html, body { overflow-x: hidden; max-width: 100%; } /* Slider-Pagination (Punkte): global vereinheitlicht - aktiver Punkt gefuellt, inaktive Punkte als gruener Kreis-Outline (statt Elementor-Default). */ .swiper-pagination-bullet { width: 10px; height: 10px; background: transparent !important; border: 1.5px solid #6DD44B; opacity: 1 !important; margin: 0 6px !important; transition: background-color 0.3s ease; } .swiper-pagination-bullet-active { background: #6DD44B !important; } /* Formular-Checkbox (Elementor "Acceptance"-Feld, z.B. Datenschutz-Zustimmung im Kontaktformular): rund mit gruenem Rand statt eckiger Browser-Default-Checkbox. */ .elementor-field-type-acceptance { margin-top: 20px !important; } .elementor-field-type-acceptance .elementor-field-subgroup, .elementor-field-type-acceptance .elementor-field-option { display: flex !important; align-items: center !important; } .elementor-field-type-acceptance .elementor-acceptance-field { -webkit-appearance: none !important; appearance: none !important; display: inline-block !important; box-sizing: border-box !important; width: 18px !important; height: 18px !important; min-width: 18px !important; max-width: 18px !important; min-height: 18px !important; max-height: 18px !important; margin: 0 8px 0 0 !important; padding: 0 !important; border: 2px solid #6DD44B !important; border-radius: 50% !important; background-color: transparent !important; opacity: 1 !important; position: static !important; cursor: pointer; transition: background-color 0.2s ease; } .elementor-field-type-acceptance .elementor-acceptance-field:checked { background-color: #6DD44B !important; } .elementor-field-type-acceptance .elementor-acceptance-field:focus-visible { outline: 2px solid #00ADEF; outline-offset: 2px; } .scroll-icon-box .elementor-icon-box-wrapper { animation: scrollBounce 1.8s ease-in-out infinite !important; } @keyframes scrollBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateX(-8px); } } /*Button Icon*/ .elementor-button-icon .e-font-icon-svg { height: 10px !important; fill: #6DD44B !important; } /* Pfeil-Hover fuer Link-Buttons (z.B. "Read the case"-Karten): Pfeil bewegt sich beim Hover leicht nach rechts. In Elementor am Button-Widget unter Erweitert > CSS-Klassen "pfaff-arrow-hover" eintragen - wo immer der Effekt gebraucht wird, nicht automatisch an jedem Button sitewide. */ .pfaff-arrow-hover .elementor-button-icon { transition: transform 0.25s ease; } .pfaff-arrow-hover:hover .elementor-button-icon { transform: translateX(4px); } /* Icon-Farbe fuer Outline-Buttons (z.B. "Download more information"): wird beim Hover weiss, damit es auf dem sich fuellenden gruenen Hintergrund noch zu sehen ist. "fill: none" bleibt erzwungen, sonst fuellt der Browser offene Icon-Pfade automatisch (siehe Slider-Pfeile weiter oben - gleicher Effekt). In Elementor am Button-Widget unter Erweitert > CSS-Klassen als "pfaff-icon-hover-white" eintragen. */ .pfaff-icon-hover-white .elementor-button-icon svg path { transition: stroke 0.25s ease; } .pfaff-icon-hover-white:hover .elementor-button-icon svg path { stroke: #fff !important; fill: none !important; } /* Slider-Pfeile (prev/next, z.B. "01/05"-Karten-Slider): Kreis fuellt sich beim Hover gruen, Pfeil wird weiss. Global ueber Elementors Swiper-Button-Klasse. Elementors eigenes CSS setzt "fill" direkt am (--e-carousel-arrow-normal-color), das vererbt sich auch auf den Pfeil-Pfad - da der Pfad nicht geschlossen ist, fuellt der Browser ihn trotzdem (offene Pfade werden fuer "fill" virtuell geschlossen), was als dunkler Keil hinter dem Pfeil sichtbar wurde. Deshalb "fill: none" am Pfad fest erzwingen, unabhaengig vom Hover-Zustand. */ .elementor-swiper-button svg rect, .elementor-swiper-button svg path { transition: fill 0.25s ease, stroke 0.25s ease; } .elementor-swiper-button svg path { fill: none !important; } .elementor-swiper-button svg rect { fill: none; } .elementor-swiper-button:hover svg rect { fill: #6DD44B; } .elementor-swiper-button:hover svg path { stroke: #fff; } /* Fett = nur fett, Farbe wird vom umgebenden Text geerbt (blauer Text -> blaues Fett, gruener -> gruenes Fett, usw.). Frueher war hier color:#00ADEF fest gesetzt, wodurch JEDER fette Text global blau wurde - passte nicht ueberall. */ strong{ font-weight: 700; } /* Karten-Titel (z.B. "Glas Run Channel"): reserviert immer Platz fuer 2 Zeilen, damit ein- und zweizeilige Ueberschriften auf gleicher Hoehe enden und die Trennlinie/das Bild darunter in einer Reihe nebeneinanderliegender Karten buendig auf gleicher Hoehe startet - unabhaengig von der Textlaenge. In Elementor am Ueberschrift-Widget unter Erweitert > CSS-Klassen als "pfaff-card-title" eintragen. */ .pfaff-card-title { min-height: 48px; } /* Auf Mobile stehen die Karten einspaltig untereinander - da gibt es keine Nachbarkarte mehr, mit der die Hoehe uebereinstimmen muss, deshalb reservierten Platz wieder aufheben. */ @media (max-width: 768px) { .pfaff-card-title { min-height: 0; } } /* Zahlen-Modul: Trennlinie mit Farbverlauf */ .pfaff-gradient-divider { border-left: none !important; position: relative; } .pfaff-gradient-divider:before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: linear-gradient(180deg, #6DD44B 0%, #00A7E2 100%); } /* "06. Text auf Bild": Text-Container ab Mobil Querformat (768px) nicht mehr absolut positioniert, damit er unter dem Bild einreiht */ @media (max-width: 768px) { .pfaff-hero-text-container { position: static !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; width: 100% !important; } } /* Wiederverwendbare Klasse fuer Text auf Fotos: gibt genug Kontrast, egal welcher Bildausschnitt (hell/dunkel) je nach Breakpoint gerade dahinter liegt. In Elementor an der jeweiligen Ueberschrift/Text unter Erweitert > CSS-Klassen als "pfaff-photo-text" eintragen - global nutzbar, nicht an eine bestimmte Seite oder ein bestimmtes Widget gebunden. */ .pfaff-photo-text { text-shadow: 0 2px 12px rgba(2, 2, 3, 0.7); } /* Header Contact-Button: "Bubble Arrow" Hover-Effekt (osmo.supply/preview?resource=button-with-bubble-arrow) */ .pfaff-cta-group { position: relative; } .pfaff-btn-bubble { display: inline-flex !important; align-items: center; gap: 0.3em; position: relative; background: none !important; padding: 0 !important; overflow: visible; } .pfaff-btn-bubble__arrow { color: #020203; background-color: #6DD44B; border-radius: 10em; display: flex; align-items: center; justify-content: center; position: relative; width: 3.5em; height: 3.5em; transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1); transform: scale(0); transform-origin: left; } .pfaff-btn-bubble__arrow.is-duplicate { z-index: 2; background-color: #6DD44B; color: #020203; position: absolute; right: -0.2em; transform: scale(1); transform-origin: right; } .pfaff-btn-bubble__arrow-svg { width: 45%; transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1); } .pfaff-btn-bubble__content { display: flex; align-items: center; height: 3.5em; padding: 0 1.5em; border-radius: 10em; background-color: #6DD44B; color: #020203; position: relative; transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1); transform: translateX(calc(-3.5em - 0.5em)); } .pfaff-btn-bubble__text { line-height: 1; white-space: nowrap; } .pfaff-btn-bubble:hover .pfaff-btn-bubble__content { transform: translateX(0); } .pfaff-btn-bubble:hover .pfaff-btn-bubble__arrow-svg { transform: translateX(3px); } .pfaff-btn-bubble:hover .pfaff-btn-bubble__arrow { transform: scale(1); } .pfaff-btn-bubble:hover .pfaff-btn-bubble__arrow.is-duplicate { transform: scale(0); } /* Header: Scroll-Hide/Show + weißer Hintergrund werden per Inline-Style in custom.js gesetzt (Elementors eigene post-*.css gewinnt sonst gegen Klassen-Regeln hier) */ /* Applications-Dropdown: Design-Anpassung */ .elementor-location-header .elementor-nav-menu--dropdown { background-color: #fff; border: none; border-radius: 8px; box-shadow: 0 12px 32px rgba(2, 2, 3, 0.12); /* !important noetig: Elementor Pro's eigenes ".elementor-nav-menu--main .elementor-nav-menu ul" (2 Klassen + Tag-Selektor "ul" = hoehere Spezifitaet als unser 2-Klassen-Selektor hier) setzt "padding: 0" auf dieselbe Dropdown-Liste - ohne !important gewinnt das und unser Innenabstand greift nie, egal welcher Wert hier steht. */ padding: 16px 24px 20px 14px !important; min-width: 220px; position: relative; } .elementor-location-header .elementor-nav-menu--dropdown:after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; border-radius: 0 0 8px 8px; background: linear-gradient(90deg, #6DD44B 0%, #00ADEF 80%); } .elementor-location-header .elementor-nav-menu--dropdown .elementor-nav-menu--dropdown { margin-left: 8px; } .elementor-location-header .elementor-nav-menu--dropdown .menu-item + .menu-item { margin-top: 8px; } .elementor-location-header .elementor-nav-menu--dropdown .elementor-sub-item { padding: 16px 40px 16px 20px; border-radius: 6px; color: #020203; background: none; text-decoration: none; } .elementor-location-header .elementor-nav-menu--dropdown .elementor-sub-item:hover, .elementor-location-header .elementor-nav-menu--dropdown .elementor-sub-item.highlighted { color: #6DD44B; text-decoration: underline; } .elementor-location-header .elementor-nav-menu--dropdown .sub-arrow { margin-left: auto; padding-left: 30px; padding-right: 8px; color: inherit; } /* WPML-Sprachumschalter im Header (Elementor-Widget "WPML Language Switcher", Stil in WPML: "Dropdown"): soll aussehen wie ein normaler Hauptmenuepunkt - Sprachkuerzel ("EN") + gleicher Chevron wie bei "Applications", gleiche Schrift. Das Dropdown uebernimmt das Design des Applications-Dropdowns (siehe oben). Selektoren bewusst so lang: Elementors Widget-CSS (".elementor-widget-wpml-language-switcher .wpml-elementor-ls ...") und WPMLs Inline-CSS (weisser Hintergrund, Farben) muessen per Spezifitaet geschlagen werden. Im Scroll-Zustand (weisser Header) faerbt custom.js den Toggle wie die Menuepunkte dunkel (Inline-Style) - der Chevron folgt per currentColor. */ .elementor-location-header .elementor-widget-wpml-language-switcher { align-self: center; } /* Position: Der Header-Container verteilt Logo / Menue / Umschalter / Contact per "space-between" - dadurch stand "EN" weit weg vom Menue. Stattdessen Menue + Umschalter als Gruppe mittig zwischen Logo und Contact (auto-Margins schlucken den freien Platz) und "EN" mit 20px Abstand = gleicher Abstand wie zwischen den Menuepunkten. Nur Desktop (ab 1367px), darunter ist das Menue ausgeblendet. */ @media (min-width: 1367px) { .elementor-location-header .e-con-inner:has(> .elementor-widget-wpml-language-switcher) > .elementor-widget-nav-menu { margin-left: auto; } .elementor-location-header .e-con-inner:has(> .elementor-widget-nav-menu) > .elementor-widget-wpml-language-switcher { margin-left: 20px; margin-right: auto; } } /* Burger/Off-Canvas schon ab 1366px statt erst ab 1200px (Elementor-Breakpoint "Tablet Extra"): Zwischen 1201 und 1366px passten Logo, Menue, "EN" und Contact nicht in eine Zeile ("Careers" brach um). Elementors Breakpoint selbst bleibt bei 1200px (sonst verschieben sich alle Tablet-Extra-Einstellungen der ganzen Seite) - stattdessen wird hier NUR im Header zwischen 1201 und 1366px die Tablet-Ansicht nachgebaut: alles mit "Auf Tablet Extra ausblenden" (Desktop-Menue, Contact-Button) weg, alles mit "Auf Desktop/Laptop ausblenden" (Burger, Off-Canvas-Inhalt) sichtbar. Burger-Groesse und Logo-Breite entsprechen den Tablet-Extra-Werten aus Elementor (werden dort nur bis 1200px ausgegeben). Bei Aenderung in Elementor hier anpassen. */ @media (min-width: 1201px) and (max-width: 1366px) { .elementor-location-header .elementor-element.elementor-hidden-tablet_extra { display: none !important; } .elementor-location-header .elementor-widget.elementor-hidden-laptop:not(.elementor-hidden-tablet_extra) { display: block !important; } .elementor-location-header .e-con.elementor-hidden-laptop:not(.elementor-hidden-tablet_extra) { display: flex !important; } .elementor-location-header .elementor-widget-icon.elementor-hidden-laptop .elementor-icon { font-size: 25px !important; padding: 12.5px !important; } .elementor-location-header .elementor-widget-theme-site-logo img { width: 200px !important; } } /* Tablet/Mobile (bis 1366px, Menue ist dort nur noch Burger/Off-Canvas): "EN" stand durch "space-between" mittig zwischen Logo und Burger. Jetzt rechts direkt neben dem Burger (16px Abstand). Dafuer muss die CTA-Gruppe (Burger + ausgeblendeter Contact-Button) ihre feste Elementor-Breite verlieren, sonst bleibt links vom Burger eine leere Flaeche stehen. */ @media (max-width: 1366px) { .elementor-location-header .e-con-inner:has(> .elementor-widget-wpml-language-switcher) > .pfaff-cta-group { width: auto !important; flex: 0 0 auto; } .elementor-location-header .e-con-inner > .elementor-widget-wpml-language-switcher { margin-left: auto; margin-right: 16px; } } .elementor-location-header .elementor-widget-wpml-language-switcher .wpml-ls-legacy-dropdown { width: auto; background: transparent; line-height: var(--e-global-typography-0147579-line-height); } .elementor-location-header .elementor-widget-wpml-language-switcher .wpml-elementor-ls .wpml-ls-legacy-dropdown a { display: flex; align-items: center; border: 0; background: transparent; padding: 0; font-family: var(--e-global-typography-0147579-font-family), sans-serif; font-size: var(--e-global-typography-0147579-font-size); font-weight: 400; line-height: var(--e-global-typography-0147579-line-height); color: #fff; transition: color .3s; } /* Toggle ("EN") */ .elementor-location-header .elementor-widget-wpml-language-switcher .wpml-elementor-ls .wpml-ls-legacy-dropdown a.wpml-ls-item-toggle, .elementor-location-header .elementor-widget-wpml-language-switcher .wpml-elementor-ls .wpml-ls-legacy-dropdown .wpml-ls-current-language > a, .elementor-location-header .elementor-widget-wpml-language-switcher .wpml-elementor-ls .wpml-ls-legacy-dropdown a.wpml-ls-item-toggle:focus { padding: 0; background: transparent; color: #fff; } .elementor-location-header .elementor-widget-wpml-language-switcher .wpml-elementor-ls .wpml-ls-legacy-dropdown .wpml-ls-current-language:hover > a, .elementor-location-header .elementor-widget-wpml-language-switcher .wpml-elementor-ls .wpml-ls-legacy-dropdown a.wpml-ls-item-toggle:focus-visible { color: #6DD44B; background: linear-gradient(currentColor, currentColor) left bottom / 100% 1px no-repeat; } /* Chevron statt WPML-Dreieck (gleiches Font-Awesome-Icon wie im Hauptmenue) */ .elementor-location-header .elementor-widget-wpml-language-switcher .wpml-elementor-ls .wpml-ls-legacy-dropdown a.wpml-ls-item-toggle::after { position: static; flex: none; border: 0; width: .7em; height: .7em; margin-left: 10px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M207 381.5L12.7 187.1c-9.4-9.4-9.4-24.6 0-33.9l22.7-22.7c9.4-9.4 24.5-9.4 33.9 0L224 284.5l154.7-154c9.4-9.3 24.5-9.3 33.9 0l22.7 22.7c9.4 9.4 9.4 24.6 0 33.9L241 381.5c-9.4 9.4-24.6 9.4-34 0z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M207 381.5L12.7 187.1c-9.4-9.4-9.4-24.6 0-33.9l22.7-22.7c9.4-9.4 24.5-9.4 33.9 0L224 284.5l154.7-154c9.4-9.3 24.5-9.3 33.9 0l22.7 22.7c9.4 9.4 9.4 24.6 0 33.9L241 381.5c-9.4 9.4-24.6 9.4-34 0z'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .3s; } .elementor-location-header .elementor-widget-wpml-language-switcher .wpml-elementor-ls .wpml-ls-legacy-dropdown .wpml-ls-current-language:hover > a::after { transform: rotate(180deg); } /* Sprachkuerzel statt "English" / "Deutsch (German)". WPML bietet im Widget keine Kuerzel-Option - bei einer neuen Sprache hier eine Zeile ergaenzen (Klasse steht am
  • , z.B. "wpml-ls-item-fr"). */ .elementor-location-header .elementor-widget-wpml-language-switcher .wpml-ls-native, .elementor-location-header .elementor-widget-wpml-language-switcher .wpml-ls-display { display: none; } .elementor-location-header .elementor-widget-wpml-language-switcher .wpml-ls-item-en-us > a::before { content: "EN"; } .elementor-location-header .elementor-widget-wpml-language-switcher .wpml-ls-item-de > a::before { content: "DE"; } /* Dropdown: gleiches Design wie das Applications-Dropdown oben */ .elementor-location-header .elementor-widget-wpml-language-switcher .wpml-elementor-ls .wpml-ls-legacy-dropdown .wpml-ls-sub-menu { top: 100%; left: -34px; /* Text im Dropdown buendig unter "EN" (14px Box- + 20px Item-Innenabstand) */ right: auto; min-width: 120px; margin-top: 20px; /* Weniger Innenabstand als beim Applications-Dropdown: hier steht nur ein Eintrag, mit den dortigen Werten wirkte die Box unten zu leer. */ padding: 8px 24px 8px 14px; background-color: #fff; border: none; border-radius: 0; box-shadow: 0 12px 32px rgba(2, 2, 3, 0.12); } .elementor-location-header .elementor-widget-wpml-language-switcher .wpml-ls-sub-menu::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; border-radius: 0; background: linear-gradient(90deg, #6DD44B 0%, #00ADEF 80%); } /* Bei geoeffnetem Off-Canvas lag das Sprach-Dropdown unter dem Menue-Panel: Beide sitzen im selben Header-Container, Elementor gibt dem Off-Canvas aber z-index 2147483630, WPML dem Dropdown nur 101. Deshalb hier knapp darueber. */ .elementor-location-header .elementor-widget-wpml-language-switcher .wpml-ls-sub-menu { z-index: 2147483640 !important; } /* Unsichtbare Bruecke ueber den 20px Abstand - sonst klappt das Dropdown zu, sobald die Maus vom Toggle nach unten faehrt. */ .elementor-location-header .elementor-widget-wpml-language-switcher .wpml-ls-sub-menu::before { content: ''; position: absolute; left: 0; right: 0; top: -20px; height: 20px; } .elementor-location-header .elementor-widget-wpml-language-switcher .wpml-elementor-ls .wpml-ls-legacy-dropdown .wpml-ls-sub-menu a, .elementor-location-header .elementor-widget-wpml-language-switcher .wpml-elementor-ls .wpml-ls-legacy-dropdown .wpml-ls-sub-menu a:link { padding: 10px 40px 10px 20px; border-radius: 0; color: #020203; background: none; text-decoration: none; } .elementor-location-header .elementor-widget-wpml-language-switcher .wpml-elementor-ls .wpml-ls-legacy-dropdown .wpml-ls-sub-menu a:hover, .elementor-location-header .elementor-widget-wpml-language-switcher .wpml-elementor-ls .wpml-ls-legacy-dropdown .wpml-ls-sub-menu a:focus { color: #6DD44B; background: none; text-decoration: underline; } /* Mobile Navi (Off-Canvas): Öffnen-Transition + Burger/Close-Animation nach dem Prinzip von osmo.supply/resource/centered-scaling-navigation-bar (Design/Farben bleiben Original, nur Bewegung wird übernommen) 1366px = Grenze, ab der im Header Burger/Off-Canvas aktiv ist (Elementor-Breakpoint "Tablet Extra" ist 1200px, wird im Header aber per CSS bis 1366px erweitert - siehe Sprachumschalter-Abschnitt weiter oben) */ @media (max-width: 1366px) { /* Position: Box haengt direkt unter der Header-Leiste (Hoehe per JS in custom.js gemessen), statt als Overlay ueber den ganzen Bildschirm */ .e-off-canvas__main { top: var(--pfaff-header-height, 90px) !important; } /* Kein abdunkelnder Overlay-Hintergrund über der ganzen Seite - nur die Box selbst klappt auf */ .e-off-canvas__overlay { display: none !important; } /* Kein weisses Karten-Design - feste, deckende Flaeche in #444e69 (Pfaff-Blaugrau), ohne Transparenz/Blur (Kundenwunsch: Seiteninhalt soll nicht mehr durchscheinen). Muss zur Header-Farbe bei geoeffnetem Menue in custom.js passen. */ .e-off-canvas__content { background-color: #444e69 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: none !important; color: #fff !important; } .e-off-canvas .elementor-nav-menu--dropdown { background-color: transparent !important; box-shadow: none !important; padding: 4px 0 !important; margin-left: 0 !important; /* Elementors Dropdown-Container hat von Haus aus overflow-x:hidden (fuer die Desktop-Flyout-Breite gedacht) - durch unsere Einrueckung ragt der rechts ausgerichtete Sub-Arrow der 3. Ebene darueber hinaus und wurde abgeschnitten. */ overflow: visible !important; } .e-off-canvas .elementor-nav-menu--dropdown:after { display: none !important; } /* Desktop-Dropdown-Design (Applications-Flyout im Header) gibt Sub-Items einen 8px Akzent-Rand links - im Off-Canvas ungewollt, verschiebt den Text. */ .e-off-canvas .elementor-sub-item { border-left: 0 !important; } .e-off-canvas .elementor-nav-menu a { color: #fff !important; text-shadow: 0 1px 6px rgba(2, 2, 3, 0.4); transition: color 0.3s ease; } /* Hauptmenue-Punkte (1. Ebene) groesser fuer bessere Lesbarkeit - Unterpunkte (z.B. "Sealing Systems") bewusst in GLEICHER Schriftgroesse wie die Hauptpunkte. */ .e-off-canvas .elementor-nav-menu > .menu-item > a, .e-off-canvas .elementor-nav-menu--dropdown .elementor-sub-item { font-size: 20px !important; line-height: 1.3 !important; } /* Mehr Luft zwischen den Menuepunkten - Haupt- und Unterpunkte gleich, damit das Menue ruhig und gut antippbar wirkt (Wert hier zentral aenderbar). */ .e-off-canvas .elementor-nav-menu > .menu-item > a, .e-off-canvas .elementor-nav-menu--dropdown .elementor-sub-item { padding-top: 14px !important; padding-bottom: 14px !important; } /* Sub-Arrow (Chevron): war bei der 2./3. Ebene unsichtbar, weil der Dropdown- Container overflow-x:hidden hatte (siehe Fix oben) und der rechts ausgerichtete Pfeil durch unsere Einrueckung darueber hinausragte, statt gecliptt zu werden. Mit overflow:visible reicht das Original-Icon wieder aus. */ .e-off-canvas .sub-arrow svg { fill: #fff !important; width: 14px !important; height: 14px !important; } /* Statt den Pfeil zu drehen (rotate hat die Position sichtbar verschoben, da das Chevron-Icon nicht symmetrisch ist) wird beim Aufklappen einfach das Icon getauscht: das SVG (Pfeil runter) wird ausgeblendet und ein Pfeil- nach-oben-Zeichen an exakt derselben Stelle eingeblendet - keine Bewegung, keine Positionsverschiebung. */ .e-off-canvas .elementor-item[aria-expanded="true"] .sub-arrow svg, .e-off-canvas .elementor-sub-item[aria-expanded="true"] .sub-arrow svg { display: none !important; } /* Font-Awesome "chevron-up" (f077) - exaktes Spiegelbild des Original-Icons "chevron-down" (f078), gleicher Stil/Strichstaerke statt eines generischen Unicode-Dreiecks. */ .e-off-canvas .elementor-item[aria-expanded="true"] .sub-arrow::after, .e-off-canvas .elementor-sub-item[aria-expanded="true"] .sub-arrow::after { content: ''; display: block; width: 14px; height: 14px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='white' d='M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: contain; } /* Elementor setzt bei Hover/offenem Untermenue eine eigene "highlighted"-Klasse mit dunkelblauem Kachel-Hintergrund (rgb(31,39,51)) und Unterstreichung - passt nicht zum Glas-Look, deshalb komplett zuruecksetzen. */ .e-off-canvas .elementor-item, .e-off-canvas .elementor-sub-item, .e-off-canvas .elementor-item.highlighted, .e-off-canvas .elementor-sub-item.highlighted, .e-off-canvas .elementor-item:hover, .e-off-canvas .elementor-sub-item:hover, .e-off-canvas .elementor-item:focus, .e-off-canvas .elementor-sub-item:focus { background-color: transparent !important; text-decoration: none !important; } /* Hover und aktive Seite: beide Marken-Gruen, ohne Unterstrich. */ .e-off-canvas .elementor-nav-menu > .menu-item > a:hover, .e-off-canvas .elementor-nav-menu--dropdown .elementor-sub-item:hover { color: #6DD44B !important; } .e-off-canvas .elementor-nav-menu > .menu-item.current-menu-item > a, .e-off-canvas .elementor-nav-menu--dropdown .elementor-sub-item.current-menu-item, .e-off-canvas .elementor-item.elementor-item-active, .e-off-canvas .elementor-sub-item.elementor-item-active { color: #6DD44B !important; text-decoration: none !important; } /* 3. Ebene (verschachteltes Untermenue) rutscht sonst aus dem normalen Fluss (Elementors Flyout-Positionierung greift ab der 2. Verschachtelungstiefe) - hier erzwungen als eingerueckter Akkordeon-Block wie die 2. Ebene. Hinweis: die WURZEL-Nav des ganzen Off-Canvas-Menues traegt selbst schon die Klasse .elementor-nav-menu--dropdown (ist ein