/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

/* START CSS für Animierte Menü Icons */
/* Hauptklasse für animiertes Menü */
.animated-icons {
  /* SVG Icon als Variable */
  --icon-megamenu: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20256%20512'%3E%3Cpath%20d='M64%20448l192-192L64%2064l-32%2032%20160%20160L32%20416z'/%3E%3C/svg%3E");
}

/* Container Text + Icon */
.animated-icons .e-n-menu-title-text {
  position: relative;
  display: inline-block;
  padding-left: 1.4em; /* Platz für Icon */
  transition: text-indent 0.3s ease, color 0.3s ease; /* Text und Farbe animieren */
}

/* Icon links per ::before */
.animated-icons .e-n-menu-title-text::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) rotate(-45deg); /* Startdrehung */
  transform-origin: center;
  
  width: 0.9em;
  height: 0.9em;
  
  background-color: currentColor; /* Icon übernimmt Textfarbe */
  
  mask-image: var(--icon-megamenu);
  -webkit-mask-image: var(--icon-megamenu);
  
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  
  will-change: transform;
  
  transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55), background-color 0.3s ease;
}

/* Text verschieben beim Hover */
.animated-icons a:hover .e-n-menu-title-text {
  text-indent: 5px;
}

/* Icon drehen beim Hover */
.animated-icons a:hover .e-n-menu-title-text::before {
  transform: translateY(-50%) rotate(0deg);
}

/* Icon drehen beim Down-Menü Hover */
.animated-icons.down a:hover .e-n-menu-title-text::before {
  transform: translateY(-50%) rotate(90deg);
}

/* === Aktiver Menüpunkt === */

/* Aktives Icon: Farbe aus Variable + gedreht */
.animated-icons .e-current .e-n-menu-title-text::before {
  background-color: var(--n-menu-title-color-active); /* <- Variable für Icon */
  transform: translateY(-50%) rotate(0deg);
}

/* Aktiver Text: eingerückt + Farbe aus Variable */
.animated-icons .e-current .e-n-menu-title-text {
  text-indent: 5px;
  color: var(--n-menu-title-color-active); /* <- Variable für Textfarbe */
}

/* END CSS für Animierte Menü Icons */

/* Dekorative Rahmen für Image Widget */
.decorative-frames-yes {
    position: relative;
    overflow: visible !important;
    z-index: 1;
}
.decorative-frames-yes .elementor-widget-container {
    position: relative;
    overflow: visible !important;
}
.decorative-frames-yes::before,
.decorative-frames-yes::after {
    content: '';
    position: absolute;
    width: 145px;
    height: 80%;
    pointer-events: none;
}
.decorative-frames-yes::before {
    background-color: var(--e-global-color-primary);
    top: calc(20% + 20px);
    left: -20px;
    z-index: -1;
}
.decorative-frames-yes::after {
    background-color: var(--e-global-color-text);
    top: -20px;
    left: calc(100% - 125px);
    z-index: -1;
}