/* =============================================================
   Wendewerk GKV Tools – Teilen-Funktion (geteilt über alle Tools)
   ============================================================= */

/* !important auf width/max-width: einige Tool-Stylesheets setzen generische
   Resets wie ".app div { width: 100% }", die diesen inline-flex-Container
   sonst über die volle Breite strecken und den Trigger-Button nach links statt
   zentriert/rechts erscheinen lassen würden. */
.wwgt-share {
    position: relative;
    display: inline-flex;
    width: auto !important;
    max-width: none !important;
}

/* ── Trigger-Button (Standard: helle Variante für dunkle Hero-Flächen) ── */
.wwgt-share__trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 999px;
    background: rgba(255,255,255,.12);
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s;
    font-family: inherit;
    white-space: nowrap;
}

.wwgt-share__trigger:hover {
    background: rgba(255,255,255,.22);
    border-color: rgba(255,255,255,.55);
}

.wwgt-share__trigger-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* ── Position: oben rechts im Hero ─────────────────────────── */
/* !important ist hier bewusst: einige Tool-eigene Hero-Stylesheets setzen
   generische Resets wie ".hero > *:not(.hero__overlay) { position: relative }"
   (Overlay-Stacking-Technik) oder ".app div { width: 100% }" (Layout-Reset),
   die sonst diese absolute Positionierung wieder aufheben würden – die
   geteilte Teilen-Funktion muss in jedem Tool zuverlässig oben rechts
   erscheinen, unabhängig vom lokalen CSS des jeweiligen Tools. */
.wwgt-share--hero {
    position: absolute !important;
    top: 20px;
    right: 20px;
    z-index: 2;
    width: auto !important;
    max-width: none !important;
}

/* ── Variante: dunkel (für helle Flächen, z. B. CTA-Block-Note-Bereich) ── */
.wwgt-share--on-light .wwgt-share__trigger {
    border-color: #e2e8f0;
    background: #ffffff;
    color: #12405e;
}
.wwgt-share--on-light .wwgt-share__trigger:hover {
    background: #f8fafc;
    border-color: #00acec;
}

/* ── Menü ───────────────────────────────────────────────────── */
.wwgt-share__menu {
    position: absolute !important;
    top: calc(100% + 8px);
    right: 0;
    width: auto !important;
    max-width: none !important;
    min-width: 200px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    padding: 6px;
    z-index: 30;
}

.wwgt-share__item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    background: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    color: #12405e;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: background .15s;
}

.wwgt-share__item:hover {
    background: #f1f5f9;
}

/* ── Teilen-Prompt im CTA-Bereich ───────────────────────────── */
.wwgt-share-prompt {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,.15);
}

.wwgt-share-prompt--on-light {
    border-top: 1px solid #e2e8f0;
}

.wwgt-share-prompt__text {
    margin: 0;
    font-size: 13px;
    color: rgba(255,255,255,.7);
    text-align: center;
}

.wwgt-share-prompt--on-light .wwgt-share-prompt__text {
    color: #718096;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 480px) {
    .wwgt-share--hero {
        top: 14px;
        right: 14px;
    }
    .wwgt-share__trigger-label {
        display: none;
    }
    .wwgt-share__trigger {
        padding: 8px;
    }
}