/*
 Theme Name: Hello-Elementor Child
 Template:   hello-elementor
*/

:root {
    --primary-color: #3F649D;
    --accent-color: #E8BF5C;
	--accent-color-rot: #A8335F;
	--accent-color-gruen: #07A78D;
    --primary-color-hero-end: #4a75b3;
	--primary-color-bg-light: #CCE0FF;
	--accent-color-rot-bg-light: #FFE0EC;
    --accent-color-gruen-bg-light: #DBFFF9;
    --accent-color-gold-bg-light: #FFF5DD;
    --secondary-color: #020101;
    --light-accent-color: #F5F5F5;
    --text-color: #7A7A7A;
    --light-text-color: #FFFFFF;
    --background-color: #FFFFFF;
    --widget-background: #FFFFFF;
	--chart-fill-capscale: #CCE0FF; /* Oder var(--primary-color-bg-light) */
    --chart-fill-sparer: #FFCCDF;   /* Oder var(--accent-color-rot-bg-light) */
    --border-radius-sm: 8px;
    --border-radius-md: 8px;
    --border-radius-lg: 8px;
    --box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    --font-family: 'poppins';
    --site-max-width: 1140px;
    --vertical-section-spacing-desktop: 10px;
    --menu-item-font-size: 16px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    padding-left: 10px;
    padding-right: 10px;
    margin: 0;
    font-family: var(--font-family);
    background-color: var(--background-color);
}

.elementor-kit-577 .rank-math-breadcrumb a {
    color: var(--text-color);
}

.elementor-kit-577 .rank-math-breadcrumb .separator {
    color: var(--text-color); 
}

/* ==========================================================================
   Header & Navigation (Mobile-First)
   ========================================================================== */
.site-header {
    background-color: var(--primary-color);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.07);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    max-width: var(--site-max-width); /* Boxed für Mobile */
    width: 100%;
    margin: 10px 10px 0;
    border-radius: var(--border-radius-lg);
    padding: 15px 20px;
}

.site-header .logo {
    flex-shrink: 0;
    z-index: 1001;
}

.site-header .logo img.custom-logo,
img.custom-logo { /* Fallback für custom-logo außerhalb des Headers, falls benötigt */
    max-width: 35px;
    height: auto;
    display: block;
    transition: max-width 0.2s ease-in-out;
}

.site-header .mobile-nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 28px;
    height: 24px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1002;
}

.site-header .mobile-nav-toggle .sr-only { /* Screenreader-only text */
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.site-header .mobile-nav-toggle .burger-line {
    display: block;
    width: 100%;
    height: 1.4px;
    background-color: var(--light-text-color);
    border-radius: 3px;
    transition: transform 0.3s ease-in-out, opacity 0.2s ease-in-out;
}

.site-header .mobile-nav-toggle[aria-expanded="true"] .line1 { transform: translateY(8px) rotate(45deg); }
.site-header .mobile-nav-toggle[aria-expanded="true"] .line2 { opacity: 0; }
.site-header .mobile-nav-toggle[aria-expanded="true"] .line3 { transform: translateY(-8px) rotate(-45deg); }

/* Basis Navigation UL (wird per JS modifiziert) */
ul.main-navigation-ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

/* Mobile Navigation Panel (slide-in) */
ul.mobile-nav-ul {
    list-style: none;
    margin: 0;
    padding: 0 0 0px 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    height: auto;
    background-color: var(--widget-background);
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.23, 1, 0.32, 1), visibility 0s linear 0.35s;
    visibility: hidden;
    overflow-y: visible;
}

ul.mobile-nav-ul.active {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.35s cubic-bezier(0.23, 1, 0.32, 1), visibility 0s linear 0s;
}
ul.mobile-nav-ul.slide-out-to-left {
    transform: translateX(-100%);
    visibility: hidden;
}

ul.mobile-nav-ul > li {
    position: relative;
    margin: 0;
    border-bottom: 1px solid #f0f0f0;
    width: 100%;
}
ul.mobile-nav-ul > li:last-child {
    border-bottom: none;
}

ul.mobile-nav-ul > li > a {
    display: block;
    padding: 0.9em 1.5em;
    text-decoration: none;
    color: var(--text-color);
    font-weight: 500;
    transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
    white-space: nowrap;
    font-size: var(--menu-item-font-size);
}
ul.mobile-nav-ul > li > a:hover {
    color: var(--primary-color);
    background-color: #fff);
}

ul.mobile-nav-ul li.mobile-nav-back {
    background-color: #fff;
    border-bottom: 0px solid #e0e0e0;
}
ul.mobile-nav-ul li.mobile-nav-back a {
    display: flex;
    align-items: center;
    color: var(--primary-color);
    font-weight: 600;
}
ul.mobile-nav-ul li.mobile-nav-back a:hover {
    background-color: #fff;
}

ul.mobile-nav-ul .mobile-nav-back-arrow {
    display: inline-block;
    width: 1em; height: 1em;
    background: url('icons/arrow-left.svg') no-repeat center / contain;
    margin-right: 0.75em;
    vertical-align: middle;
    font-size: inherit; /* Stellt sicher, dass die Größe relativ zum Text ist */
}

ul.mobile-nav-ul li.menu-item-has-children > a {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
ul.mobile-nav-ul li.menu-item-has-children > a::after { /* Pfeil für Untermenüs */
    content: '';
    display: inline-block;
    width: 1em; height: 1em;
    background: url('icons/arrow-right.svg') no-repeat center / contain;
    margin-left: 10px;
    vertical-align: middle;
    flex-shrink: 0;
}

/* Spezial-Button im mobilen Menü */
ul.mobile-nav-ul > li.nav-button-youtube {
    margin: 15px 0 15px 0;
    padding: 0 1.5em;
    border-bottom: none;
}
ul.mobile-nav-ul > li.nav-button-youtube > a {
    display: block;
    text-align: center;
    background-color: var(--primary-color);
    color: var(--light-text-color) !important; /* Wichtig, um Linkfarbe zu überschreiben */
    border: 2px solid var(--accent-color);
    padding: 0.8em 1em;
    border-radius: var(--border-radius-md);
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    text-transform: none;
    transition: background-color 0.3s, transform 0.2s, border-color 0.3s;
}
ul.mobile-nav-ul > li.nav-button-youtube > a:hover {
    background-color: #34527A;
    border-color: #D4AC4A;
}

/* ==========================================================================
   STYLING FÜR MEGAMENÜ-ZWISCHENÜBERSCHRIFT (MOBILES DESIGN)
   - Design basiert auf '.mobile-nav-back' für Konsistenz -
   ========================================================================== */

/* Zielt auf unsere spezielle Überschrift im mobilen Menü */
.mobile-nav-ul li.megamenu-sub-headline a {
    /* Stile kopiert von .mobile-nav-back a */
    color: var(--secondary-color) !important;
    font-weight: 600 !important;
    background-color: #fff !important; /* Stellt sicher, dass kein anderer Hintergrund greift */

    /* Wichtig: Deaktiviert Link-Verhalten */
    pointer-events: none;
    cursor: default;

    /* Optional: Etwas weniger Padding, da kein Pfeil da ist */
    padding: 0.8em 1.2em !important;
}

/* Verhindert den Hover-Effekt, wie bei .mobile-nav-back */
.mobile-nav-ul li.megamenu-sub-headline a:hover {
    background-color: #fff !important;
    color: var(--primary-color) !important;
}

/* Stellt sicher, dass das Elternelement (li) den passenden Hintergrund hat
   und die Trennlinie wie bei .mobile-nav-back aussieht. */
.mobile-nav-ul li.megamenu-sub-headline {
    background-color: #fff;
    border-bottom: 0px solid #e0e0e0 !important; /* Starke Trennlinie darunter */
    margin-top: 10px; /* Optional: Fügt etwas Abstand nach oben hinzu, um die Gruppe abzugrenzen */
}

/* Entfernt den Pfeil nach rechts, der bei "menu-item-has-children" erscheinen würde */
.mobile-nav-ul li.megamenu-sub-headline a::after {
    display: none !important;
}

/* --- Megamenü Basis-Stile --- */
.megamenu-trigger .megamenu-dropdown {
    display: none; /* Initial versteckt */
    position: absolute;
    background-color: var(--widget-background);
    border: 1px solid #ddd;
    box-shadow: var(--box-shadow);
    z-index: 999;
    border-radius: var(--border-radius-lg);
}
.megamenu-left-column { flex: 0 0 220px; }
.megamenu-tabs-nav { list-style: none; margin: 0; padding: 0; }
.megamenu-tabs-nav li.megamenu-tab-item { margin-bottom: 4px; }
.megamenu-tabs-nav li.megamenu-tab-item a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.8em 1em;
    white-space: nowrap;
    text-decoration: none;
    color: var(--text-color);
    border-radius: var(--border-radius-sm);
    font-weight: 500;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out;
    border: 1px solid transparent;
	font-size: var(--menu-item-font-size); /* HINZUGEFÜGT/SICHERGESTELLT: Für konsistente em-Berechnung */
    line-height: 1;
}
.megamenu-tabs-nav li.megamenu-tab-item a:hover {
    background-color: rgba(63, 100, 157, 0.08);
    color: var(--primary-color);
}
.megamenu-tabs-nav li.megamenu-tab-item.active a {
    background-color: var(--primary-color);
    color: var(--light-text-color);
    font-weight: 500;
    border-color: var(--primary-color);
}
.megamenu-tab-arrow { /* Basis für Pfeil, wird per Media Query ggf. anders gehandhabt */
    font-size: 0.9em;
    color: #b0b0b0;
    transition: color 0.2s ease-in-out;
}
.megamenu-tabs-nav li.megamenu-tab-item a:hover .megamenu-tab-arrow { color: var(--primary-color); }
.megamenu-tabs-nav li.megamenu-tab-item.active a .megamenu-tab-arrow { color: var(--light-text-color); }

.megamenu-right-column { flex: 1; }
.megamenu-right-column-title {
    font-size: 1.2em;
    color: var(--secondary-color);
    margin: 0 0 15px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid #eee;
    font-weight: 600;
}
.megamenu-content-panel { display: none; } /* Initial versteckt */
.megamenu-content-panel.active { display: block; }

.megamenu-panel-links-list { list-style: none; padding-left: 0; margin: 0; }
a.megamenu-panel-link-item {
    display: block;
    padding: 10px 0;
    text-decoration: none;
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.2s ease-in-out, padding-left 0.2s ease-in-out;
    border-radius: var(--border-radius-sm);
}
a.megamenu-panel-link-item:last-child { border-bottom: none; }
a.megamenu-panel-link-item:hover {
    background-color: rgba(63, 100, 157, 0.04);
    padding-left: 10px;
}
.panel-link-title {
    display: block;
    font-size: 1em;
    color: var(--text-color);
    font-weight: 600;
    margin-bottom: 4px;
    transition: color 0.2s ease-in-out;
}
a.megamenu-panel-link-item:hover .panel-link-title { color: var(--primary-color); }
.panel-link-subtitle {
    display: block;
    font-size: 0.85em;
    color: #555;
    line-height: 1.4;
}



/* ==========================================================================
   Media Queries
   ========================================================================== */

/* --- Kleine Desktops / Große Tablets (Header Boxed) --- */
@media (min-width: 576px) {
    .site-header:not(.dynamic-header) { /* Gilt nur, wenn Header nicht dynamisch volle Breite hat */
        max-width: var(--site-max-width) !important; /* Wichtig, um ggf. globalere Regeln zu überschreiben */
		padding-top: 20px;
    	padding-bottom: 20px;
    }
}

/* --- Mobile Navigation Panel Container (bis 1024px) --- */
@media (max-width: 1024px) {
    .site-header .main-nav { /* Container für das Mobile Menü-Panel */
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        width: 100%;
        margin-top: 10px;
        background-color: var(--widget-background);
        box-shadow: 0 8px 16px rgba(0,0,0,0.1);
        z-index: 1000;
        max-height: 0; /* Initial geschlossen */
        opacity: 0;    /* Initial unsichtbar */
        visibility: hidden;
        overflow: hidden;
        transition: max-height 0.4s cubic-bezier(0.23, 1, 0.32, 1),
                    opacity 0.3s ease-out 0.1s,
                    visibility 0s linear 0.4s;
        border-radius: var(--border-radius-sm);
		box-shadow: var(--box-shadow);
    }

    .site-header .main-nav[data-visible="true"] {
        max-height: calc(100vh - 70px - 10px - 20px); /* Maximale Höhe abzüglich Header, Margin, Padding */
        opacity: 1;
        visibility: visible;
        overflow-y: auto; /* Scrollen ermöglichen */
        transition: max-height 0.4s cubic-bezier(0.23, 1, 0.32, 1),
                    opacity 0.3s ease-out,
                    visibility 0s linear 0s;
    }

    /* Icons und Pfeile im mobilen Menü (Level 0) */
    ul.mobile-nav-ul.level-0 > li:not(.nav-button-youtube) > a {
        display: flex;
        align-items: center;
    }
    ul.mobile-nav-ul.level-0 > li.menu-item-has-children:not(.nav-button-youtube) > a {
        justify-content: flex-start; /* Icons links, Text daneben, Pfeil rechts */
    }
    ul.mobile-nav-ul.level-0 > li.menu-item-has-children:not(.nav-button-youtube) > a::after {
        margin-left: auto; /* Pfeil nach ganz rechts */
    }

    ul.mobile-nav-ul.level-0 > li[class*="menu-item-icon-"]:not(.nav-button-youtube) > a::before {
        content: '';
        display: inline-block;
        width: 28px; height: 28px;
        background-repeat: no-repeat; background-size: contain; background-position: center;
        margin-right: 12px;
        flex-shrink: 0;
    }
    ul.mobile-nav-ul.level-0 > li.menu-item-icon-ratgeber > a::before { background-image: url('icons/icon-finanz-ratgeber-wissen.svg'); }
    ul.mobile-nav-ul.level-0 > li.menu-item-icon-tools > a::before { background-image: url('icons/icon-investment-tools-analyse.svg'); }
    ul.mobile-nav-ul.level-0 > li.menu-item-icon-vergleiche > a::before { background-image: url('icons/icon-finanzvergleiche-bewertung.svg'); }
    ul.mobile-nav-ul.level-0 > li.menu-item-icon-wealth > a::before { background-image: url('icons/icon-vermoegensberatung-strategie.svg'); }

    /* Megamenü-Tab-Pfeile im Mobile ausblenden (nicht benötigt) */
    .megamenu-tabs-nav li.megamenu-tab-item a .megamenu-tab-arrow {
        display: none !important;
    }

    ul.mobile-nav-ul:not(.level-0) > li:last-child.megamenu-tab-item.is-direct-link > a {
        color: var(--primary-color) !important;
        font-weight: 600 !important;
    }
}


/* --- Desktop Navigation (ab 1025px) --- */
@media (min-width: 1025px) {
    /* KORRIGIERTER SELEKTOR HIER: */
    .site-header:not(.dynamic-header),
    .site-header { /* Volle Breite Header */
        padding-left: clamp(20px, 3vw, 35px);
        padding-right: clamp(20px, 3vw, 35px);
        max-width: none !important;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        
        /* === NEU: Sticky Header Logik für Desktop === */
        position: -webkit-sticky; /* Für Safari-Kompatibilität */
        position: sticky;
        top: 10px; /* Hält den Header 10px vom oberen Rand entfernt */
        z-index: 1100; /* Stellt sicher, dass der Header über dem Inhalt liegt */
        
        /* 
         * DER TRICK: Erzeugt einen "Schatten" nach OBEN.
         * Dieser ist 10px hoch (wegen -10px), hat keine Unschärfe und füllt
         * den Spalt über dem Header mit der Hintergrundfarbe des Bodys.
         * So scheint der Inhalt nicht durch.
        */
        box-shadow: 0 -10px 0 0 var(--background-color);
    }

    .site-header .logo img.custom-logo { max-width: 45px; }
    .site-header .mobile-nav-toggle { display: none; } /* Burger-Menü ausblenden */

    .site-header .main-nav { /* Desktop Navigationscontainer */
        position: static;
        display: flex;
        flex-grow: 1;
        align-items: center;
        width: auto;
        height: auto;
        margin-top: 0;
        background-color: transparent;
        box-shadow: none;
        border-radius: 0;
        opacity: 1;
        visibility: visible;
        max-height: none;
        overflow: visible;
        transform: none;
        transition: none;
        z-index: auto;
    }

    .site-header .main-nav > ul.main-navigation-ul { /* Zentriertes Hauptmenü */
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        width: 100%;
        position: relative; /* Wichtig für absolut positionierte Elemente wie YouTube Button & Megamenü */
        height: auto; margin: 0; padding: 0; list-style: none;
        background-color: transparent; max-height: none; overflow: visible;
        transform: none; visibility: visible; top: auto; left: auto;
        padding-bottom: 0; transition: none; border-radius: 0;
    }

    .site-header .main-nav > ul.main-navigation-ul > li {
        margin: 0;
        padding: 0;
        border-bottom: none;
        width: auto;
        background-color: transparent;
        flex-shrink: 0;
        position: static;
    }

    .site-header .main-nav > ul.main-navigation-ul > li > a {
        display: block;
        padding: 18px 15px;
        color: var(--light-text-color);
        text-decoration: none;
        white-space: nowrap;
        transition: color 0.2s ease-in-out;
        background-color: transparent;
        font-size: var(--menu-item-font-size);
		vertical-align: middle;
		line-height: 1;
    }

      /* FINALE REGEL: Diese Regel macht alles richtig.
     * Sie färbt den Link ein, wenn:
     * 1. er der Vorfahre der aktuellen Seite ist (current-menu-ancestor) ODER
     * 2. man mit der Maus darüber fährt (hover).
     * Der Klick-Zustand (.is-active) wird für die Farbe ignoriert.
     */
    .site-header .main-nav > ul.main-navigation-ul > li.current-menu-ancestor > a,
    .site-header .main-nav > ul.main-navigation-ul > li > a:hover {
        color: var(--accent-color);
    }

    /* Mobile-spezifische Pfeile und Icons im Desktop-Menü ausblenden */
    .site-header .main-nav > ul.main-navigation-ul > li.menu-item-has-children > a::after,
    .site-header .main-nav > ul.main-navigation-ul > li[class*="menu-item-icon-"] > a::before {
        display: none;
    }

	.site-header .main-nav > ul.main-navigation-ul > li:not(.nav-button-youtube) {
    position: relative;
    left: -23px; /* Hälfte Ihrer Logo-Breite (124.7px / 2) */
	}
	
    /* YouTube Button rechts außen, absolut positioniert */
    .site-header .main-nav > ul.main-navigation-ul > li.nav-button-youtube {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        margin: 0;
    }
    .site-header .main-nav > ul.main-navigation-ul > li.nav-button-youtube > a {
        padding: 0.8em 1em;
        display: inline-block;
        text-align: center;
        color: var(--light-text-color);
        border: 2px solid var(--accent-color);
        background-color: var(--primary-color);
        font-size: var(--menu-item-font-size);
		border-radius: var(--border-radius-md); /* Konsistent mit anderen Buttons */
		line-height: 1;
    }
    .site-header .main-nav > ul.main-navigation-ul > li.nav-button-youtube > a:hover {
        background-color: #34527A;
        border-color: #D4AC4A;
        color: var(--light-text-color);
    }

    /* Megamenü Desktop */
    .megamenu-trigger .megamenu-dropdown {
        display: flex;
        position: absolute;
        top: 100%;
        margin-top: 20px;
        left: 50%;
        transform: translateX(-50%) translateY(0);
        width: 1240px; max-width: 90vw;
        box-sizing: border-box;
        background-color: var(--widget-background);
        border: 0px solid #ddd;
        box-shadow: 0 7px 22px rgba(0, 0, 0, 0.12);
        z-index: 1000;
        border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);
        padding: 25px; gap: 25px;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.25s ease-in-out, visibility 0s linear 0.25s, transform 0.25s ease-in-out;
        pointer-events: none;
    }

.megamenu-trigger.menu-item-icon-ratgeber .megamenu-dropdown {
    transform: translateX(calc(-50% + 138px));
}
	
.megamenu-trigger.menu-item-icon-tools .megamenu-dropdown {
    transform: translateX(calc(-50% + 50px));
}
    
.megamenu-trigger.menu-item-icon-vergleiche .megamenu-dropdown {
    transform: translateX(calc(-50% - 44px));
}

.megamenu-trigger.menu-item-icon-wealth .megamenu-dropdown {
    transform: translateX(calc(-50% - 146px));
}
	
    .megamenu-trigger .megamenu-dropdown.visible {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .megamenu-left-column-header { display: flex; align-items: center; padding-bottom: 20px; }
    .megamenu-header-icon {
        display: inline-block; width: 28px; height: 28px;
        background-repeat: no-repeat; background-size: contain; background-position: center;
        margin-right: 10px; flex-shrink: 0;
    }
    .megamenu-header-icon.menu-item-icon-ratgeber { background-image: url('icons/icon-finanz-ratgeber-wissen.svg'); }
    .megamenu-header-icon.menu-item-icon-tools { background-image: url('icons/icon-investment-tools-analyse.svg'); }
    .megamenu-header-icon.menu-item-icon-vergleiche { background-image: url('icons/icon-finanzvergleiche-bewertung.svg'); }
    .megamenu-header-icon.menu-item-icon-wealth { background-image: url('icons/icon-vermoegensberatung-strategie.svg'); }

    .megamenu-header-title {
        font-size: 1.15em;
        color: var(--primary-color);
        font-weight: 600;
        margin: 0;
        line-height: 1.3;
    }

    .megamenu-dropdown .megamenu-tabs-nav > li.megamenu-tab-item.menu-item-has-children > a::after {
        content: ''; display: inline-block; width: 1em; height: 1em;
        background: url('icons/arrow-right.svg') no-repeat center / contain;
        margin-left: 1rem; opacity: 0.7;
        transition: opacity 0.2s ease-in-out;
    }
    .megamenu-dropdown .megamenu-tabs-nav > li.megamenu-tab-item.menu-item-has-children > a:hover::after { opacity: 1; }
    .megamenu-dropdown .megamenu-tabs-nav > li.megamenu-tab-item.active.menu-item-has-children > a::after {
        background-image: url('icons/arrow-right-white.svg');
        opacity: 1;
    }
	/* Styling für die dynamisch hinzugefügte Beschreibung im Megamenü */
.megamenu-panel-description {
    font-size: 0.9em;
    color: var(--text-color);
    line-height: 1.5;
    margin-top: 10px;      /* Abstand nach der Titel-Trennlinie */
    margin-bottom: 15px;   /* Abstand vor der Link-Liste */
    padding-right: 20em;   /* Etwas Luft auf der rechten Seite */
}
.megamenu-dropdown li.megamenu-sub-headline ~ li.megamenu-sub-headline a {
    padding-top: 20px !important; /* Passen Sie den Wert hier an */
}

/* ==========================================================================
   FINALE LÖSUNG FÜR MEGAMENÜ-ZWISCHENÜBERSCHRIFT (V.2 - MIT PADDING-RESET)
   ========================================================================== */

/* 1. Gestaltet den eigentlichen Titel (das <span>-Element) */
.megamenu-dropdown li.megamenu-sub-headline .panel-link-title {
    font-size: 1.2em;
    color: var(--secondary-color);
    margin: 0 0 10px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid #eee;
    font-weight: 600;
    display: block;
    width: 100%;
    transition: none;
}

/* 2. Macht den übergeordneten Link (<a>) unklickbar UND entfernt das unerwünschte Padding */
.megamenu-dropdown li.megamenu-sub-headline a.megamenu-panel-link-item {
    pointer-events: none;
    cursor: default;
    padding: 0 !important; /* <--- HIER IST DIE WICHTIGE ÄNDERUNG! */
}

/* 3. Verhindert unerwünschte Hover-Effekte auf der Überschrift */
.megamenu-dropdown li.megamenu-sub-headline a.megamenu-panel-link-item:hover .panel-link-title {
    color: var(--secondary-color);
}

/* 4. Setzt das Elternelement (<li>) zurück für saubere Abstände */
.megamenu-dropdown li.megamenu-panel-link.megamenu-sub-headline {
    padding: 0;
    margin-top: 0px;
    margin-bottom: 0;
    border-bottom: 0px !important;
}
}
* ==========================================================================
   NEU: Aktiven Zustand für GEÖFFNETE Megamenü-Trigger erzwingen
   ========================================================================== */
@media (min-width: 1025px) {

  /* 
   * Dieser Selektor färbt den Link ein, wenn das übergeordnete <li>
   * die Klasse .is-active hat, die per JavaScript gesetzt wird,
   * wenn das Menü geöffnet ist.
  */
  .site-header .main-nav > ul.main-navigation-ul > li.megamenu-trigger.is-active > a {
      color: var(--accent-color);
  }

}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer-custom {
    font-family: var(--font-family);
    color: var(--text-color);
    margin: 10px auto 0 auto;
    max-width: var(--site-max-width);
    border-radius: var(--border-radius-lg);
}

.footer-container {
    padding-left: 20px;
    padding-right: 20px;
}

.footer-social-bar {
    background-color: var(--primary-color);
    padding: 25px 0;
    margin-bottom: 30px;
    border-radius: var(--border-radius-lg);
}

.footer-social-bar .footer-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.footer-social-title {
    font-size: 1.4em;
    font-weight: 600;
    color: var(--light-text-color);
    margin: 0;
}

/* Grundlegendes Styling für alle SVGs in den Links */
.footer-social-icons a svg {
    width: 28px;
    height: 28px;
    fill: #FFFFFF; /* Standardfarbe der Icons (z.B. Weiß) */
    
    /* Wichtig: Definiert, wie sich die Icons bei einer Änderung verhalten.
       Dies sorgt für den sanften Übergang. */
    transition: fill 0.3s ease, transform 0.3s ease;
}

/* Effekt, wenn man mit der Maus über einen Link fährt */
.footer-social-icons a:hover svg {
    fill: #E8BF5C;         /* Die von Ihnen gewünschte Hover-Farbe */
    transform: scale(1.1); /* Vergrößert das Icon um 10% */
}


.footer-social-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 26px;
    justify-content: center;
}
.footer-social-icons a { display: inline-block; line-height: 0; }
.footer-social-icons img { height: 28px; width: 28px; }

.footer-links-area .footer-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
    align-items: flex-start;
}

.footer-column {
    flex: 1 1 200px;
    min-width: 180px;
    margin-bottom: 20px;
}

.footer-column h4 {
    font-size: 1.1em;
    font-weight: 600;
    color: var(--text-color);
    margin: 0 0 15px 0;
}

.footer-column .footer-menu-list { list-style: none; padding-left: 0; margin: 0; }
.footer-column .footer-menu-list li { margin-bottom: 10px; }
.footer-column .footer-menu-list li a {
    color: var(--text-color);
    text-decoration: none;
    font-size: 0.95em;
    transition: color 0.2s ease-in-out;
}
.footer-column .footer-menu-list li a:hover {
    color: var(--primary-color);
}

.footer-copyright {
    margin-top: 15px;
    padding-top: 20px;
    margin-bottom: 15px;
    border-top: 1px solid #eee;
    text-align: center;
}
.footer-copyright p {
    margin: 0;
    font-size: 0.9em;
    color: #777;
}

@media (max-width: 767px) {
    .footer-links-area .footer-container {
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }
	.footer-container {
        padding-left: 10px;
        padding-right: 10px;
    }
    .footer-column {
        width: 100%;
        max-width: 380px;
        text-align: left;
        flex-basis: auto;
        min-width: 0;
    }
    .footer-column .footer-menu-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        width: 100%;
        margin-top: 10px;
    }
    .footer-column .footer-menu-list li {
        flex-basis: 48%;
        box-sizing: border-box;
        margin-bottom: 8px;
    }
    .footer-column .footer-menu-list li a:hover {
        text-decoration: none;
    }
}

@media (max-width: 480px) {
    ul.mobile-nav-ul > li > a { padding: 0.8em 1.2em; }
    ul.mobile-nav-ul > li.nav-button-youtube { padding: 0 1.2em; }
    ul.mobile-nav-ul > li.nav-button-youtube > a {
        font-size: var(--menu-item-font-size);
    }
    .footer-social-title { font-size: 1.2em; }
    .footer-social-icons img { height: 24px; width: 24px; }
    .footer-column h4 { font-size: 1em; }
    .footer-column .footer-menu-list li a { font-size: 0.9em; }
}

@media (min-width: 768px) {
    .footer-social-bar .footer-container {
        flex-direction: row;
        justify-content: space-between;
    }
    .footer-social-title { font-size: 1.2em; }
}

/* ==========================================================================
   Typing Effekt
   ========================================================================== */
.typing-effect-h2 {
    font-family: var(--font-family);
    color: var(--accent-color);
    font-weight: 500;
    letter-spacing: -0.05em;
    margin: 0;
    line-height: 1;
    min-height: 1em;
    text-align: left;
    font-size: 1.4em;
}

@media (min-width: 768px) {
  .typing-effect-h2 {
    font-size: 1.8em;
  }
}

@media (min-width: 1025px) {
  .typing-effect-h2 {
    font-size: 2.2em;
  }
}

/* ==========================================================================
   Elementor Button Reset für Mobile Nav Toggle
   ========================================================================== */
.site-header .mobile-nav-toggle.elementor-button {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    color: inherit !important;
    font-size: inherit !important;
    line-height: 1 !important;
    text-transform: none !important;
    border-radius: 0 !important;
}

.site-header .mobile-nav-toggle,
.site-header .mobile-nav-toggle:hover,
.site-header .mobile-nav-toggle:focus,
.site-header .mobile-nav-toggle:active {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* ==========================================================================
   FIX: Aktiven Zustand für Dropdown-Trigger im Header hervorheben (Korrigierte Version)
   ========================================================================== */
@media (min-width: 1025px) {

  /* Hebt "Tools" hervor, wenn die Seite mit der ID 1207 aktiv ist */
  body.page-id-1207 .site-header .main-nav > ul.main-navigation-ul > li.menu-item-icon-tools > a {
    color: var(--accent-color);
  }

  /* Hebt "Vergleiche" hervor, wenn die Seite mit der ID 1023 aktiv ist */
  body.page-id-1023 .site-header .main-nav > ul.main-navigation-ul > li.menu-item-icon-vergleiche > a {
    color: var(--accent-color);
  }

}