@layer components {

/* ── Drag-Handle ── */
.drag-icon { width: 1.25rem; opacity: 0.4; flex-shrink: 0; cursor: grab; }

/* ── Widget Skalierung ± ── */
.widget__scale img {
    cursor: pointer;
    width: 22px;
    height: 22px;
    transition: opacity 0.15s ease;
}
.widget__scale img[data-scale="plus"] {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Crect x='0.5' y='0.5' width='21' height='21' rx='3.5' fill='white' stroke='%23ccc'/%3E%3Cline x1='11' y1='6' x2='11' y2='16' stroke='%23666' stroke-width='1.5'/%3E%3Cline x1='6' y1='11' x2='16' y2='11' stroke='%23666' stroke-width='1.5'/%3E%3C/svg%3E");
}
.widget__scale img[data-scale="minus"] {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Crect x='0.5' y='0.5' width='21' height='21' rx='3.5' fill='white' stroke='%23ccc'/%3E%3Cline x1='6' y1='11' x2='16' y2='11' stroke='%23666' stroke-width='1.5'/%3E%3C/svg%3E");
}

/* ── Widget Info-Icon (mask-Technik: Farbe via currentColor → erbt var(--dark-gray) / var(--font-highlight)) ── */
.widget__info-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 13px;
    height: 13px;
    background: var(--white);
    border-radius: 50%;
    pointer-events: none;
}
.widget__info-btn::after {
    content: '';
    display: block;
    width: 14px;
    height: 14px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='8.5' fill='none' stroke='white' stroke-width='1.5'/%3E%3Ccircle cx='10' cy='6.5' r='1' fill='white'/%3E%3Cpath d='M10 9.5v5' stroke='white' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 14px;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='8.5' fill='none' stroke='white' stroke-width='1.5'/%3E%3Ccircle cx='10' cy='6.5' r='1' fill='white'/%3E%3Cpath d='M10 9.5v5' stroke='white' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 14px;
    position: relative;
    z-index: 1;
    pointer-events: none;
}

/* ── Alert-Icon ── */
.alert-icon { font-size: var(--fs-2xl); flex-shrink: 0; }

/* ── Bestätigungs-Icons ── */
.success-icon { font-size: var(--fs-display); color: var(--dark-green); margin-bottom: 15px; display: block; }
.error-icon   { font-size: var(--fs-display); color: var(--red);        margin-bottom: 15px; display: block; }

/* ── Erfolgs-Icon (SVG-Kreis-Version) ── */
.success-icon:has(svg) {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--dark-green) 0%, var(--data-blue-6) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 30px;
    font-size: inherit;
    color: inherit;
}
.success-icon svg { width: 40px; height: 40px; fill: var(--white); }

/* ── Responsive ── */
@media (max-width: 600px) {
    .success-icon,
    .error-icon { font-size: var(--fs-hero); }
}

} /* @layer components */