/* Wir sprechen die Klasse an, die du dem Widget gegeben hast */
.gluehbirne-head {
    position: relative !important;
}

/* Wir hängen das Icon an den tatsächlichen Titel-Tag im Widget */
.gluehbirne-head .elementor-heading-title {
    padding-right: 175px;
}

.gluehbirne-head .elementor-heading-title::after {
    content: "";
    position: absolute;
    
    /* Perfekt rechtsbündig und vertikal zentriert zur Headline */
    left: 0;
    top: 100%;
    transform: translateY(-50%);
    
    /* Gewünschte Größe */
    width: 100%;
    aspect-ratio: 1 / 1;
    
    /* Deine korrekte Bild-URL */
    background-image: url('/wp-content/uploads/2026/05/schon_gewusst.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center right;
}

/* --- HIER SIND DEINE ANPASSUNGEN (JETZT IN DER RICHTIGEN REIHENFOLGE) --- */

/* 1. Zuerst Tablets (768px) */
@media (max-width: 768px) {
    .gluehbirne-head .elementor-heading-title {
        padding-right: 0; /* Platzhalter rechts auf Mobile aufheben */
    }

    .gluehbirne-head .elementor-heading-title::after {
        position: absolute;
        top: -20px;
        right: 0;
        left: auto; /* Wichtig, damit das 'left: 0' vom Desktop aufgehoben wird */
        transform: none;
        
        display: inline-block;
        min-width: 100%;
        height: auto;
        aspect-ratio: 5/1;
    }
}

/* 2. Dann Smartphones (767px) - überschreibt Tablet bei kleineren Screens */
@media (max-width: 767px) {
    .gluehbirne-head .elementor-heading-title {
        padding-right: 200px; /* Dein gewünschter Platzhalter auf Mobile */
    }

    .gluehbirne-head .elementor-heading-title::after {
        position: absolute;
        top: 5px;
        right: 0;
        left: auto; /* Wichtig, damit das 'left: 0' vom Desktop aufgehoben wird */
        transform: none;
        
        display: inline-block;
        min-width: 100%;
        height: auto;
        aspect-ratio: 5/1;
    }
}