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

body {
    /* Optional: Custom styles */
}

 .card {
            position: relative;
            overflow: hidden;
        }
        /* Spotlight nur bei Hover einblenden */
        
        .card::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            background: radial-gradient( circle at var(--cursorX, 50%) var(--cursorY, 50%), var(--e-global-color-889c05d) 0%, transparent 40%);
            opacity: 1;
            transition: opacity 0.3s ease, background-position 0.1s;
			inset: 0;
        }

/* 1) Header bekommt neuen Root-Stacking-Context */
.header-stack{
    position: absolute;         /* erzeugt SC */
    z-index: 110000;            /* > 100000 (Popup) */
}

/* 2) ALLE direkten Kinder (Logo, Menü …) wieder unter das Popup schieben … */
.header-stack > *{
    position: relative;
    z-index: -1;
}

/* 3) … außer dem einen Button */
.btn-over-popup{
    position: relative;         /* bleibt im Flow, Optik unverändert   */
    z-index: 110001;            /* über Pop-up UND über -1-Geschwister */
}

/* normaler Hover */
.btn-cta-1:hover,
.btn-cta-2:hover,
.btn-cta-3:hover{
    background: var(--e-global-color-2b47c6d);
    color: #fff;
}

/* erzwungener Hover-Look, solange Popup offen ist */
.btn-hover-active,
.btn-hover-active:hover{
    background: var(--e-global-color-2b47c6d);
    color: #fff;
}

/* Start custom CSS for container, class: .elementor-element-94ae662 */
/* ────────────────────────────────────────────────────────────────
   1)  Basiseffekt: Kopf- & Fließtexte in der Kachel werden weiß
   ──────────────────────────────────────────────────────────────── */
.hover-tile:hover {
    color: #fff;
    /* vererbt sich */
}

/* Nur definierte Textelemente erzwingen Weiß ─ Buttons ausgenommen */
.hover-tile:hover :is( h1,h2,h3,h4,h5,h6, p, span, a:not(.elementor-button-link), .elementor-heading-title, .elementor-widget-text-editor ) {
    color: #fff !important;
}

/* ────────────────────────────────────────────────────────────────
   2)  Button selbst bleibt, wie Elementor ihn gestylt hat
   ──────────────────────────────────────────────────────────────── */
/* NICHTS weiter nötig – er erbt dank Inline-Styles seine Farben   */
/* ────────────────────────────────────────────────────────────────
   3)  Icon im Button wird trotzdem weiß
   ──────────────────────────────────────────────────────────────── */
/* Fall A – SVG-Icon (Elementor > 3.15 oder eigene SVGs) */
.hover-tile:hover .elementor-button .elementor-button-icon, .hover-tile:hover .elementor-button .elementor-button-icon *, .hover-tile:hover .elementor-button svg, .hover-tile:hover .elementor-button svg * {
    color: #fff !important;
    /* für <i>-Icons und Font Icons       */
    fill: #fff !important;
    /* für SVG-Füllungen                 */
    stroke: #fff !important;
    /* für SVG-Linien                    */
}

/* Fall B – Font-Icons (ältere Elementor-Versionen oder FA)  
   → wird durch color:#fff oben bereits abgedeckt                */
/* ────────────────────────────────────────────────────────────────
   4)  Weiche Übergänge (optional)
   ──────────────────────────────────────────────────────────────── */
.hover-tile {
    transition: background-color .3s ease, color .3s ease;
}

/* ── VORAUSSETZUNG: dein bestehender .hover-tile-Code bleibt unverändert ── */
/* ───────────── 1.  Hover-Look schon beim Laden ────────────── */
/* → greift NUR solange keine Kachel in der Gruppe gehovert wird */
.hover-group:not(:hover) .default-active {
    /* Texter-Kram → war vorher schon (weiß) geregelt,
       wird hier nur für den Fall ergänzt, falls du das alte
       Text-Snippet mal entfernst. */
    color: #fff;
}

/* Alle Überschriften, Links, Copy in dieser Kachel sofort weiß */
.hover-group:not(:hover) .default-active :is( h1,h2,h3,h4,h5,h6, p, span, a:not(.elementor-button-link), .elementor-heading-title, .elementor-widget-text-editor ) {
    color: #fff !important;
}

/* SVG-Icon im Button ebenfalls sofort weiß */
.hover-group:not(:hover) .default-active .elementor-button .elementor-button-icon, .hover-group:not(:hover) .default-active .elementor-button .elementor-button-icon *, .hover-group:not(:hover) .default-active .elementor-button svg, .hover-group:not(:hover) .default-active .elementor-button svg * {
    color: #fff !important;
    fill: #fff !important;
    stroke: #fff !important;
}

/* ───────────── 2.  Hover-Hintergrund/Overlay sofort aktiv ─── */
/* a) Einfache Farbfläche  -----------------------------------  */
/*    → trage exakt dieselbe Farbe ein, die du im Elementor unter
       “Hover” definiert hast. Beispiel:                          */
.hover-group:not(:hover) .default-active {
    background: var(--e-global-color-2b47c6d) !important;
    /* DEIN Hover-Farbwert */
}

/* b) Bild- oder Video-Hintergrund -----------------------------  */
/*    Im Elementor gibt’s pro Kachel eine unverwechselbare ID /
      einen Inline-Style. Kopiere einfach die von Elementor
      erzeugte Hover-Deklaration und setz sie hier ein. Beispiel: */
/*
.hover-group:not(:hover) .default-active{
    background-image:url('https://example.com/hover-bg.jpg') !important;
    background-size:cover !important;
    background-position:center !important;
}
*/
/* c) Overlay (z. B. dunklere Ebene mit Transparenz) ------------- */
/*    Elementor legt dafür meist ein ::before auf .elementor-widget-wrap
      an. Greife das Pseudo-Element so ab:                         */
/*
.hover-group:not(:hover) .default-active .elementor-widget-wrap::before{
    opacity:0.5 !important;                      ⟵ Hover-Overlay-Wert
}
*/
/* ───────────── 3.  Automatisches Zurückschalten ────────────── */
/* Sobald irgendeine Kachel gehovert wird, gilt :hover; dadurch
   verliert .default-active ihr „Sonder-Styling“ automatisch. */
/* ────────────────────────────────────────────────────────────────
   Fallback: sorgt dafür, dass die default-active-Kachel
   beim eigenen Hover zuverlässig weißen Text bekommt.
   ──────────────────────────────────────────────────────────────── */
/* Container selbst (= Vererbungsfarbe) */
.default-active:hover {
    color: #fff !important;
    /* überstimmt Elementor-Inline */
}

/* Alle üblichen Textelemente in der Kachel – Buttons bleiben außen vor */
.default-active:hover :is( h1,h2,h3,h4,h5,h6, p, span, a:not(.elementor-button-link), .elementor-heading-title, .elementor-widget-text-editor ) {
    color: #fff !important;
}

/* Icon im Button ebenfalls weiß (Text des Buttons bleibt Elementor-Blau) */
.default-active:hover .elementor-button .elementor-button-icon, .default-active:hover .elementor-button .elementor-button-icon *, .default-active:hover .elementor-button svg, .default-active:hover .elementor-button svg * {
    color: #fff !important;
    fill: #fff !important;
    stroke: #fff !important;
}

/* Button-Label wieder auf ursprüngliche Farbe zurückholen,
   damit wir es nicht versehentlich überfärben */
.default-active:hover .elementor-button, .default-active:hover .elementor-button * {
    color: inherit !important;
    /* Elementor-Hoverfarbe siegt wieder */
}