/**
 * content_share v1.23 - Share-Buttons
 * © 2026 Computertechnik Brübach
 *
 * Schlankes Stylesheet, das die Buttons zuverlässig anzeigt, ohne sich dem
 * Host-Template aufzudrängen. Alle Werte können vom Template über die
 * CSS-Variablen --cs-* überschrieben werden.
 */

.cs-share-list {
    --cs-icon-size: 32px;
    --cs-radius: 50%;
    --cs-gap: .4rem;
    --cs-color-fg: #fff;

    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--cs-gap);
    margin: 1em 0;
    padding: 0;
    line-height: 1;
}

.cs-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--cs-icon-size);
    height: var(--cs-icon-size);
    border-radius: var(--cs-radius);
    color: var(--cs-color-fg);
    text-decoration: none;
    transition: transform .12s ease, filter .12s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,.12);
    cursor: pointer;
    overflow: hidden;
}
.cs-share-btn:hover,
.cs-share-btn:focus-visible {
    transform: translateY(-1px);
    filter: brightness(1.08);
    outline: none;
}
.cs-share-btn:active {
    transform: translateY(0);
    filter: brightness(.95);
}

.cs-share-icon {
    display: inline-flex;
    width: calc(var(--cs-icon-size) * .6);
    height: calc(var(--cs-icon-size) * .6);
    color: inherit;
}
.cs-share-icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
    display: block;
}

/* Screen-Reader-Only Label */
.cs-share-sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* Feedback nach "Link kopieren" */
.cs-share-btn.cs-copied::after {
    content: '✓';
    position: absolute;
    background: rgba(0,0,0,.85);
    color: #fff;
    padding: .15em .5em;
    border-radius: 4px;
    font-size: .75rem;
    margin-top: calc(var(--cs-icon-size) + .25rem);
    animation: cs-fade-out 1.5s ease forwards;
    pointer-events: none;
}
@keyframes cs-fade-out {
    0%, 70% { opacity: 1; }
    100%    { opacity: 0; }
}

/* Größen-Presets über Modifier-Klassen am Container */
.cs-share-list.cs-size-small  { --cs-icon-size: 24px; }
.cs-share-list.cs-size-medium { --cs-icon-size: 32px; }
.cs-share-list.cs-size-large  { --cs-icon-size: 40px; }
.cs-share-list.cs-size-xlarge { --cs-icon-size: 48px; }

/* Square-Variante */
.cs-share-list.cs-shape-square { --cs-radius: 4px; }
.cs-share-list.cs-shape-circle { --cs-radius: 50%; }

/* Mehrzeilige Anordnung */
.cs-share-list.cs-share-rows {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--cs-gap);
}
.cs-share-list.cs-share-rows .cs-share-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cs-gap);
}

/* Horizontale Ausrichtung (nur im Modul, via .cs-share-wrap) */
.cs-share-wrap.cs-align-center { text-align: center; }
.cs-share-wrap.cs-align-right  { text-align: right; }

/* Mehrzeilig: jede Zeile einzeln ausrichten */
.cs-share-wrap.cs-align-center .cs-share-list.cs-share-rows {
    align-items: stretch;
}
.cs-share-wrap.cs-align-center .cs-share-list.cs-share-rows .cs-share-row {
    justify-content: center;
}
.cs-share-wrap.cs-align-right .cs-share-list.cs-share-rows {
    align-items: stretch;
}
.cs-share-wrap.cs-align-right .cs-share-list.cs-share-rows .cs-share-row {
    justify-content: flex-end;
}

/* DSGVO/Privacy-Badge */
.cs-share-wrap {
    display: block;
}
.cs-share-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin: .5em 0;
    padding: .35em .75em;
    background: linear-gradient(135deg, #2e7d32 0%, #4caf50 100%);
    color: #ffffff;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .02em;
    text-shadow: 0 1px 1px rgba(0,0,0,.15);
    box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.cs-share-badge::before {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    background: currentColor;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2L4 5v6c0 5 3.4 9.5 8 11 4.6-1.5 8-6 8-11V5l-8-3zm-1 14l-4-4 1.4-1.4L11 13.2l5.6-5.6L18 9l-7 7z"/></svg>') center/contain no-repeat;
            mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2L4 5v6c0 5 3.4 9.5 8 11 4.6-1.5 8-6 8-11V5l-8-3zm-1 14l-4-4 1.4-1.4L11 13.2l5.6-5.6L18 9l-7 7z"/></svg>') center/contain no-repeat;
}