/* ════════════════════════════════════════════════════════════════
   LEISTUNGEN · SOCIAL MEDIA — Visual-Layer
   Scoped auf .leistungen-social. Theme-safe via Tokens.
   ════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════
   01 · DREI-SÄULEN-INFOGRAFIK (Triad) — kein Card-Look
   Verbundene Icon-Nodes (icons.svg-Sprite: pri=currentColor, acc=Rot)
   ═══════════════════════════════════════════════════════ */
.leistungen-social .sm-triad {
    display: flex; align-items: flex-start; justify-content: center;
    gap: clamp(0.5rem, 2vw, 1.6rem); max-width: 1000px; margin: 2.6rem auto 0; }
.leistungen-social .sm-triad-node {
    flex: 1 1 0; max-width: 290px; text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 0.55rem; }
.leistungen-social .sm-triad-icon {
    width: 60px; height: 60px; color: var(--t1); --icon-stroke: 1.8;
    display: grid; place-items: center; border: 1px solid var(--tdeco);
    border-radius: 50%; background: var(--surface); margin-bottom: 0.2rem;
    transition: border-color 0.3s, color 0.3s; }
.leistungen-social .sm-triad-icon svg { width: 30px; height: 30px; }
.leistungen-social .sm-triad-node h3 { font-size: 1.18rem; margin: 0; }
.leistungen-social .sm-triad-node p { font-size: 0.92rem; line-height: 1.55; color: var(--t2); margin: 0; max-width: 30ch; }
.leistungen-social .sm-triad-tag {
    font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--t3); margin-top: 0.15rem; }

/* Pfeil-Connector (macht aus 3 Nodes EINE Pipeline/Infografik) */
.leistungen-social .sm-triad-arrow {
    flex: none; width: 26px; height: 26px; margin-top: 17px; color: var(--accent);
    opacity: 0.55; display: grid; place-items: center; }
.leistungen-social .sm-triad-arrow svg { width: 100%; height: 100%; }

/* Reveal-Stagger + Icon-Pop wenn die Infografik in den Viewport kommt */
.leistungen-social .sm-triad-node .sm-triad-icon { transform: scale(0.85); opacity: 0; transition: transform 0.5s cubic-bezier(.16,1,.3,1), opacity 0.5s; }
.leistungen-social .sm-triad.revealed .sm-triad-icon { transform: scale(1); opacity: 1; }
.leistungen-social .sm-triad.revealed .sm-triad-node:nth-child(3) .sm-triad-icon { transition-delay: 0.12s; }
.leistungen-social .sm-triad.revealed .sm-triad-node:nth-child(5) .sm-triad-icon { transition-delay: 0.24s; }
.leistungen-social .sm-triad-arrow { opacity: 0; transition: opacity 0.5s; }
.leistungen-social .sm-triad.revealed .sm-triad-arrow { opacity: 0.55; transition-delay: 0.18s; }

@media (max-width: 760px) {
    .leistungen-social .sm-triad { flex-direction: column; align-items: center; }
    .leistungen-social .sm-triad-node { max-width: 440px; }
    .leistungen-social .sm-triad-arrow { margin-top: 0; transform: rotate(90deg); }
}
@media (prefers-reduced-motion: reduce) {
    .leistungen-social .sm-triad-icon,
    .leistungen-social .sm-triad-arrow { opacity: 1 !important; transform: none !important; transition: none !important; }
    .leistungen-social .sm-triad.revealed .sm-triad-arrow,
    .leistungen-social .sm-triad-arrow { transform: none !important; }
}

/* ═══════════════════════════════════════════════════════
   02 · PROZESS-PHASE-VISUALS — analog vis-ki-*/vis-fg-*
   Position via x/y-Attr, Animation via CSS (kein transform-Attr-Konflikt),
   theme-safe Fills (var(--surface)/var(--t1)/var(--accent)).
   ═══════════════════════════════════════════════════════ */
.leistungen-social .ld-prozess-phase-visual { margin: 1.1rem 0 0; max-width: 100%; padding: 0.5rem;
    background: var(--surface, rgba(255,255,255,0.02)); border: 1px solid var(--tdeco, rgba(127,127,127,0.15)); border-radius: 6px; }
.leistungen-social .ld-prozess-phase-visual .sm-visual { width: 100%; aspect-ratio: 16 / 9; max-width: none; }
.leistungen-social .ld-prozess-phase-visual svg { width: 100%; height: 100%; display: block; }
.leistungen-social .ld-prozess-phase-visual figcaption { margin-top: 0.5rem; font-family: var(--font-mono);
    font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--link); text-align: center; }
.leistungen-social .sm-v-box { fill: var(--surface); stroke: var(--tdeco); stroke-width: 1.4; }
.leistungen-social .sm-v-line { stroke: var(--tdeco); stroke-width: 1.4; fill: none; }
.leistungen-social .sm-v-fill { fill: var(--t1); opacity: 0.12; }
.leistungen-social .sm-v-accent { fill: var(--accent); }

/* 01 STRATEGIE — Zielgruppe konvergiert auf die Mitte */
.vis-sm-strategie .sm-aud { fill: var(--t2); transform-box: fill-box; transform-origin: center; opacity: 0; animation: sm-aud 5.5s ease-in-out infinite; }
.vis-sm-strategie .a2 { animation-delay: 0.4s; } .vis-sm-strategie .a3 { animation-delay: 0.8s; } .vis-sm-strategie .a4 { animation-delay: 1.2s; }
@keyframes sm-aud { 0% { opacity: 0; transform: translate(var(--dx),var(--dy)) scale(0.5); } 18% { opacity: 1; } 55%,82% { opacity: 1; transform: translate(0,0) scale(1); } 100% { opacity: 0; } }
.vis-sm-strategie .sm-bull { transform-box: fill-box; transform-origin: center; animation: sm-bull 5.5s ease-in-out infinite; }
@keyframes sm-bull { 0%,50% { transform: scale(1); opacity: 0.55; } 60% { transform: scale(1.5); opacity: 1; } 75%,100% { transform: scale(1); opacity: 0.55; } }

/* 02 TEMPLATE — Frames poppen, CI-Bar wischt durch */
.vis-sm-template .sm-frame { transform-box: fill-box; transform-origin: center; opacity: 0; animation: sm-frame 6s ease-in-out infinite; }
.vis-sm-template .f2 { animation-delay: 0.4s; } .vis-sm-template .f3 { animation-delay: 0.8s; }
@keyframes sm-frame { 0%,6% { opacity: 0; transform: scale(0.7); } 18%,90% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }
.vis-sm-template .sm-ci-bar { opacity: 0; animation: sm-ci 6s ease-in-out infinite; }
@keyframes sm-ci { 0%,28% { opacity: 0; transform: translateY(0); } 36% { opacity: 0.9; } 64% { opacity: 0.9; transform: translateY(44px); } 74%,100% { opacity: 0; } }

/* 03 CONTENT — Play pulst, Batch-Thumbnails poppen */
.vis-sm-content .sm-thumb { opacity: 0; transform-box: fill-box; transform-origin: center; animation: sm-thumb 5.5s ease-in-out infinite; }
.vis-sm-content .h2 { animation-delay: 0.5s; } .vis-sm-content .h3 { animation-delay: 1s; }
@keyframes sm-thumb { 0%,8% { opacity: 0; transform: scale(0.5); } 18% { opacity: 1; transform: scale(1.1); } 26%,88% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }
.vis-sm-content .sm-play { transform-box: fill-box; transform-origin: center; animation: sm-play 2.4s ease-in-out infinite; }
@keyframes sm-play { 0%,100% { transform: scale(1); opacity: 0.9; } 50% { transform: scale(1.16); opacity: 1; } }

/* 04 ÜBERGABE — Asset-Stack rein, Kalender füllt, grünes Badge */
.vis-sm-handover .sm-asset { opacity: 0; animation: sm-asset 6.5s ease-in-out infinite; }
.vis-sm-handover .as2 { animation-delay: 0.25s; } .vis-sm-handover .as3 { animation-delay: 0.5s; }
@keyframes sm-asset { 0%,6% { opacity: 0; transform: translateY(8px); } 18%,90% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; } }
.vis-sm-handover .sm-cell { opacity: 0.18; animation: sm-cell 6.5s steps(1) infinite; }
.vis-sm-handover .c2 { animation-delay: 0.3s; } .vis-sm-handover .c3 { animation-delay: 0.6s; } .vis-sm-handover .c4 { animation-delay: 0.9s; }
@keyframes sm-cell { 0%,30% { opacity: 0.18; } 45%,90% { opacity: 0.85; } 100% { opacity: 0.18; } }
.vis-sm-handover .sm-badge { opacity: 0; transform-box: fill-box; transform-origin: center; animation: sm-badge 6.5s ease-in-out infinite; }
@keyframes sm-badge { 0%,60% { opacity: 0; transform: scale(0.6); } 70% { opacity: 1; transform: scale(1.18); } 80%,92% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
    .leistungen-social [class*="vis-sm-"] * { animation: none !important; opacity: 1 !important; transform: none !important; }
}