/* ============================================================
   Radial Spoke Menu – rsm.css
   ============================================================ */

/* ---- Wrapper ---- */
.rsm-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

/* ---- Gemeinsame Button-Basis ---- */
.rsm-center,
.rsm-sat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    text-decoration: none;
    border: none;
    cursor: pointer;
    color: #fff;
    /* Größe, Farbe, Gap kommen per Elementor-Selectors */
}

/* ---- Mittelpunkt ---- */
.rsm-center {
    position: relative;
    z-index: 10;
    width: 110px;
    height: 110px;
    background: #5b5ef6;
    box-shadow: 0 4px 18px rgba(0,0,0,.18);
    gap: 6px;
    transition: transform .22s ease, box-shadow .22s ease, background .18s ease;
    flex-shrink: 0;
}
.rsm-center:hover {
    transform: scale(1.07);
    box-shadow: 0 8px 28px rgba(0,0,0,.24);
}

/* ---- Satelliten ---- */
.rsm-sat {
    position: absolute;
    z-index: 9;
    width: 100px;
    height: 100px;
    background: #5b5ef6;
    gap: 6px;

    /* Startzustand: kollabiert im Zentrum */
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0.35);
    transition:
        opacity   .30s ease,
        transform .34s cubic-bezier(.34, 1.56, .64, 1),
        background .18s ease;

    /* Position via JS-gesetzte Custom Properties */
    left: calc(50% + var(--rsm-tx, 0px));
    top:  calc(50% + var(--rsm-ty, 0px));
}

/* Geöffneter Zustand */
.rsm-wrap.rsm-open .rsm-sat {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
}

/* Hover auf Satelliten */
.rsm-wrap.rsm-open .rsm-sat:hover {
    transform: translate(-50%, -50%) scale(1.09);
}

/* ---- Icon ---- */
.rsm-icon-el {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    line-height: 1;
    pointer-events: none;
}
.rsm-icon-el svg {
    fill: currentColor;
    display: block;
}
.rsm-icon-el i {
    line-height: 1;
}

/* ---- Label ---- */
.rsm-lbl {
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    text-align: center;
    line-height: 1.2;
    max-width: 88%;
    pointer-events: none;
}

/* ---- Klick-Indikator am Mittelpunkt (kleines Dreieck) ---- */
.rsm-wrap[data-trigger="click"] .rsm-center::after {
    content: '';
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid rgba(255,255,255,.55);
    transition: transform .22s ease;
}
.rsm-wrap[data-trigger="click"].rsm-open .rsm-center::after {
    transform: rotate(180deg);
}

/* ---- Responsive: etwas kleiner auf Mobil ---- */
@media (max-width: 480px) {
    .rsm-center { width: 88px; height: 88px; }
    .rsm-sat    { width: 80px; height: 80px; }
    .rsm-icon-el { font-size: 22px; }
    .rsm-lbl    { font-size: 10px; }
}