/* ════════════════════════════════════════════════════════════════
   LEISTUNGEN · SATZ & EDITORIAL — Timeline-Phasen-Animationen
   (Mechanik identisch zu leistungen-grafikdesign-anim.css)
   ════════════════════════════════════════════════════════════════ */

/* ─── Visual-Wrapper innerhalb Timeline-Steps ─── */
.ld-prozess-phase-visual {
    margin: 1.5rem 0 0;
    max-width: 100%;
    padding: 0.5rem;
    background: var(--surface, rgba(255, 255, 255, 0.02));
    border: 1px solid var(--border, rgba(127, 127, 127, 0.15));
    border-radius: 6px;
}
.ld-prozess-phase-visual .se-visual {
    width: 100%;
    aspect-ratio: 1;
    max-width: none;
}
.ld-prozess-phase-visual svg { width: 100%; height: 100%; display: block; }
.ld-prozess-phase-visual figcaption {
    margin-top: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--link);
    text-align: center;
}

/* ═══════════ PHASE 01: Manuskript & Material → Festpreis ═══════════ */
.vis-se-manu .manu-doc { opacity: 0; animation: se-fade 10s ease-in-out infinite; }
.vis-se-manu .manu-line { opacity: 0; animation: se-fade 10s ease-in-out infinite; }
.vis-se-manu .ml-1 { animation-delay: 0.8s; }
.vis-se-manu .ml-2 { animation-delay: 1.1s; }
.vis-se-manu .ml-3 { animation-delay: 1.4s; }
.vis-se-manu .ml-4 { animation-delay: 1.7s; }
.vis-se-manu .ml-5 { animation-delay: 2.0s; }
.vis-se-manu .manu-foto { opacity: 0; animation: se-fade 10s ease-in-out infinite; }
.vis-se-manu .mf-1 { animation-delay: 2.6s; }
.vis-se-manu .mf-2 { animation-delay: 3.0s; }
.vis-se-manu .manu-arrow { stroke-dasharray: 60; stroke-dashoffset: 60; animation: se-draw 10s ease-in-out infinite; animation-delay: 3.6s; }
.vis-se-manu .manu-badge { opacity: 0; transform-origin: center; transform-box: fill-box; animation: se-badge 10s ease-in-out infinite; }

/* ═══════════ PHASE 02: Satzspiegel & Musterseiten ═══════════ */
.vis-se-spiegel .sp-page { opacity: 0; animation: se-fade 10s ease-in-out infinite; }
.vis-se-spiegel .sp-frame { stroke-dasharray: 800; stroke-dashoffset: 800; animation: se-draw-long 10s ease-in-out infinite; animation-delay: 1s; }
.vis-se-spiegel .sp-base { opacity: 0; animation: se-fade 10s ease-in-out infinite; }
.vis-se-spiegel .sb-1 { animation-delay: 3.2s; }
.vis-se-spiegel .sb-2 { animation-delay: 3.5s; }
.vis-se-spiegel .sb-3 { animation-delay: 3.8s; }
.vis-se-spiegel .sb-4 { animation-delay: 4.1s; }
.vis-se-spiegel .sb-5 { animation-delay: 4.4s; }
.vis-se-spiegel .sb-6 { animation-delay: 4.7s; }
.vis-se-spiegel .sp-tag { opacity: 0; animation: se-late 10s ease-in-out infinite; }

/* ═══════════ PHASE 03: Umbruch & PDF-Kommentare ═══════════ */
.vis-se-umbruch .um-spread { opacity: 0; animation: se-fade 12s ease-in-out infinite; }
.vis-se-umbruch .um-line { opacity: 0; animation: se-fade 12s ease-in-out infinite; }
.vis-se-umbruch .ul-1 { animation-delay: 1.0s; }
.vis-se-umbruch .ul-2 { animation-delay: 1.3s; }
.vis-se-umbruch .ul-3 { animation-delay: 1.6s; }
.vis-se-umbruch .ul-4 { animation-delay: 1.9s; }
.vis-se-umbruch .ul-5 { animation-delay: 2.2s; }
.vis-se-umbruch .ul-6 { animation-delay: 2.5s; }
.vis-se-umbruch .ul-7 { animation-delay: 2.8s; }
.vis-se-umbruch .ul-8 { animation-delay: 3.1s; }
.vis-se-umbruch .um-comment { opacity: 0; transform-origin: center; transform-box: fill-box; animation: se-comment 12s ease-in-out infinite; }
.vis-se-umbruch .um-fixline { opacity: 0; animation: se-fixline 12s ease-in-out infinite; }
@keyframes se-comment {
    0%, 38%  { opacity: 0; transform: scale(0.6); }
    44%      { opacity: 1; transform: scale(1.1); }
    48%, 70% { opacity: 1; transform: scale(1); }
    76%, 100%{ opacity: 0; transform: scale(0.9); }
}
@keyframes se-fixline {
    0%, 72%  { opacity: 0; }
    80%, 94% { opacity: 1; }
    100%     { opacity: 0; }
}

/* ═══════════ PHASE 04: Druckvorstufe — Marken, Farbbalken, PDF/X ═══════════ */
.vis-se-pdfx .px-page { opacity: 0; animation: se-fade 10s ease-in-out infinite; }
.vis-se-pdfx .px-mark { stroke-dasharray: 30; stroke-dashoffset: 30; animation: se-draw 10s ease-in-out infinite; }
.vis-se-pdfx .pm-1 { animation-delay: 1.2s; }
.vis-se-pdfx .pm-2 { animation-delay: 1.5s; }
.vis-se-pdfx .pm-3 { animation-delay: 1.8s; }
.vis-se-pdfx .pm-4 { animation-delay: 2.1s; }
.vis-se-pdfx .px-bar { opacity: 0; animation: se-fade 10s ease-in-out infinite; }
.vis-se-pdfx .pb-c { animation-delay: 3.0s; }
.vis-se-pdfx .pb-m { animation-delay: 3.2s; }
.vis-se-pdfx .pb-y { animation-delay: 3.4s; }
.vis-se-pdfx .pb-k { animation-delay: 3.6s; }
.vis-se-pdfx .px-badge { opacity: 0; transform-origin: center; transform-box: fill-box; animation: se-badge 10s ease-in-out infinite; }

/* ─── gemeinsame Keyframes ─── */
@keyframes se-fade { 0%, 8%{opacity:0} 16%{opacity:1} 92%{opacity:1} 100%{opacity:0} }
@keyframes se-draw { 0%, 20%{stroke-dashoffset:30} 40%{stroke-dashoffset:0} 92%{stroke-dashoffset:0} 100%{stroke-dashoffset:30} }
@keyframes se-draw-long { 0%, 12%{stroke-dashoffset:800} 34%{stroke-dashoffset:0} 92%{stroke-dashoffset:0} 100%{stroke-dashoffset:800} }
@keyframes se-late { 0%, 52%{opacity:0} 60%, 92%{opacity:1} 100%{opacity:0} }
@keyframes se-badge {
    0%, 48%  { opacity: 0; transform: scale(0.6); }
    56%      { opacity: 1; transform: scale(1.15); }
    62%, 92% { opacity: 1; transform: scale(1); }
    100%     { opacity: 0; transform: scale(0.8); }
}

/* Reduced-Motion: alles statisch sichtbar */
@media (prefers-reduced-motion: reduce) {
    .vis-se-manu *, .vis-se-spiegel *, .vis-se-umbruch *, .vis-se-pdfx * {
        animation: none !important;
    }
    .vis-se-manu .manu-doc, .vis-se-manu .manu-line, .vis-se-manu .manu-foto, .vis-se-manu .manu-badge,
    .vis-se-spiegel .sp-page, .vis-se-spiegel .sp-base, .vis-se-spiegel .sp-tag,
    .vis-se-umbruch .um-spread, .vis-se-umbruch .um-line, .vis-se-umbruch .um-comment, .vis-se-umbruch .um-fixline,
    .vis-se-pdfx .px-page, .vis-se-pdfx .px-bar, .vis-se-pdfx .px-badge {
        opacity: 1 !important;
    }
    .vis-se-manu .manu-arrow, .vis-se-spiegel .sp-frame, .vis-se-pdfx .px-mark {
        stroke-dashoffset: 0 !important;
    }
}