/* 
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 */

*[id] {
    scroll-margin-top: 50px
}
/* Proven Expert */
.pe-pro-seal button {
	background-color: initial!important;
}
.pe-front-coloredBar {
	font-weight: normal!important;
}

/* Helper-Classes */
/* Desktop: Zeilenumbruch anzeigen */
@media (min-width: 768px) {
    .mobile-no-break {
        display: block;
    }
}

/* Mobile: Zeilenumbruch ausblenden/einblenden */
@media (max-width: 767px) {
    .mobile-no-break {
        display: inline;
    }
	.mobile-break {
    	display: block;
    }
}

.all-device-break {
	display: block;
}

/* Elementor Icon Box – Active Section Indicator */
[data-nav] .elementor-icon,
[data-nav] .elementor-icon i,
[data-nav] .elementor-icon svg{
  opacity: 0.35;
  transition: opacity .25s ease, color .25s ease;
}

[data-nav] .elementor-icon-box-title{
  opacity: 0.7;
  transition: color .25s ease, opacity .25s ease;
}

[data-nav]{
  transition: border-color .25s ease;
}

/* ACTIVE STATE */
[data-nav].is-active .elementor-icon,
[data-nav].is-active .elementor-icon i,
[data-nav].is-active .elementor-icon svg{
  opacity: 1;
  color: var(--e-global-color-primary) !important;
  fill: var(--e-global-color-primary) !important;
}

[data-nav].is-active{
  border-color: var(--e-global-color-f32514a) !important;
}

[data-nav].is-active .elementor-icon-box-title,
[data-nav].is-active .elementor-icon-box-title a{
  opacity: 1;
  color: var(--e-global-color-primary) !important;
}

/* Divider Nature-Tech */
.gh-divider-glow .elementor-divider-separator{
  height: 2px;
  border: none;
  position: relative;

  background: linear-gradient(
    to right,
    transparent 0%,
    color-mix(in srgb, var(--e-global-color-primary) 85%, transparent) 50%,
    transparent 100%
  );
}

.gh-divider-glow .elementor-divider-separator::after{
  content: "";
  position: absolute;
  inset: 0;

  background: linear-gradient(
    to right,
    transparent 0%,
    color-mix(in srgb, var(--e-global-color-primary) 65%, transparent) 50%,
    transparent 100%
  );

  filter: blur(14px);
  opacity: 0.95;
  z-index: -1;
}


/* Left-aligned variant */
.gh-divider-glow-left .elementor-divider-separator{
  background: linear-gradient(
    to right,
    color-mix(in srgb, var(--e-global-color-primary) 85%, transparent) 15%,
    transparent 100%
  );
}

.gh-divider-glow-left .elementor-divider-separator::after{
  background: linear-gradient(
    to right,
    color-mix(in srgb, var(--e-global-color-primary) 65%, transparent) 15%,
    transparent 100%
  );
}

.gh-ekg-divider {
  width: 100%;
  height: 54px;
  overflow: hidden;
}

.gh-ekg-divider svg {
  display: block;
  width: 100%;
  height: 100%;
}

.gh-ekg-divider path {
  fill: none;
  stroke: var(--e-global-color-primary);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;

  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;

  opacity: 0.92;

  filter:
    drop-shadow(
      0 0 3px
      color-mix(
        in srgb,
        var(--e-global-color-primary) 60%,
        transparent
      )
    )
    drop-shadow(
      0 0 8px
      color-mix(
        in srgb,
        var(--e-global-color-primary) 24%,
        transparent
      )
    );
}

/* Animation startet erst im Viewport */
.gh-ekg-divider.is-visible path {
  animation: gh-ekg-draw 6.5s ease-in-out forwards;
}

@keyframes gh-ekg-draw {
  0% {
    stroke-dashoffset: 1000;
    opacity: 0.75;
  }

  100% {
    stroke-dashoffset: 0;
    opacity: 0.95;
  }
}

@media (max-width: 767px) {
  .gh-ekg-divider {
    height: 42px;
  }

  .gh-ekg-divider path {
    stroke-width: 2;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gh-ekg-divider path {
    stroke-dashoffset: 0;
  }

  .gh-ekg-divider.is-visible path {
    animation: none;
  }
}

/* Elementor Button-Iconfarbe */
.elementor-button-icon svg,
.elementor-button-icon svg path {
    fill: currentColor !important;
}

/* Spotlight-Button Animation */
.btn-spotlight{
  position: relative;
  overflow: hidden;
  border-radius: 0.875rem;
  transition: all 0.35s ease;
}

.btn-spotlight::before{
  content: "";
  position: absolute;
  top: 50%;
  left: -55%;
  width: 75%;
  height: 220%;
  transform: translateY(-50%);
  border-radius: 999px;

  background: radial-gradient(
    circle at 35% 50%,
    rgba(255,255,255,0.26) 0%,
    rgba(255,255,255,0.14) 28%,
    rgba(255,255,255,0.06) 48%,
    rgba(255,255,255,0.00) 70%
  );

  filter: blur(10px);
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;

  animation: ghSpot 6.2s ease-in-out infinite;
}

@keyframes ghSpot{
  0%   { transform: translate(-20%, -50%); opacity: 0; }
  12%  { opacity: 0.85; }
  55%  { transform: translate(220%, -50%); opacity: 0.85; }
  100% { transform: translate(220%, -50%); opacity: 0; }
}

@media (prefers-reduced-motion: reduce){
  .btn-spotlight::before{ animation: none; opacity: 0; }
}

.btn-spotlight:hover{
  background: color-mix(in srgb, var( --e-global-color-7e822a5 ) 95%, transparent);
}

.btn-spotlight:hover::before{
  animation-duration: 4.5s;
}

/* Grüne Grid BG-Textur */

.gh-grid{
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.gh-grid::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;

  background-image:
    linear-gradient(
      to right,
      color-mix(in srgb, var(--e-global-color-primary) 18%, transparent) 1px,
      transparent 1px
    ),
    linear-gradient(
      to bottom,
      color-mix(in srgb, var(--e-global-color-primary) 18%, transparent) 1px,
      transparent 1px
    );

  background-size: 60px 60px;
  opacity: 0.18;

  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0) 12%,
    rgba(0,0,0,0.7) 25%,
    rgba(0,0,0,1) 40%,
    rgba(0,0,0,1) 70%,
    rgba(0,0,0,0.7) 85%,
    rgba(0,0,0,0) 100%
  );

  mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0) 12%,
    rgba(0,0,0,0.7) 25%,
    rgba(0,0,0,1) 40%,
    rgba(0,0,0,1) 70%,
    rgba(0,0,0,0.7) 85%,
    rgba(0,0,0,0) 100%
  );
}

.gh-grid-late{
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.gh-grid-late::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;

  background-image:
    linear-gradient(
      to right,
      color-mix(in srgb, var(--e-global-color-primary) 18%, transparent) 1px,
      transparent 1px
    ),
    linear-gradient(
      to bottom,
      color-mix(in srgb, var(--e-global-color-primary) 18%, transparent) 1px,
      transparent 1px
    );

  background-size: 60px 60px;
  opacity: 0.18;

  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0) 38%,
    rgba(0,0,0,0.6) 48%,
    rgba(0,0,0,1) 60%,
    rgba(0,0,0,1) 75%,
    rgba(0,0,0,0.7) 88%,
    rgba(0,0,0,0) 100%
  );

  mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0) 38%,
    rgba(0,0,0,0.6) 48%,
    rgba(0,0,0,1) 60%,
    rgba(0,0,0,1) 75%,
    rgba(0,0,0,0.7) 88%,
    rgba(0,0,0,0) 100%
  );
}

.step-number {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--e-global-color-secondary);
  color: #ffffff;

  display: flex;
  align-items: center;
  justify-content: center;
}