/*
Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/hello-theme/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash
Template: hello-elementor
Author: Elementor Team
Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash
Description: Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
Tags: accessibility-ready,flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready
Version: 3.4.5.1767627438
Updated: 2026-01-05 15:37:18

*/

/*
 * Font Gradient
*/

body {
  overflow-x: hidden;
  width: 100%;
}
main#content {
	overflow-x: hidden;
}

.font-gradient h1,
.font-gradient h2,
.font-gradient h3,
.font-gradient h4,
.font-gradient h5,
.font-gradient h6{
	background: linear-gradient(90deg, #F5AF0A 12.03%, #ACBBC1 50.48%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	width: fit-content;
}

/*
 * 
 * Header Animations
 * 
*/

/* Standard: Header sichtbar */
.header-menu {
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform: translateY(0);
  opacity: 1;
}

/* Header verstecken */
.header-menu.hidden {
  transform: translateY(-100%);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Anchor-Menü */
#anchor-menu {
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

#anchor-menu.sticky {
    position: fixed;
    top: var(--anchor-top, 0);
    width: 100%;
    max-width: 100%;
    margin: auto;
    left: auto;
	right: auto;
    background: white;
    z-index: 8;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
	background-color: transparent;
}


/* Horizontaler Scroll für das Anker-Menü auf Mobile */
@media (max-width: 767px) {
    
    /* 1. Den Wrapper zwingen, horizontal zu scrollen statt den Inhalt zu beschneiden */
    #anchor-menu .anchor-menu .e-n-menu-wrapper {
        display: block !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch; /* Flüssiges Scrollen auf iOS */
        scrollbar-width: none; /* Versteckt Scrollbar in Firefox */
    }

    /* Scrollbar für Chrome/Safari verstecken (optional, für sauberen Look) */
    #anchor-menu .anchor-menu .e-n-menu-wrapper::-webkit-scrollbar {
        display: none;
    }

    /* 2. Die Liste (ul) als Flex-Reihe ohne Umbruch definieren */
    #anchor-menu .anchor-menu .e-n-menu-heading {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        width: max-content !important; /* Wichtig: Breite passt sich dem Inhalt an */
    }

    /* 3. Die Listenelemente (li) am Schrumpfen hindern */
    #anchor-menu .anchor-menu .e-n-menu-item {
        flex: 0 0 auto !important;
        margin-right: 15px !important; /* Abstand zwischen den Punkten */
    }

    /* 4. Sicherstellen, dass der Burger-Button versteckt bleibt, falls er aktiv ist */
    #anchor-menu .anchor-menu .e-n-menu-toggle {
        display: none !important;
    }
	
	.custom-scroll-indicator {
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 100px; /* Breite des Fade-Bereichs */
        display: flex;
        align-items: center;
        justify-content: flex-end;
        z-index: 100;
        pointer-events: none; /* Klicks auf den leeren Fade gehen durch */
        transition: opacity 0.4s ease;
    }

    /* Der weiße Verlauf von transparent zu weiß */
    .scroll-fade-layer {
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.95) 80%);
        z-index: -1;
    }

    /* Der Button mit deinem SVG */
    .scroll-next-btn {
        background: none;
        border: none;
        padding: 0;
        margin-right: 10px; /* Abstand zum rechten Rand */
        cursor: pointer;
        pointer-events: all; /* Macht nur den Button klickbar */
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Schatten für den Button hinzufügen für bessere Tiefe */
    .scroll-next-btn svg {
        filter: drop-shadow(0px 2px 4px rgba(0,0,0,0.1));
    }
	
	.scroll-next-btn {
		padding: 0 !important;
		background: none !important;
		border: 0 !important;
	}
}

/* Auf Desktop komplett ausblenden */
@media (min-width: 768px) {
    .custom-scroll-indicator {
        display: none !important;
    }
}

:target::before, .elementor-menu-anchor::before {
display: none !important;
}