.eg-ki-badge-wrap {
    position: relative;
    display: inline-block;
    max-width: 100%;
    line-height: 0;
    isolation: isolate;
}

.eg-ki-bg-badge-host {
    position: relative;
}

.eg-ki-bg-badge {
    position: absolute;
    z-index: 99;
}

.eg-ki-bg-badge.top-left {
    top: .5rem;
    left: .5rem;
}
.eg-ki-bg-badge.top-right {
    top: .5rem;
    right: .5rem;
}
.eg-ki-bg-badge.bot-left {
    bottom: .5rem;
    left: .5rem;
}
.eg-ki-bg-badge.bot-right {
    right: .5rem;
    bottom: .5rem;
}

.eg-ki-badge-wrap > img {
    display: block;
    max-width: 100%;
    height: auto;
}

.eg-ki-badge {
    position: absolute;
    z-index: 99;
    display: inline-block;
    width: max-content;
    max-width: calc(100% - 1rem);
    height: auto;
    box-sizing: border-box;
    line-height: 0;
    overflow: visible;
}

.eg-ki-badge-icon {
    display: block;
    height: 2.5rem;
    max-width: none;
}

/* Exakte SVG-Ratios aus den offiziellen ViewBox-Abmessungen. */
.eg-ki-badge-icon[data-ki-type="gen"] {
    width: 7.891rem; /* 1789.84 / 566.93 × 2.5rem */
}

.eg-ki-badge-icon[data-ki-type="mod"] {
    width: 7.494rem; /* 1700.79 / 566.93 × 2.5rem */
}

/* Das Drachengas-Popup nutzt eine eigene Bildskalierung; das Badge bleibt
   deshalb kompakter, ohne die EU-SVG-Ratio zu verändern. */
.eg-ki-popup-badge .eg-ki-badge-icon {
    height: 1rem;
}
.eg-ki-popup-badge .eg-ki-badge-icon[data-ki-type="gen"] {
    width: 3.157rem; /* 1789.84 / 566.93 × 1rem */
}
.eg-ki-popup-badge .eg-ki-badge-icon[data-ki-type="mod"] {
    width: 2.998rem; /* 1700.79 / 566.93 × 1rem */
}

/* Leichter Verlauf vom Rand unter das Badge; Richtung folgt der Position. */
.eg-ki-badge::before {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
    width: min(22rem, 70vw);
    height: 7rem;
    opacity: .8;
    border-radius: inherit;
}

.eg-ki-badge-wrap.top-left .eg-ki-badge,
.eg-ki-badge-wrap.top-right .eg-ki-badge {
    top: .5rem;
}

.eg-ki-badge-wrap.bot-left .eg-ki-badge,
.eg-ki-badge-wrap.bot-right .eg-ki-badge {
    bottom: .5rem;
}

.eg-ki-badge-wrap.top-left .eg-ki-badge,
.eg-ki-badge-wrap.bot-left .eg-ki-badge {
    left: .5rem;
}

.eg-ki-badge-wrap.top-right .eg-ki-badge,
.eg-ki-badge-wrap.bot-right .eg-ki-badge {
    right: .5rem;
}

.eg-ki-badge-wrap.top-left .eg-ki-badge::before {
    left: -.5rem; top: -.5rem;
    background: radial-gradient(ellipse at top left, rgba(0,0,0,.62), transparent 72%);
}
.eg-ki-badge-wrap.top-right .eg-ki-badge::before {
    right: -.5rem; top: -.5rem;
    background: radial-gradient(ellipse at top right, rgba(0,0,0,.62), transparent 72%);
}
.eg-ki-badge-wrap.bot-left .eg-ki-badge::before {
    left: -.5rem; bottom: -.5rem;
    background: radial-gradient(ellipse at bottom left, rgba(0,0,0,.62), transparent 72%);
}
.eg-ki-badge-wrap.bot-right .eg-ki-badge::before {
    right: -.5rem; bottom: -.5rem;
    background: radial-gradient(ellipse at bottom right, rgba(0,0,0,.62), transparent 72%);
}

.eg-ki-badge-wrap.eg-ki-light .eg-ki-badge,
.eg-ki-badge-wrap.eg-ki-badge-light .eg-ki-badge {
    background-color: transparent;
    color: transparent;
    text-shadow: none;
    box-shadow: none;
}

.eg-ki-badge-wrap.eg-ki-light .eg-ki-badge::before,
.eg-ki-badge-wrap.eg-ki-badge-light .eg-ki-badge::before {
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, .78), transparent 72%);
}

@media (prefers-reduced-transparency: reduce) {
    .eg-ki-badge { background-color: transparent; }
    .eg-ki-badge::before { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .eg-ki-badge, .eg-ki-badge::before { transition: none; }
}