/* =============================================================================
   KE Super Icon — farbiges Emoji/FA-Icon mit optionalem Glas
   ============================================================================= */

.ke-super-icon {
    --ke-si-size: 64px;
    display: flex;
    justify-content: center;
    line-height: 0;
}

/* Träger (Glas-/Form-Ebene). Im Glas-Vollflächen-Modus sitzt das Glas am Root. */
.ke-super-icon__tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease;
}

/* Emoji als <img> — feste Maße = kein Layout-Shift (CLS) */
.ke-super-icon__img {
    width: var(--ke-si-size);
    height: var(--ke-si-size);
    display: block;
}

/* Klassisches Icon (Font-/SVG-Modus).
   Elementor rendert FA5+ als <svg> und setzt die Klasse DIREKT aufs <svg>
   (svg.ke-super-icon__fa) — daher die Größe direkt aufs SVG, nicht auf ein
   (nicht existierendes) Kind-SVG. Font-Modus (<i>) nutzt font-size. */
.ke-super-icon__fa {
    font-size: var(--ke-si-size);
    line-height: 1;
}
svg.ke-super-icon__fa {
    width: var(--ke-si-size);
    height: var(--ke-si-size);
    display: block;
}
.ke-super-icon__fa svg {
    width: var(--ke-si-size);
    height: var(--ke-si-size);
}

/* Hover-Lift nur, wenn die Kachel ein Link ist */
.ke-super-icon a.ke-super-icon__tile:hover {
    transform: translateY(-2px);
}

/* Editor-Hinweis, wenn die Emoji-Bibliothek fehlt */
.ke-super-icon__hint {
    font-size: 12px;
    color: #b32d2e;
    padding: 8px 10px;
    border: 1px dashed #b32d2e;
    border-radius: 6px;
    line-height: 1.4;
}