/* ============================================================================
   po_page_explainer.css – Universelles Seiten-Onboarding/Briefing-Modal
   Enterprise-Look, respektvoll (ESC, Skip, "Nicht mehr zeigen").
   ============================================================================ */

.po-explainer-overlay {
    position: fixed;
    inset: 0;
    /* 2026-04-30: Z-Index auf 100000 erhoeht (war 10060). Explainer-Modal ist
       per Definition "topmost" — ein Onboarding/Tutorial-Layer der ueber
       jedem anderen Modal liegen muss. Insbesondere ueber dem BMD-Dialog
       (z-index: 99990) und anderen Stage-Dialogen die in den 10000er+ Range
       gehen. Sonst wird der Explainer unsichtbar hinter dem aufrufenden
       Modal gerendert. */
    z-index: 100000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.po-explainer-overlay.is-visible {
    display: flex;
    opacity: 1;
}

.po-explainer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.po-explainer-modal {
    position: relative;
    width: 100%;
    /* 2026-04-24 v3: 720 -> 900px (Desktop-only, 1920 HD Min-Spec).
       FIXED height 680px: Header ~64 + Body 544 + Footer 72.
       Kein Grow/Shrink beim Slide-Wechsel — der Body scrollt intern, wenn
       ein Step (ausnahmsweise) mehr Content hätte. */
    max-width: 900px;
    height: 680px;
    max-height: 95vh;
    font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: #f4f7fb;
    color: var(--po-text-primary, #0f172a);
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 18px;
    box-shadow:
        0 24px 48px rgba(15, 23, 42, 0.22),
        0 10px 20px rgba(15, 23, 42, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.84);
    overflow: hidden;
    transform: translateY(8px) scale(0.98);
    transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
    display: flex;
    flex-direction: column;
}
.po-explainer-overlay.is-visible .po-explainer-modal {
    transform: translateY(0) scale(1);
}

/* ----- Header (Delivery-Dialog-Shell: hell, Icon-Kachel, Subline) -------- */
.po-explainer-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 22px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96));
    border-bottom: 1px solid rgba(203, 213, 225, 0.78);
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.045);
}
.po-explainer-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1;
}
.po-explainer-header-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 10px;
    font-size: 17px;
    color: #fff;
    background: linear-gradient(135deg, var(--po-accent, #5b9bd5), var(--po-accent-dark, #4178be));
}
.po-explainer-header-text {
    min-width: 0;
    flex: 1;
}
.po-explainer-header-title {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--po-text-primary, #0f172a);
    line-height: 1.25;
}
.po-explainer-header-subtitle {
    margin: 2px 0 0;
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--po-text-muted, #64748b);
}
.po-explainer-header-subtitle[hidden] {
    display: none;
}

.po-explainer-close {
    position: static;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--po-bg-primary, #fff);
    color: var(--po-text-muted, #64748b);
    border: 1px solid var(--po-border, #e2e8f0);
    border-radius: 999px;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.16s ease;
    z-index: 2;
}
.po-explainer-close:hover {
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.25);
    background: rgba(239, 68, 68, 0.08);
    transform: none;
}

/* ----- Body / Slides ----------------------------------------------------- */
.po-explainer-body {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    padding: 22px 26px 20px;
    overflow-y: auto;
    scrollbar-gutter: stable;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 68%, #f8fafc 100%);
}
.po-explainer-slides {
    position: relative;
    /* Füllt den verfügbaren Body-Raum, damit absolute-positionierte Slides
       (inset: 0) immer dieselbe Größe haben und nicht durchs Content
       springen. */
    height: 100%;
    min-height: 440px;
}

/* v4 (2026-04-24): Slide-Wechsel ist jetzt ein reiner Cross-Fade ohne
   horizontale Translation. v16 (2026-05-23): is-active bleibt position:absolute
   (inset:0) — nur Opacity/Z-Index wechseln, kein Reflow durch relative im Flow. */
.po-explainer-slide {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
    opacity: 0;
    transform: scale(0.985);
    transition: opacity 0.28s ease-out, transform 0.28s ease-out;
    box-sizing: border-box;
    overflow: hidden;
}
.po-explainer-slide.is-active {
    position: absolute;
    inset: 0;
    opacity: 1;
    transform: scale(1);
    z-index: 2;
}
.po-explainer-slide.is-enter {
    position: absolute;
    opacity: 0;
    transform: scale(0.985);
}
.po-explainer-slide.is-exit {
    position: absolute;
    opacity: 0;
    transform: scale(1);
    z-index: 1;
}

/* 2026-04-24 v2/v3: Prominenter Illustration-Slot. Pro Slide eine thematische,
   rein CSS-basierte Animation. In v3 auf 560x220 erweitert, passend zur
   neuen 900px-Modal-Breite — gibt AI-DMS (Doc + Brain + Tags) horizontal
   genug Platz und wirkt weniger "eng" bei Isolation/Graph. */
.po-explainer-illustration {
    position: relative;
    width: 100%;
    max-width: 560px;
    height: 220px;
    margin: 4px auto 12px;
    border-radius: 18px;
    /* v4: PO-Blau (#5B9BD5) als primärer Akzent, Cyan (#0ea5e9) als Sekundär. */
    background:
        radial-gradient(circle at 30% 20%, rgba(91, 155, 213, 0.14) 0%, transparent 55%),
        radial-gradient(circle at 75% 80%, rgba(14, 165, 233, 0.12) 0%, transparent 55%),
        linear-gradient(135deg, rgba(91, 155, 213, 0.05) 0%, rgba(65, 120, 190, 0.08) 100%);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Fallback-Icon wenn ein Slide keine Animation definiert — bleibt zentriert
   im neuen Illustration-Slot und skaliert etwas größer. */
.po-explainer-slide-icon {
    width: 88px;
    height: 88px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(91, 155, 213, 0.18) 0%, rgba(65, 120, 190, 0.24) 100%);
    color: var(--po-accent, #5B9BD5);
    border-radius: 22px;
    font-size: 38px;
}

.po-explainer-slide-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--po-text-primary, #0f172a);
    line-height: 1.25;
    letter-spacing: -0.01em;
    padding: 0 8px;
    margin: 0;
    text-align: center;
}

.po-explainer-slide-body {
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--po-text-secondary, #475569);
    /* v11 (2026-04-25): max-width 540px -> 100% —
       bei 900px Dialog-Breite wird die komplette Textfläche genutzt
       (statt vorher nur 540px), damit lange Bullets wie der Ultra-Tier-
       Satz weniger Zeilenumbrüche haben und die Breite besser nutzen. */
    max-width: 100%;
    padding: 0 8px;
}
.po-explainer-slide-body b,
.po-explainer-slide-body strong {
    color: var(--po-text-primary, #0f172a);
    font-weight: 600;
}
.po-explainer-slide-body ul {
    text-align: left;
    margin: 8px 0 0 0;
    padding-left: 18px;
}
.po-explainer-slide-body li {
    margin: 4px 0;
}

/* ── EXPLAINER-SLIDE-LAYOUT-STANDARD (SOT: Illustration ≤260px, Hero zentriert, Copy-Spalte links) ─ */
.po-explainer-overlay[data-po-explainer-layout="standard"],
.po-explainer-slide.po-explainer-slide--layout-standard {
    --po-ex-copy-column-max: 800px;
    /* Textflucht: 3px Akzent + 12px Abstand (Kontrast, Listen-Balken, Schluss gleiche Kante) */
    --po-ex-copy-text-inset: 15px;
    --po-ex-title-margin-bottom: 20px;
    /* Feste Zonen — Wrapper-Geometrie bleibt bei jedem Slide identisch (nur Inhalt wechselt) */
    --po-ex-ill-slot-h: 260px;
    --po-ex-title-slot-h: 68px;
    --po-ex-body-slot-min-h: 0px;
    --po-ex-copy-panel-min-h: 0px;
    --po-ex-zone-gap: 12px;
}
/* 3-Zeilen-Grid: Illustration | Slogan | Explainer-Panel — kein content-driven Flex-Jitter */
.po-explainer-overlay[data-po-explainer-layout="standard"] .po-explainer-slide,
.po-explainer-slide.po-explainer-slide--layout-standard {
    display: grid;
    grid-template-rows: var(--po-ex-ill-slot-h) var(--po-ex-title-slot-h) minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr);
    gap: var(--po-ex-zone-gap);
    align-items: stretch;
    justify-items: center;
    align-content: start;
}
.po-explainer-overlay[data-po-explainer-layout="standard"] .po-explainer-slide .po-explainer-illustration,
.po-explainer-slide.po-explainer-slide--layout-standard .po-explainer-illustration {
    grid-row: 1;
    align-self: stretch;
    justify-self: center;
    width: 100%;
    max-width: var(--po-ex-copy-column-max);
    height: 100%;
    min-height: 0;
    max-height: var(--po-ex-ill-slot-h);
    margin: 0;
    background: transparent;
    border: none;
    box-shadow: none;
}
.po-explainer-overlay[data-po-explainer-layout="standard"] .po-explainer-slide-title,
.po-explainer-slide.po-explainer-slide--layout-standard .po-explainer-slide-title {
    grid-row: 2;
    align-self: stretch;
    justify-self: center;
    width: 100%;
    max-width: var(--po-ex-copy-column-max);
    height: 100%;
    min-height: 0;
    max-height: var(--po-ex-title-slot-h);
    margin: 0;
    padding: 0 8px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
}
.po-explainer-overlay[data-po-explainer-layout="standard"] .po-explainer-slide-body,
.po-explainer-slide.po-explainer-slide--layout-standard .po-explainer-slide-body {
    grid-row: 3;
    align-self: stretch;
    justify-self: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: var(--po-ex-copy-column-max);
    min-height: 0;
    height: 100%;
    margin: 0;
    padding: 0 8px;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
}
/* Keine zweite Headline im Body — nur step.title (.po-explainer-slide-title) */
.po-explainer-overlay[data-po-explainer-layout="standard"] .po-explainer-slide-body .po-ex-slide-lead,
.po-explainer-overlay[data-po-explainer-layout="standard"] .po-explainer-slide-body .po-ex-legacy-lead,
.po-explainer-slide.po-explainer-slide--layout-standard .po-explainer-slide-body .po-ex-slide-lead,
.po-explainer-slide.po-explainer-slide--layout-standard .po-explainer-slide-body .po-ex-legacy-lead {
    display: none !important;
}
.po-explainer-overlay[data-po-explainer-layout="standard"] .po-explainer-slide-body .po-ex-slide-copy,
.po-explainer-overlay[data-po-explainer-layout="standard"] .po-explainer-slide-body .po-ex-legacy-copy,
.po-explainer-slide.po-explainer-slide--layout-standard .po-explainer-slide-body .po-ex-slide-copy,
.po-explainer-slide.po-explainer-slide--layout-standard .po-explainer-slide-body .po-ex-legacy-copy {
    display: block;
    width: 100%;
    max-width: var(--po-ex-copy-column-max);
    min-height: 0;
    margin: 0 auto;
    padding: 18px 18px 16px;
    text-align: left;
    box-sizing: border-box;
    border-radius: 16px;
    background: #fff;
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-left: 3px solid rgba(91, 155, 213, 0.42);
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.045);
}
.po-explainer-overlay[data-po-explainer-layout="standard"] .po-explainer-slide-body .po-ex-slide-copy p,
.po-explainer-overlay[data-po-explainer-layout="standard"] .po-explainer-slide-body .po-ex-slide-copy ul,
.po-explainer-overlay[data-po-explainer-layout="standard"] .po-explainer-slide-body .po-ex-legacy-copy p,
.po-explainer-overlay[data-po-explainer-layout="standard"] .po-explainer-slide-body .po-ex-legacy-copy ul,
.po-explainer-slide.po-explainer-slide--layout-standard .po-explainer-slide-body .po-ex-slide-copy p,
.po-explainer-slide.po-explainer-slide--layout-standard .po-explainer-slide-body .po-ex-slide-copy ul,
.po-explainer-slide.po-explainer-slide--layout-standard .po-explainer-slide-body .po-ex-legacy-copy p,
.po-explainer-slide.po-explainer-slide--layout-standard .po-explainer-slide-body .po-ex-legacy-copy ul {
    text-align: left;
}
.po-explainer-overlay[data-po-explainer-layout="standard"] .po-explainer-slide-body .po-ex-slide-contrast,
.po-explainer-overlay[data-po-explainer-layout="standard"] .po-explainer-slide-body .po-ex-legacy-contrast,
.po-explainer-slide.po-explainer-slide--layout-standard .po-explainer-slide-body .po-ex-slide-contrast,
.po-explainer-slide.po-explainer-slide--layout-standard .po-explainer-slide-body .po-ex-legacy-contrast {
    margin: 0 0 8px;
    padding: 0 0 0 calc(var(--po-ex-copy-text-inset) - 3px);
    border-left: 3px solid rgba(91, 155, 213, 0.55);
}
.po-explainer-overlay[data-po-explainer-layout="standard"] .po-explainer-slide-body .po-ex-slide-close,
.po-explainer-overlay[data-po-explainer-layout="standard"] .po-explainer-slide-body .po-ex-legacy-close,
.po-explainer-slide.po-explainer-slide--layout-standard .po-explainer-slide-body .po-ex-slide-close,
.po-explainer-slide.po-explainer-slide--layout-standard .po-explainer-slide-body .po-ex-legacy-close {
    margin: 8px 0 0;
    padding: 0 0 0 var(--po-ex-copy-text-inset);
}
.po-explainer-overlay[data-po-explainer-layout="standard"] .po-explainer-slide-body .po-ex-slide-copy ul,
.po-explainer-overlay[data-po-explainer-layout="standard"] .po-explainer-slide-body .po-ex-legacy-copy ul,
.po-explainer-slide.po-explainer-slide--layout-standard .po-explainer-slide-body .po-ex-slide-copy ul,
.po-explainer-slide.po-explainer-slide--layout-standard .po-explainer-slide-body .po-ex-legacy-copy ul {
    margin: 0 0 4px;
    padding: 0;
    list-style: none;
}
.po-explainer-overlay[data-po-explainer-layout="standard"] .po-explainer-slide-body .po-ex-slide-copy li,
.po-explainer-overlay[data-po-explainer-layout="standard"] .po-explainer-slide-body .po-ex-legacy-copy li,
.po-explainer-slide.po-explainer-slide--layout-standard .po-explainer-slide-body .po-ex-slide-copy li,
.po-explainer-slide.po-explainer-slide--layout-standard .po-explainer-slide-body .po-ex-legacy-copy li {
    margin: 5px 0;
    padding: 0 0 0 calc(var(--po-ex-copy-text-inset) - 3px);
    border-left: 3px solid rgba(91, 155, 213, 0.55);
    list-style: none;
}
/* Standard-Grid schlägt per-Animation gap/margin-Overrides (Programm-Intro: keine Zonen-Verschiebung) */
.po-explainer-overlay[data-po-explainer-layout="standard"] .po-explainer-slide:has(.po-explainer-anim--paperoffice-heritage),
.po-explainer-overlay[data-po-explainer-layout="standard"] .po-explainer-slide:has(.po-explainer-anim--paperoffice-legacy),
.po-explainer-overlay[data-po-explainer-layout="standard"] .po-explainer-slide:has(.po-explainer-anim--paperoffice-partners),
.po-explainer-overlay[data-po-explainer-layout="standard"] .po-explainer-slide:has(.po-explainer-anim--paperoffice-layers),
.po-explainer-overlay[data-po-explainer-layout="standard"] .po-explainer-slide:has(.po-explainer-anim--paperoffice-arch-stack),
.po-explainer-overlay[data-po-explainer-layout="standard"] .po-explainer-slide:has(.po-explainer-anim--ai-dms),
.po-explainer-overlay[data-po-explainer-layout="standard"] .po-explainer-slide:has(.po-explainer-anim--api-queue-flow),
.po-explainer-overlay[data-po-explainer-layout="standard"] .po-explainer-slide:has(.po-explainer-anim--billing-credits),
.po-explainer-overlay[data-po-explainer-layout="standard"] .po-explainer-slide:has(.po-explainer-anim--paperoffice-mount),
.po-explainer-overlay[data-po-explainer-layout="standard"] .po-explainer-slide:has(.po-explainer-anim--processing-flow),
.po-explainer-overlay[data-po-explainer-layout="standard"] .po-explainer-slide:has(.po-ex-aidms-tour-stage),
.po-explainer-overlay[data-po-explainer-layout="standard"] .po-explainer-slide:has(.po-ex-api-tour-stage),
.po-explainer-overlay[data-po-explainer-layout="standard"] .po-explainer-slide:has(.po-ex-bill-tour-stage),
.po-explainer-overlay[data-po-explainer-layout="standard"] .po-explainer-slide:has(.po-ex-mount-stage--tour),
.po-explainer-overlay[data-po-explainer-layout="standard"] .po-explainer-slide:has(.po-ex-proc-tour-stage),
.po-explainer-overlay[data-po-explainer-layout="standard"] .po-explainer-slide:has(.po-ex-superbrain-stage--hitl),
.po-explainer-overlay[data-po-explainer-layout="standard"] .po-explainer-slide:has(.po-explainer-anim--paperoffice-mcp-claude),
.po-explainer-overlay[data-po-explainer-layout="standard"] .po-explainer-slide:has(.po-explainer-anim--paperoffice-mcp-chatgpt),
.po-explainer-overlay[data-po-explainer-layout="standard"] .po-explainer-slide:has(.po-explainer-anim--paperoffice-superbrain),
.po-explainer-slide.po-explainer-slide--layout-standard:has(.po-explainer-anim--paperoffice-heritage),
.po-explainer-slide.po-explainer-slide--layout-standard:has(.po-explainer-anim--paperoffice-legacy),
.po-explainer-slide.po-explainer-slide--layout-standard:has(.po-explainer-anim--paperoffice-partners),
.po-explainer-slide.po-explainer-slide--layout-standard:has(.po-explainer-anim--paperoffice-layers),
.po-explainer-slide.po-explainer-slide--layout-standard:has(.po-explainer-anim--paperoffice-arch-stack),
.po-explainer-slide.po-explainer-slide--layout-standard:has(.po-explainer-anim--ai-dms),
.po-explainer-slide.po-explainer-slide--layout-standard:has(.po-explainer-anim--api-queue-flow),
.po-explainer-slide.po-explainer-slide--layout-standard:has(.po-explainer-anim--billing-credits),
.po-explainer-slide.po-explainer-slide--layout-standard:has(.po-explainer-anim--paperoffice-mount),
.po-explainer-slide.po-explainer-slide--layout-standard:has(.po-explainer-anim--processing-flow),
.po-explainer-slide.po-explainer-slide--layout-standard:has(.po-ex-aidms-tour-stage),
.po-explainer-slide.po-explainer-slide--layout-standard:has(.po-ex-api-tour-stage),
.po-explainer-slide.po-explainer-slide--layout-standard:has(.po-ex-bill-tour-stage),
.po-explainer-slide.po-explainer-slide--layout-standard:has(.po-ex-mount-stage--tour),
.po-explainer-slide.po-explainer-slide--layout-standard:has(.po-ex-proc-tour-stage),
.po-explainer-slide.po-explainer-slide--layout-standard:has(.po-ex-superbrain-stage--hitl),
.po-explainer-slide.po-explainer-slide--layout-standard:has(.po-explainer-anim--paperoffice-mcp-claude),
.po-explainer-slide.po-explainer-slide--layout-standard:has(.po-explainer-anim--paperoffice-mcp-chatgpt),
.po-explainer-slide.po-explainer-slide--layout-standard:has(.po-explainer-anim--paperoffice-superbrain) {
    gap: var(--po-ex-zone-gap);
}
.po-explainer-overlay[data-po-explainer-layout="standard"] .po-explainer-slide:has(.po-explainer-anim--paperoffice-heritage) .po-explainer-illustration,
.po-explainer-overlay[data-po-explainer-layout="standard"] .po-explainer-slide:has(.po-explainer-anim--paperoffice-legacy) .po-explainer-illustration,
.po-explainer-slide.po-explainer-slide--layout-standard:has(.po-explainer-anim--paperoffice-heritage) .po-explainer-illustration,
.po-explainer-slide.po-explainer-slide--layout-standard:has(.po-explainer-anim--paperoffice-legacy) .po-explainer-illustration {
    height: 100%;
    max-height: var(--po-ex-ill-slot-h);
    margin: 0;
}
.po-explainer-overlay[data-po-explainer-layout="standard"] .po-explainer-slide:has(.po-explainer-anim--paperoffice-legacy) .po-explainer-slide-body .po-ex-legacy-copy,
.po-explainer-slide.po-explainer-slide--layout-standard:has(.po-explainer-anim--paperoffice-legacy) .po-explainer-slide-body .po-ex-legacy-copy {
    margin: 0 auto;
}
@media (prefers-reduced-motion: no-preference) {
    .po-explainer-overlay[data-po-explainer-layout="standard"] .po-explainer-slide:has(.po-explainer-anim--paperoffice-legacy) .po-explainer-slide-body .po-ex-legacy-copy,
    .po-explainer-slide.po-explainer-slide--layout-standard:has(.po-explainer-anim--paperoffice-legacy) .po-explainer-slide-body .po-ex-legacy-copy {
        animation: po-ex-legacy-body-fade 0.45s ease-out forwards;
    }
}
@keyframes po-ex-legacy-body-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}
/* Titel immer zentriert (Copy/Body bleibt links — auch bei Payout/KYC-Slides mit text-align:left am Body) */
.po-explainer-overlay .po-explainer-slide .po-explainer-slide-title {
    text-align: center;
}
/* Origin-Variante: Body-Spalte wie Heritage (nur wenn nicht bereits durch Heritage-Block gesetzt) */
.po-explainer-overlay[data-po-explainer-layout="standard"] .po-explainer-slide:has(.po-explainer-anim--paperoffice-origin):not(:has(.po-explainer-anim--paperoffice-heritage)) .po-explainer-slide-body {
    width: var(--po-ex-copy-column-max, 800px);
    max-width: 100%;
    align-self: center;
}

/* v14 (2026-04-25): Dokumenttypen-Slides brauchen mehr Abstand zwischen
   Illustration und Text. Die Animationen sind bewusst kompakter als der
   generische 220px-Slot, damit Titel und Bullets nicht optisch in den
   Animationsbereich laufen. */
.po-explainer-slide:has(.po-explainer-anim--doc-types) .po-explainer-illustration,
.po-explainer-slide:has(.po-explainer-anim--zero-shot-idp) .po-explainer-illustration,
.po-explainer-slide:has(.po-explainer-anim--doc-rules) .po-explainer-illustration,
.po-explainer-slide:has(.po-explainer-anim--doc-library) .po-explainer-illustration,
.po-explainer-slide:has(.po-explainer-anim--jurisdiction) .po-explainer-illustration,
.po-explainer-slide:has(.po-explainer-anim--retention) .po-explainer-illustration {
    height: 190px;
    margin-top: 0;
    margin-bottom: 20px;
}
.po-explainer-slide:has(.po-explainer-anim--doc-types),
.po-explainer-slide:has(.po-explainer-anim--zero-shot-idp),
.po-explainer-slide:has(.po-explainer-anim--doc-rules),
.po-explainer-slide:has(.po-explainer-anim--doc-library),
.po-explainer-slide:has(.po-explainer-anim--jurisdiction),
.po-explainer-slide:has(.po-explainer-anim--retention) {
    gap: 10px;
}

/* v5/v12: AI-DMS-Step hat 4 Paragraphen + 3 Bullets — Content kompakt halten,
   aber zwischen Einleitung und Tier-Liste genug Luft lassen. Progressive
   Enhancement via :has() — fällt bei älteren Browsern auf Default zurück
   (dann wird einfach gescrollt, kein Breakage). */
.po-explainer-slide:has(.po-explainer-anim--ai-dms) .po-explainer-slide-body {
    line-height: 1.5;
}
.po-explainer-slide:has(.po-explainer-anim--ai-dms) .po-explainer-slide-body ul {
    margin-top: 12px;
}
.po-explainer-slide:has(.po-explainer-anim--ai-dms) .po-explainer-slide-body li {
    margin: 5px 0;
}

/* v10 (2026-04-24): Industries-Step hat 6 Bullets (eine pro Branchen-
   Archetyp) — selbe Kompakt-Behandlung wie AI-DMS, damit die Liste ohne
   Scrollen in die fixe Body-Höhe passt. */
.po-explainer-slide:has(.po-explainer-anim--industries) .po-explainer-slide-body {
    line-height: 1.5;
}
.po-explainer-slide:has(.po-explainer-anim--industries) .po-explainer-slide-body ul {
    margin-top: 4px;
    margin-bottom: 4px;
}
.po-explainer-slide:has(.po-explainer-anim--industries) .po-explainer-slide-body li {
    margin: 2px 0;
}

/* ----- Footer ------------------------------------------------------------ */
/* v4/v13: Kein Footer-Skip (redundant zu X mit Aria „Tour überspringen“).
   Progress links, Actions rechts: Zurück + Weiter/CTA. */
.po-explainer-footer {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 22px;
    border-top: 1px solid rgba(203, 213, 225, 0.82);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(248, 250, 252, 0.98));
    box-shadow: 0 -14px 36px rgba(15, 23, 42, 0.075);
}

.po-explainer-progress {
    flex: 1 1 auto;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.po-explainer-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    background: var(--po-border-strong, #cbd5e1);
    padding: 0;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease, width 0.2s ease;
}
.po-explainer-dot:hover {
    background: var(--po-accent, #5B9BD5);
    transform: scale(1.15);
}
.po-explainer-dot.is-active {
    background: var(--po-accent, #5B9BD5);
    width: 22px;
    border-radius: 4px;
}
.po-explainer-progress-text {
    margin-left: 10px;
    font-size: 11px;
    color: var(--po-text-muted, #64748b);
    font-weight: 500;
    letter-spacing: 0.3px;
}

.po-explainer-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.po-explainer-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 16px;
    font-size: 12px;
    font-weight: 800;
    font-family: inherit;
    border-radius: 10px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.2s ease;
    white-space: nowrap;
}
.po-explainer-btn i { font-size: 11px; }

.po-explainer-btn-ghost {
    background: #fff;
    color: var(--po-text-secondary, #475569);
    border-color: rgba(203, 213, 225, 0.78);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.045);
}
.po-explainer-btn-ghost:hover {
    color: var(--po-accent, #5b9bd5);
    border-color: rgba(91, 155, 213, 0.35);
    background: #f8fafc;
}

.po-explainer-btn-secondary {
    background: #fff;
    color: var(--po-text-secondary, #475569);
    border-color: rgba(203, 213, 225, 0.78);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.045);
}
.po-explainer-btn-secondary:hover:not(:disabled) {
    background: #f8fafc;
    border-color: rgba(91, 155, 213, 0.35);
    color: var(--po-accent, #5b9bd5);
}
.po-explainer-btn-secondary:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.po-explainer-btn-primary {
    min-width: 100px;
    color: #fff;
    background: linear-gradient(135deg, var(--po-accent, #5b9bd5), #2f80c8);
    border-color: transparent;
    box-shadow: 0 12px 26px rgba(91, 155, 213, 0.34);
}
.po-explainer-btn-primary:hover {
    filter: brightness(1.08);
    transform: none;
    box-shadow: 0 12px 26px rgba(91, 155, 213, 0.34);
}

/* Body-Scroll verhindern, wenn offen */
body.po-explainer-open {
    overflow: hidden;
}

/* ============================================================================
   THEMATISCHE CSS-ANIMATIONEN (2026-04-24 v2)
   Jede Animation vermittelt ihr Konzept unmittelbar durch Bewegung/Struktur:
     .po-explainer-anim--isolation → abgeschottete Silos driften auseinander
     .po-explainer-anim--shield    → zentrales Schild + Compliance-Badges
     .po-explainer-anim--tiers     → 3 Sicherheits-Stufen wachsen hoch
     .po-explainer-anim--graph     → zentraler Hub verbindet sich mit Usern
     .po-explainer-anim--rocket    → Rakete + Sterne + Smoke-Trail (CTA)
   Alle Animationen laufen beim Erscheinen des Slides neu, weil _render_step()
   den DOM-Knoten neu erzeugt.
   ============================================================================ */

/* ── 1. PAPEROFFICE-ORIGIN — einmaliger Journey-Kurzfilm ──────────────────
   Akt 1 (0-3s)    Born in Germany: Flagge, Pin, Start 2002
   Akt 2 (3-6s)    Grown in Europe: europäischer Glow und Netzwerkpunkte
   Akt 3 (6-9s)    Trusted worldwide: globale Orbits und weltweite Punkte
   Akt 4 (9-12s)   24 Years since 2002: finaler Zustand bleibt stehen
   Wichtig: keine Wiederholung. Alle Animationen laufen einmal mit forwards. */
.po-explainer-slide:has(.po-explainer-anim--paperoffice-origin) {
    gap: 12px;
}
.po-explainer-slide:has(.po-explainer-anim--paperoffice-origin) .po-explainer-illustration {
    max-width: 680px;
    height: 320px;
    margin-top: 0;
    margin-bottom: 14px;
    border-radius: 22px;
    background:
        radial-gradient(circle at 18% 20%, rgba(91, 155, 213, 0.22), transparent 38%),
        radial-gradient(circle at 82% 78%, rgba(16, 185, 129, 0.18), transparent 38%),
        linear-gradient(135deg, #eff6ff 0%, #f8fafc 50%, #ecfdf5 100%);
    position: relative;
    overflow: hidden;
}
.po-explainer-slide:has(.po-explainer-anim--paperoffice-origin) .po-explainer-slide-body {
    max-width: 600px;
    color: #64748b;
    font-size: 13.5px;
    line-height: 1.55;
}
.po-explainer-anim--paperoffice-origin {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    overflow: hidden;
}
.po-ex-origin-stage {
    position: absolute;
    inset: 0;
}

/* Hintergrund-Grid driftet leicht. */
.po-ex-origin-grid {
    position: absolute;
    inset: 0;
    opacity: 0.45;
    background-image:
        linear-gradient(rgba(91, 155, 213, 0.13) 1px, transparent 1px),
        linear-gradient(90deg, rgba(91, 155, 213, 0.13) 1px, transparent 1px);
    background-size: 36px 36px;
    mask-image: radial-gradient(circle at center, #000 0%, transparent 76%);
    -webkit-mask-image: radial-gradient(circle at center, #000 0%, transparent 76%);
    animation: po-ex-origin-grid 12s linear forwards;
}

/* Sterne / Funken im Hintergrund. */
.po-ex-origin-stars {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.po-ex-origin-stars span {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #fbbf24;
    box-shadow: 0 0 10px rgba(251, 191, 36, 0.7);
    opacity: 0;
    animation: po-ex-origin-twinkle 12s ease-in-out forwards;
}
.po-ex-origin-stars span:nth-child(1)  { left: 8%;  top: 14%; animation-delay: 0.2s; }
.po-ex-origin-stars span:nth-child(2)  { left: 22%; top: 7%;  animation-delay: 1.4s; width: 3px; height: 3px; }
.po-ex-origin-stars span:nth-child(3)  { left: 38%; top: 88%; animation-delay: 2.1s; }
.po-ex-origin-stars span:nth-child(4)  { left: 52%; top: 12%; animation-delay: 0.8s; width: 5px; height: 5px; }
.po-ex-origin-stars span:nth-child(5)  { left: 68%; top: 90%; animation-delay: 1.7s; }
.po-ex-origin-stars span:nth-child(6)  { left: 78%; top: 6%;  animation-delay: 0.4s; width: 3px; height: 3px; }
.po-ex-origin-stars span:nth-child(7)  { left: 88%; top: 22%; animation-delay: 2.3s; }
.po-ex-origin-stars span:nth-child(8)  { left: 92%; top: 80%; animation-delay: 1.1s; width: 4px; height: 4px; }
.po-ex-origin-stars span:nth-child(9)  { left: 14%; top: 78%; animation-delay: 2.8s; }
.po-ex-origin-stars span:nth-child(10) { left: 60%; top: 70%; animation-delay: 0.6s; width: 3px; height: 3px; }

/* Lichtstreif zieht einmal diagonal über die Bühne. */
.po-ex-origin-sweep {
    position: absolute;
    top: -20%;
    bottom: -20%;
    left: -45%;
    width: 60%;
    background: linear-gradient(110deg,
        transparent 0%,
        rgba(255, 255, 255, 0.18) 35%,
        rgba(255, 255, 255, 0.55) 50%,
        rgba(255, 255, 255, 0.18) 65%,
        transparent 100%);
    transform: skewX(-12deg);
    pointer-events: none;
    animation: po-ex-origin-sweep 12s ease-in-out forwards;
}

/* Akt 1 — Born in Germany mit Flaggenstreifen, Pin und Caption. */
.po-ex-origin-de {
    position: absolute;
    left: 32px;
    top: 38px;
    width: 134px;
    opacity: 0;
    transform: translateY(20px) scale(0.88) rotate(-4deg);
    animation: po-ex-origin-de-in 12s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.po-ex-origin-de-card {
    position: relative;
    width: 134px;
    height: 172px;
    border-radius: 22px;
    background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
    border: 1px solid rgba(91, 155, 213, 0.32);
    box-shadow: 0 22px 50px rgba(15, 23, 42, 0.18);
    overflow: hidden;
}
.po-ex-origin-de-flag-black,
.po-ex-origin-de-flag-red,
.po-ex-origin-de-flag-gold {
    position: absolute;
    left: 18px;
    right: 18px;
    height: 30px;
    border-radius: 6px;
    transform: scaleX(0);
    transform-origin: left center;
    animation: po-ex-origin-flag 12s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.po-ex-origin-de-flag-black { top: 24px;  background: #111827; animation-delay: 0s; }
.po-ex-origin-de-flag-red   { top: 62px;  background: #dc2626; animation-delay: 0.18s; }
.po-ex-origin-de-flag-gold  { top: 100px; background: #f59e0b; animation-delay: 0.36s; }
.po-ex-origin-de-pin {
    position: absolute;
    left: 60px;
    top: 70px;
    width: 18px;
    height: 18px;
    border-radius: 999px 999px 999px 0;
    background: #0ea5e9;
    border: 3px solid #ffffff;
    box-shadow: 0 6px 16px rgba(14, 165, 233, 0.55);
    transform: rotate(-45deg) translateY(-30px) scale(0.6);
    opacity: 0;
    animation: po-ex-origin-pin 12s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.po-ex-origin-de-pulse {
    position: absolute;
    left: 50px;
    top: 60px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 2px solid rgba(14, 165, 233, 0.7);
    transform: scale(0);
    opacity: 0;
    animation: po-ex-origin-pulse 12s ease-out forwards;
}
.po-ex-origin-de-caption {
    position: absolute;
    left: -24px;
    right: -24px;
    top: 184px;
    text-align: center;
    color: #1e293b;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0;
    animation: po-ex-origin-caption 12s ease-out forwards;
}

/* Akt 2 + 4 — Hero-Bereich rechts oben. Erst "SEIT 2002", dann "24 years". */
.po-ex-origin-hero {
    position: absolute;
    left: 196px;
    right: 28px;
    top: 34px;
    height: 116px;
}
.po-ex-origin-hero-block {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    opacity: 0;
}
.po-ex-origin-hero-2002 {
    animation: po-ex-origin-hero-2002 12s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.po-ex-origin-hero-yrs {
    animation: po-ex-origin-hero-yrs 12s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.po-ex-origin-hero-since {
    color: #5B9BD5;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.po-ex-origin-hero-year {
    color: #0f172a;
    font-size: 84px;
    font-weight: 900;
    letter-spacing: -0.05em;
    line-height: 1;
    text-shadow: 0 8px 24px rgba(91, 155, 213, 0.18);
}
.po-ex-origin-hero-num {
    display: inline-flex;
    align-items: baseline;
    line-height: 1;
    font-size: 78px;
    font-weight: 900;
    letter-spacing: -0.05em;
}
.po-ex-origin-hero-num b {
    background: linear-gradient(135deg, #5B9BD5, #4178BE);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-weight: 900;
}
.po-ex-origin-hero-num i {
    font-style: normal;
    color: #10b981;
    font-size: 24px;
    margin-left: 8px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.po-ex-origin-hero-label {
    margin-top: 6px;
    color: #475569;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/* Akt 4 — Timeline 2002 ━━━━━━━━━━━ 2026 mit Marker und Milestone-Dots. */
.po-ex-origin-tl {
    position: absolute;
    left: 196px;
    right: 24px;
    top: 168px;
    height: 22px;
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0;
    animation: po-ex-origin-tl-show 12s ease-out forwards;
}
.po-ex-origin-tl-from,
.po-ex-origin-tl-to {
    flex-shrink: 0;
    color: #5B9BD5;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.04em;
}
.po-ex-origin-tl-to {
    color: #10b981;
}
.po-ex-origin-tl-bar {
    position: relative;
    flex: 1 1 auto;
    height: 6px;
}
.po-ex-origin-tl-track {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.28);
}
.po-ex-origin-tl-fill {
    position: absolute;
    inset: 0;
    width: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, #5B9BD5 0%, #0ea5e9 50%, #10b981 100%);
    box-shadow: 0 0 14px rgba(91, 155, 213, 0.45);
    animation: po-ex-origin-tl-fill 12s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
.po-ex-origin-tl-marker {
    position: absolute;
    top: -8px;
    left: 0;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: #ffffff;
    border: 3px solid #5B9BD5;
    box-shadow: 0 0 16px rgba(91, 155, 213, 0.55);
    transform: scale(0);
    animation: po-ex-origin-tl-marker 12s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
.po-ex-origin-tl-dot {
    position: absolute;
    top: -4px;
    width: 14px;
    height: 14px;
    border-radius: 999px;
    background: #ffffff;
    border: 2.5px solid rgba(91, 155, 213, 0.7);
    transform: scale(0);
    opacity: 0;
}
.po-ex-origin-tl-dot-1 { left: 0%;  animation: po-ex-origin-tl-dot 12s ease-out forwards; }
.po-ex-origin-tl-dot-2 { left: 33%; animation: po-ex-origin-tl-dot 12s ease-out forwards; animation-delay: 0.18s; }
.po-ex-origin-tl-dot-3 { left: 66%; animation: po-ex-origin-tl-dot 12s ease-out forwards; animation-delay: 0.36s; }
.po-ex-origin-tl-dot-4 { right: 0%; border-color: #10b981; animation: po-ex-origin-tl-dot 12s ease-out forwards; animation-delay: 0.54s; }

/* Akt 2 — Grown in Europe: Ring-Glow und europäische Netzwerkpunkte. */
.po-ex-origin-europe {
    position: absolute;
    left: 186px;
    top: 58px;
    width: 170px;
    height: 150px;
    opacity: 0;
    transform: translateY(10px) scale(0.86);
    animation: po-ex-origin-europe 12s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.po-ex-origin-europe-ring,
.po-ex-origin-world-orbit {
    position: absolute;
    border-radius: 999px;
    border: 2px solid rgba(91, 155, 213, 0.28);
}
.po-ex-origin-europe-ring-1 {
    inset: 20px 22px 28px 18px;
    background: radial-gradient(circle at 48% 48%, rgba(91, 155, 213, 0.16), transparent 62%);
}
.po-ex-origin-europe-ring-2 {
    inset: 42px 42px 48px 40px;
    border-color: rgba(16, 185, 129, 0.42);
}
.po-ex-origin-europe-dot,
.po-ex-origin-world-dot {
    position: absolute;
    width: 13px;
    height: 13px;
    border-radius: 999px;
    background: #ffffff;
    border: 3px solid #5B9BD5;
    box-shadow: 0 0 14px rgba(91, 155, 213, 0.45);
    opacity: 0;
    transform: scale(0);
    animation: po-ex-origin-network-dot 12s ease-out forwards;
}
.po-ex-origin-europe-dot-1 { left: 72px; top: 44px; animation-delay: 0s; }
.po-ex-origin-europe-dot-2 { left: 48px; top: 82px; animation-delay: 0.12s; }
.po-ex-origin-europe-dot-3 { left: 96px; top: 86px; animation-delay: 0.24s; border-color: #10b981; }
.po-ex-origin-europe-dot-4 { left: 118px; top: 54px; animation-delay: 0.36s; border-color: #0ea5e9; }
.po-ex-origin-europe-caption,
.po-ex-origin-world-caption {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    white-space: nowrap;
    color: #1e293b;
    font-size: 10.5px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Akt 3 — Trusted worldwide: Globus, Orbits und weltweite Punkte. */
.po-ex-origin-world {
    position: absolute;
    right: 36px;
    top: 54px;
    width: 180px;
    height: 160px;
    opacity: 0;
    transform: translateY(12px) scale(0.86);
    animation: po-ex-origin-world 12s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.po-ex-origin-world::before {
    content: "";
    position: absolute;
    left: 38px;
    top: 18px;
    width: 108px;
    height: 108px;
    border-radius: 50%;
    background:
        linear-gradient(90deg, transparent 48%, rgba(91, 155, 213, 0.26) 49%, rgba(91, 155, 213, 0.26) 51%, transparent 52%),
        linear-gradient(0deg, transparent 48%, rgba(91, 155, 213, 0.18) 49%, rgba(91, 155, 213, 0.18) 51%, transparent 52%),
        radial-gradient(circle at 42% 34%, rgba(16, 185, 129, 0.22), transparent 34%),
        radial-gradient(circle at 62% 64%, rgba(91, 155, 213, 0.24), transparent 34%),
        rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(91, 155, 213, 0.34);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
}
.po-ex-origin-world-orbit-1 {
    left: 28px;
    top: 42px;
    width: 126px;
    height: 44px;
    transform: rotate(15deg);
}
.po-ex-origin-world-orbit-2 {
    left: 38px;
    top: 32px;
    width: 104px;
    height: 82px;
    transform: rotate(72deg);
    border-color: rgba(16, 185, 129, 0.32);
}
.po-ex-origin-world-dot-1 { left: 48px;  top: 42px; animation-delay: 0s; }
.po-ex-origin-world-dot-2 { left: 118px; top: 50px; animation-delay: 0.12s; border-color: #10b981; }
.po-ex-origin-world-dot-3 { left: 88px;  top: 94px; animation-delay: 0.24s; }
.po-ex-origin-world-dot-4 { left: 138px; top: 84px; animation-delay: 0.36s; border-color: #f59e0b; }
.po-ex-origin-world-dot-5 { left: 32px;  top: 84px; animation-delay: 0.48s; border-color: #0ea5e9; }

/* Finale — PaperOffice-Logo und Journey-Chips bleiben sichtbar. */
.po-ex-origin-logo {
    position: absolute;
    left: 50%;
    bottom: 28px;
    transform: translateX(-50%) translateY(20px);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(91, 155, 213, 0.28);
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.16);
    opacity: 0;
    animation: po-ex-origin-logo 12s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.po-ex-origin-mark {
    position: relative;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: linear-gradient(135deg, #19c1d4, #0ea5e9);
    transform: rotate(45deg);
    flex-shrink: 0;
}
.po-ex-origin-mark::before,
.po-ex-origin-mark::after {
    content: "";
    position: absolute;
    inset: 5px;
    border: 1.6px solid rgba(255, 255, 255, 0.86);
    border-radius: 3px;
}
.po-ex-origin-mark::after { inset: 9px; }
.po-ex-origin-name {
    color: #1e293b;
    font-size: 20px;
    font-weight: 900;
    letter-spacing: -0.03em;
}

.po-ex-origin-final {
    display: none;
    position: absolute;
    left: 50%;
    bottom: 72px;
    gap: 8px;
    align-items: center;
    justify-content: center;
    transform: translateX(-50%) translateY(12px);
    opacity: 0;
    z-index: 5;
    animation: po-ex-origin-final 12s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.po-ex-origin-final span {
    white-space: nowrap;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(91, 155, 213, 0.24);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.1);
    color: #334155;
    font-size: 10.5px;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* Keyframes (12s, einmalig) — pro Element ein klar definierter Beat. */
@keyframes po-ex-origin-grid {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(36px, 36px, 0); }
}
@keyframes po-ex-origin-twinkle {
    0%, 12%  { opacity: 0; transform: scale(0.6); }
    28%      { opacity: 0.85; transform: scale(1); }
    100%     { opacity: 0.35; transform: scale(0.8); }
}
@keyframes po-ex-origin-sweep {
    0%, 4%   { transform: translateX(-100%) skewX(-12deg); }
    10%, 14% { transform: translateX(280%) skewX(-12deg); }
    100%     { transform: translateX(280%) skewX(-12deg); }
}
@keyframes po-ex-origin-de-in {
    0%, 1%    { opacity: 0; transform: translateY(20px) scale(0.88) rotate(-4deg); }
    8%, 100%  { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}
@keyframes po-ex-origin-flag {
    0%, 4%   { transform: scaleX(0); }
    14%, 80% { transform: scaleX(1); }
    100%     { transform: scaleX(1); }
}
@keyframes po-ex-origin-pin {
    0%, 14%  { opacity: 0; transform: rotate(-45deg) translateY(-30px) scale(0.6); }
    18%      { opacity: 1; transform: rotate(-45deg) translateY(8px) scale(1.1); }
    21%, 100% { opacity: 1; transform: rotate(-45deg) translateY(0) scale(1); }
}
@keyframes po-ex-origin-pulse {
    0%, 18%  { opacity: 0; transform: scale(0); }
    22%      { opacity: 0.7; transform: scale(1); }
    32%      { opacity: 0; transform: scale(1.6); }
    100%     { opacity: 0; transform: scale(1.6); }
}
@keyframes po-ex-origin-caption {
    0%, 18%  { opacity: 0; transform: translateY(4px); }
    24%, 100% { opacity: 1; transform: translateY(0); }
}
/* Hero "SEIT 2002" — Hauptfokus am Anfang, danach zurücknehmen. */
@keyframes po-ex-origin-hero-2002 {
    0%, 21%   { opacity: 0; transform: translateY(14px) scale(0.92); }
    27%       { opacity: 1; transform: translateY(0) scale(1.02); }
    32%, 48%  { opacity: 1; transform: translateY(0) scale(1); }
    58%, 100% { opacity: 0; transform: translateY(-6px) scale(0.96); }
}
/* Hero "24 years" — finaler Hauptfokus. */
@keyframes po-ex-origin-hero-yrs {
    0%, 67%   { opacity: 0; transform: translateY(14px) scale(0.92); }
    75%       { opacity: 1; transform: translateY(0) scale(1.04); }
    82%, 100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes po-ex-origin-europe {
    0%, 30%   { opacity: 0; transform: translateY(10px) scale(0.86); }
    40%, 72%  { opacity: 1; transform: translateY(0) scale(1); }
    86%, 100% { opacity: 0.28; transform: translateY(0) scale(0.9); }
}
@keyframes po-ex-origin-world {
    0%, 52%   { opacity: 0; transform: translateY(12px) scale(0.86); }
    64%, 100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes po-ex-origin-network-dot {
    0%, 34%   { opacity: 0; transform: scale(0); }
    48%, 100% { opacity: 1; transform: scale(1); }
}
/* Timeline ist vom Start bis zum finalen Zustand sichtbar. */
@keyframes po-ex-origin-tl-show {
    0%, 28%  { opacity: 0; }
    38%, 100% { opacity: 1; }
}
@keyframes po-ex-origin-tl-fill {
    0%, 40% { width: 0; }
    62%     { width: 100%; }
    100%    { width: 100%; }
}
@keyframes po-ex-origin-tl-marker {
    0%, 40% { transform: scale(0); left: 0; }
    48%     { transform: scale(1); left: 0; }
    62%     { transform: scale(1); left: calc(100% - 22px); }
    100%    { transform: scale(1); left: calc(100% - 22px); }
}
@keyframes po-ex-origin-tl-dot {
    0%, 50%  { opacity: 0; transform: scale(0); }
    56%, 100% { opacity: 1; transform: scale(1); }
}
@keyframes po-ex-origin-logo {
    0%, 64%   { opacity: 0; transform: translateX(-50%) translateY(20px); }
    72%       { opacity: 1; transform: translateX(-50%) translateY(0); }
    78%, 100% { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes po-ex-origin-final {
    0%, 76%   { opacity: 0; transform: translateX(-50%) translateY(12px); }
    88%, 100% { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ── PAPEROFFICE-HERITAGE — Slide 1: Illustration 260px (wie alle Slides), Titel + graue Copy-Karte ─ */
.po-explainer-overlay[data-po-explainer-layout="standard"] .po-explainer-slide:has(.po-explainer-anim--paperoffice-heritage),
.po-explainer-slide.po-explainer-slide--layout-standard:has(.po-explainer-anim--paperoffice-heritage) {
    align-items: stretch;
}
.po-explainer-overlay[data-po-explainer-layout="standard"] .po-explainer-slide:has(.po-explainer-anim--paperoffice-heritage) .po-explainer-illustration,
.po-explainer-slide.po-explainer-slide--layout-standard:has(.po-explainer-anim--paperoffice-heritage) .po-explainer-illustration {
    width: var(--po-ex-copy-column-max, 800px);
    max-width: 100%;
    height: 100%;
    max-height: var(--po-ex-ill-slot-h, 260px);
    margin: 0;
    border-radius: 18px;
    background: transparent;
    border: none;
    box-shadow: none;
    position: relative;
    overflow: hidden;
}
.po-explainer-overlay[data-po-explainer-layout="standard"] .po-explainer-slide:has(.po-explainer-anim--paperoffice-heritage) .po-explainer-slide-title,
.po-explainer-slide.po-explainer-slide--layout-standard:has(.po-explainer-anim--paperoffice-heritage) .po-explainer-slide-title {
    width: var(--po-ex-copy-column-max, 800px);
    max-width: 100%;
    align-self: stretch;
    margin: 0;
    padding: 0 2px;
    box-sizing: border-box;
    text-align: center;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.22;
    letter-spacing: -0.02em;
    text-wrap: balance;
    color: var(--po-text-primary, #0f172a);
}
.po-explainer-overlay[data-po-explainer-layout="standard"] .po-explainer-slide:has(.po-explainer-anim--paperoffice-heritage) .po-explainer-slide-body,
.po-explainer-slide.po-explainer-slide--layout-standard:has(.po-explainer-anim--paperoffice-heritage) .po-explainer-slide-body {
    width: var(--po-ex-copy-column-max, 800px);
    max-width: 100%;
    align-self: center;
    color: #64748b;
    font-size: 13.5px;
    line-height: 1.5;
    align-items: stretch;
    box-sizing: border-box;
}
.po-explainer-overlay[data-po-explainer-layout="standard"] .po-explainer-slide:has(.po-explainer-anim--paperoffice-heritage) .po-explainer-slide-body .po-ex-slide-lead,
.po-explainer-overlay[data-po-explainer-layout="standard"] .po-explainer-slide:has(.po-explainer-anim--paperoffice-heritage) .po-explainer-slide-body .po-ex-legacy-lead,
.po-explainer-slide.po-explainer-slide--layout-standard:has(.po-explainer-anim--paperoffice-heritage) .po-explainer-slide-body .po-ex-slide-lead,
.po-explainer-slide.po-explainer-slide--layout-standard:has(.po-explainer-anim--paperoffice-heritage) .po-explainer-slide-body .po-ex-legacy-lead {
    display: none !important;
}
.po-explainer-overlay[data-po-explainer-layout="standard"] .po-explainer-slide:has(.po-explainer-anim--paperoffice-heritage) .po-explainer-slide-body .po-ex-slide-copy,
.po-explainer-overlay[data-po-explainer-layout="standard"] .po-explainer-slide:has(.po-explainer-anim--paperoffice-heritage) .po-explainer-slide-body .po-ex-legacy-copy,
.po-explainer-slide.po-explainer-slide--layout-standard:has(.po-explainer-anim--paperoffice-heritage) .po-explainer-slide-body .po-ex-slide-copy,
.po-explainer-slide.po-explainer-slide--layout-standard:has(.po-explainer-anim--paperoffice-heritage) .po-explainer-slide-body .po-ex-legacy-copy {
    width: 100%;
    max-width: 100%;
    margin: 0;
}
.po-explainer-overlay[data-po-explainer-layout="standard"] .po-ex-heritage-label .po-ex-heritage-year,
.po-explainer-slide.po-explainer-slide--layout-standard .po-ex-heritage-label .po-ex-heritage-year {
    display: inline-block;
    margin-top: 4px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--po-accent, #5b9bd5);
    background: rgba(91, 155, 213, 0.1);
    border: 1px solid rgba(91, 155, 213, 0.18);
}
.po-explainer-overlay[data-po-explainer-layout="standard"] .po-explainer-slide:has(.po-explainer-anim--paperoffice-heritage) .po-explainer-slide-body .po-ex-slide-contrast,
.po-explainer-overlay[data-po-explainer-layout="standard"] .po-explainer-slide:has(.po-explainer-anim--paperoffice-heritage) .po-explainer-slide-body .po-ex-legacy-contrast,
.po-explainer-slide.po-explainer-slide--layout-standard:has(.po-explainer-anim--paperoffice-heritage) .po-explainer-slide-body .po-ex-slide-contrast,
.po-explainer-slide.po-explainer-slide--layout-standard:has(.po-explainer-anim--paperoffice-heritage) .po-explainer-slide-body .po-ex-legacy-contrast {
    margin-top: 0;
}
.po-explainer-anim--paperoffice-heritage {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    overflow: hidden;
}
.po-ex-heritage-stage {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 36px 40px 48px;
}
.po-ex-heritage-track {
    position: absolute;
    left: 72px;
    right: 72px;
    top: 50%;
    height: 2px;
    transform: translateY(-28px);
}
.po-ex-heritage-line,
.po-ex-heritage-line-fill {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    border-radius: 999px;
}
.po-ex-heritage-line {
    background: rgba(148, 163, 184, 0.35);
}
.po-ex-heritage-line-fill {
    width: 0;
    background: linear-gradient(90deg, #5B9BD5 0%, #4178BE 100%);
    animation: po-ex-heritage-line 5.5s ease-out forwards;
}
.po-ex-heritage-node {
    position: relative;
    z-index: 1;
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    opacity: 0.35;
    transform: translateY(8px);
}
.po-ex-heritage-node-de {
    animation: po-ex-heritage-node-de 5.5s ease-out forwards;
}
.po-ex-heritage-node-eu {
    animation: po-ex-heritage-node-eu 5.5s ease-out forwards;
}
.po-ex-heritage-node-world {
    animation: po-ex-heritage-node-world 5.5s ease-out forwards;
}
.po-ex-heritage-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 56px;
    padding: 8px 10px;
    border-radius: 14px;
    background: #ffffff;
    border: 1px solid rgba(91, 155, 213, 0.28);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
    overflow: hidden;
}
.po-ex-heritage-flag {
    display: block;
    width: auto;
    max-width: 100%;
    height: 32px;
    max-height: 100%;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}
.po-ex-heritage-node-world .po-ex-heritage-flag {
    height: 30px;
}
.po-ex-heritage-label {
    max-width: 148px;
    text-align: center;
    color: #334155;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: none;
    line-height: 1.35;
}
.po-ex-heritage-label .po-ex-heritage-year {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: #64748b;
}
@keyframes po-ex-heritage-line {
    0%   { width: 0; }
    100% { width: 100%; }
}
@keyframes po-ex-heritage-node-de {
    0%, 8%    { opacity: 0; transform: translateY(12px); }
    14%, 38%  { opacity: 1; transform: translateY(0); }
    48%, 82%  { opacity: 0.55; transform: translateY(0); }
    88%, 100% { opacity: 1; transform: translateY(0); }
}
@keyframes po-ex-heritage-node-eu {
    0%, 28%   { opacity: 0.25; transform: translateY(8px); }
    34%, 58%  { opacity: 1; transform: translateY(0); }
    68%, 82%  { opacity: 0.55; transform: translateY(0); }
    88%, 100% { opacity: 1; transform: translateY(0); }
}
@keyframes po-ex-heritage-node-world {
    0%, 52%   { opacity: 0.25; transform: translateY(8px); }
    58%, 82%  { opacity: 1; transform: translateY(0); }
    88%, 100% { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .po-ex-heritage-line-fill,
    .po-ex-heritage-node-de,
    .po-ex-heritage-node-eu,
    .po-ex-heritage-node-world {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    .po-ex-heritage-line-fill {
        width: 100% !important;
    }
}

/* ── PAPEROFFICE-LEGACY — Drei Beweise (etabliert/robust statt Hype/Startup) ─ */
.po-explainer-slide:has(.po-explainer-anim--paperoffice-legacy):not(.po-explainer-slide--layout-standard) {
    gap: 12px;
}
.po-explainer-slide:has(.po-explainer-anim--paperoffice-legacy) .po-explainer-illustration {
    max-width: var(--po-ex-copy-column-max, 800px);
    height: 260px;
    max-height: 260px;
    margin-top: 0;
    margin-bottom: 12px;
    border-radius: 18px;
    background: linear-gradient(165deg, #f8fafc 0%, #eef4fa 48%, #e8eef5 100%);
    border: 1px solid rgba(91, 155, 213, 0.28);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
    position: relative;
    overflow: hidden;
}
.po-explainer-slide:has(.po-explainer-anim--paperoffice-legacy) .po-explainer-slide-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 100%;
    width: 100%;
    color: #64748b;
    font-size: 13.5px;
    line-height: 1.5;
}
.po-explainer-slide:has(.po-explainer-anim--paperoffice-legacy) .po-explainer-slide-body .po-ex-legacy-lead {
    width: 100%;
    max-width: 100%;
    margin: 0 0 10px;
    font-size: 14.5px;
    color: #334155;
    line-height: 1.5;
    text-align: center;
}
.po-explainer-slide:has(.po-explainer-anim--paperoffice-legacy) .po-explainer-slide-body .po-ex-legacy-lead {
    max-width: var(--po-ex-copy-column-max, 800px);
}
.po-explainer-slide:has(.po-explainer-anim--paperoffice-legacy) .po-explainer-slide-body .po-ex-legacy-copy {
    display: block;
    width: 100%;
    max-width: var(--po-ex-copy-column-max, 800px);
    margin: 2px auto 0;
    text-align: left;
    box-sizing: border-box;
}
.po-explainer-slide:has(.po-explainer-anim--paperoffice-legacy) .po-explainer-slide-body .po-ex-legacy-copy p,
.po-explainer-slide:has(.po-explainer-anim--paperoffice-legacy) .po-explainer-slide-body .po-ex-legacy-copy ul {
    text-align: left;
}
.po-explainer-slide:has(.po-explainer-anim--paperoffice-legacy) .po-explainer-slide-body .po-ex-legacy-contrast {
    margin: 0 0 8px;
    padding: 0 0 0 calc(var(--po-ex-copy-text-inset, 15px) - 3px);
    border-left: 3px solid rgba(91, 155, 213, 0.55);
}
.po-explainer-slide:has(.po-explainer-anim--paperoffice-legacy) .po-explainer-slide-body .po-ex-legacy-copy ul {
    margin: 0 0 4px;
    padding: 0;
    list-style: none;
}
.po-explainer-slide:has(.po-explainer-anim--paperoffice-legacy) .po-explainer-slide-body .po-ex-legacy-copy li {
    padding: 0 0 0 calc(var(--po-ex-copy-text-inset, 15px) - 3px);
    border-left: 3px solid rgba(91, 155, 213, 0.55);
    list-style: none;
}
.po-explainer-slide:has(.po-explainer-anim--paperoffice-legacy) .po-explainer-slide-body .po-ex-legacy-close {
    margin: 8px 0 0;
    padding: 0 0 0 var(--po-ex-copy-text-inset, 15px);
}
.po-explainer-slide:has(.po-explainer-anim--paperoffice-legacy) .po-explainer-slide-body li {
    margin: 5px 0;
    color: #475569;
}
@media (prefers-reduced-motion: no-preference) {
    .po-explainer-slide:has(.po-explainer-anim--paperoffice-legacy) .po-explainer-slide-body .po-ex-legacy-lead,
    .po-explainer-slide:has(.po-explainer-anim--paperoffice-legacy) .po-explainer-slide-body .po-ex-legacy-copy {
        opacity: 0;
        animation: po-ex-legacy-body-in 0.5s ease-out forwards;
    }
    .po-explainer-slide:has(.po-explainer-anim--paperoffice-legacy) .po-explainer-slide-body .po-ex-legacy-copy {
        animation-delay: 0.1s;
    }
}
@keyframes po-ex-legacy-body-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .po-explainer-slide:has(.po-explainer-anim--paperoffice-legacy) .po-explainer-slide-body .po-ex-legacy-lead,
    .po-explainer-slide:has(.po-explainer-anim--paperoffice-legacy) .po-explainer-slide-body .po-ex-legacy-copy {
        opacity: 1;
        animation: none;
        transform: none;
    }
}
.po-explainer-anim--paperoffice-legacy {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    overflow: hidden;
    --po-ex-legacy-dur: 2.4s;
}
.po-ex-legacy-stage {
    position: absolute;
    inset: 0;
    padding: 10px 18px 12px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 10px;
    box-sizing: border-box;
    max-width: var(--po-ex-copy-column-max, 800px);
    margin: 0 auto;
}
.po-ex-legacy-focus {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 10px;
    opacity: 0;
    animation: po-ex-legacy-focus-in var(--po-ex-legacy-dur) ease-out forwards;
}
.po-ex-legacy-focus-established {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(91, 155, 213, 0.2) 0%, rgba(65, 120, 190, 0.12) 100%);
    border: 1px solid rgba(91, 155, 213, 0.45);
    color: #1e4a72;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.po-ex-legacy-focus-vs {
    color: #94a3b8;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: lowercase;
}
.po-ex-legacy-focus-hype {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(248, 250, 252, 0.95);
    border: 1px dashed rgba(148, 163, 184, 0.55);
    color: #94a3b8;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: line-through;
    text-decoration-color: rgba(148, 163, 184, 0.65);
}
.po-ex-legacy-trust {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 5px 6px;
    color: #64748b;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    opacity: 0;
    animation: po-ex-legacy-trust-in var(--po-ex-legacy-dur) ease-out forwards;
    animation-delay: 0.08s;
}
.po-ex-legacy-trust-year,
.po-ex-legacy-num {
    color: #0f172a;
    font-weight: 800;
}
.po-ex-legacy-num {
    color: #4178BE;
    font-size: 22px;
    font-variant-numeric: tabular-nums;
    min-width: 1.2ch;
    line-height: 1;
}
.po-ex-legacy-trust-sep {
    color: #cbd5e1;
    font-weight: 700;
}
.po-ex-legacy-trust-prod {
    color: #475569;
}
/* Drei Beweise als Karten nebeneinander — bewusst NICHT wie Copy-Panel-Listenzeilen */
.po-ex-legacy-proofs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
    max-width: var(--po-ex-copy-column-max, 800px);
    margin: 0 auto;
    align-items: stretch;
}
.po-ex-legacy-proof--card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    min-height: 118px;
    padding: 14px 10px 12px;
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid rgba(91, 155, 213, 0.22);
    box-shadow:
        0 10px 28px rgba(15, 23, 42, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    opacity: 0;
    animation: po-ex-legacy-proof-card-in var(--po-ex-legacy-dur) ease-out forwards;
    overflow: hidden;
}
.po-ex-legacy-proof--1 {
    animation-delay: 0.2s;
}
.po-ex-legacy-proof--2 {
    animation-delay: 0.34s;
}
.po-ex-legacy-proof--3 {
    animation-delay: 0.48s;
}
.po-ex-legacy-proof-accent {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #5B9BD5 0%, #4178BE 100%);
    transform: scaleX(0);
    transform-origin: left center;
    animation: po-ex-legacy-proof-accent-in 0.5s ease-out forwards;
}
.po-ex-legacy-proof--1 .po-ex-legacy-proof-accent {
    animation-delay: 0.26s;
}
.po-ex-legacy-proof--2 .po-ex-legacy-proof-accent {
    animation-delay: 0.4s;
}
.po-ex-legacy-proof--3 .po-ex-legacy-proof-accent {
    animation-delay: 0.54s;
}
.po-ex-legacy-proof-icon {
    width: 42px;
    height: 42px;
    margin-top: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: linear-gradient(145deg, rgba(91, 155, 213, 0.2) 0%, rgba(91, 155, 213, 0.08) 100%);
    border: 1px solid rgba(91, 155, 213, 0.28);
    color: #4178BE;
    font-size: 17px;
    flex-shrink: 0;
}
.po-ex-legacy-proof-text {
    color: #1e293b;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.32;
    text-align: center;
    text-wrap: balance;
    max-width: 100%;
    padding: 0 2px;
}
@keyframes po-ex-legacy-focus-in {
    0%   { opacity: 0; transform: translateY(-6px); }
    100% { opacity: 1; transform: translateY(0); }
}
@keyframes po-ex-legacy-trust-in {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}
@keyframes po-ex-legacy-proof-card-in {
    0%   { opacity: 0; transform: translateY(10px) scale(0.96); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes po-ex-legacy-proof-accent-in {
    0%   { transform: scaleX(0); }
    100% { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
    .po-explainer-anim--paperoffice-legacy .po-ex-legacy-focus,
    .po-explainer-anim--paperoffice-legacy .po-ex-legacy-trust,
    .po-explainer-anim--paperoffice-legacy .po-ex-legacy-proof--card,
    .po-explainer-anim--paperoffice-legacy .po-ex-legacy-proof-accent {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    .po-explainer-anim--paperoffice-legacy .po-ex-legacy-focus-hype {
        opacity: 0.75;
    }
}

/* ── PAPEROFFICE-PARTNERS — NAS-Partner ruhig angebunden (5s) ───────────── */
.po-explainer-slide:has(.po-explainer-anim--paperoffice-partners) .po-explainer-illustration,
.po-explainer-slide:has(.po-explainer-anim--paperoffice-layers) .po-explainer-illustration,
.po-explainer-slide:has(.po-explainer-anim--paperoffice-mcp) .po-explainer-illustration,
.po-explainer-slide:has(.po-explainer-anim--paperoffice-mcp-claude) .po-explainer-illustration,
.po-explainer-slide:has(.po-explainer-anim--paperoffice-mcp-chatgpt) .po-explainer-illustration,
.po-explainer-slide:has(.po-explainer-anim--paperoffice-summary) .po-explainer-illustration,
.po-explainer-slide:has(.po-explainer-anim--paperoffice-superbrain) .po-explainer-illustration,
.po-explainer-slide:has(.po-explainer-anim--paperoffice-mount) .po-explainer-illustration,
.po-explainer-slide:has(.po-explainer-anim--storage-flow) .po-explainer-illustration,
.po-explainer-slide:has(.po-explainer-anim--storage-security) .po-explainer-illustration,
.po-explainer-slide:has(.po-explainer-anim--graph) .po-explainer-illustration,
.po-explainer-slide:has(.po-explainer-anim--users-group-access) .po-explainer-illustration,
.po-explainer-slide:has(.po-explainer-anim--api-queue-flow) .po-explainer-illustration,
.po-explainer-slide:has(.po-explainer-anim--billing-credits) .po-explainer-illustration,
.po-explainer-slide:has(.po-explainer-anim--ai-dms) .po-explainer-illustration,
.po-explainer-slide:has(.po-explainer-anim--processing-flow) .po-explainer-illustration {
    max-width: var(--po-ex-copy-column-max, 800px);
    height: 260px;
    margin-top: 0;
    margin-bottom: 14px;
    border-radius: 18px;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid rgba(148, 163, 184, 0.22);
}
.po-explainer-slide:has(.po-explainer-anim--paperoffice-partners) .po-explainer-slide-body,
.po-explainer-slide:has(.po-explainer-anim--paperoffice-layers) .po-explainer-slide-body,
.po-explainer-slide:has(.po-explainer-anim--paperoffice-mcp) .po-explainer-slide-body,
.po-explainer-slide:has(.po-explainer-anim--paperoffice-mcp-claude) .po-explainer-slide-body,
.po-explainer-slide:has(.po-explainer-anim--paperoffice-mcp-chatgpt) .po-explainer-slide-body,
.po-explainer-slide:has(.po-explainer-anim--paperoffice-summary) .po-explainer-slide-body,
.po-explainer-slide:has(.po-explainer-anim--paperoffice-superbrain) .po-explainer-slide-body,
.po-explainer-slide:has(.po-explainer-anim--paperoffice-mount) .po-explainer-slide-body,
.po-explainer-slide:has(.po-explainer-anim--storage-flow) .po-explainer-slide-body,
.po-explainer-slide:has(.po-explainer-anim--storage-security) .po-explainer-slide-body,
.po-explainer-slide:has(.po-explainer-anim--graph) .po-explainer-slide-body,
.po-explainer-slide:has(.po-explainer-anim--users-group-access) .po-explainer-slide-body,
.po-explainer-slide:has(.po-explainer-anim--api-queue-flow) .po-explainer-slide-body,
.po-explainer-slide:has(.po-explainer-anim--billing-credits) .po-explainer-slide-body,
.po-explainer-slide:has(.po-explainer-anim--ai-dms) .po-explainer-slide-body,
.po-explainer-slide:has(.po-explainer-anim--processing-flow) .po-explainer-slide-body {
    max-width: 580px;
    color: #64748b;
    font-size: 13.5px;
    line-height: 1.55;
}
.po-explainer-anim--paperoffice-partners,
.po-explainer-anim--paperoffice-layers,
.po-explainer-anim--paperoffice-arch-stack,
.po-explainer-anim--paperoffice-mcp,
.po-explainer-anim--paperoffice-mcp-claude,
.po-explainer-anim--paperoffice-mcp-chatgpt,
.po-explainer-anim--paperoffice-summary,
.po-explainer-anim--paperoffice-superbrain {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    overflow: hidden;
}

/* Gemeinsame Illustrationsgröße: Architektur-Slides */
.po-explainer-slide:has(.po-explainer-anim--paperoffice-layers) .po-explainer-illustration,
.po-explainer-slide:has(.po-explainer-anim--paperoffice-arch-stack) .po-explainer-illustration,
.po-explainer-slide:has(.po-explainer-anim--paperoffice-mcp-claude) .po-explainer-illustration,
.po-explainer-slide:has(.po-explainer-anim--paperoffice-mcp-chatgpt) .po-explainer-illustration,
.po-explainer-slide:has(.po-explainer-anim--paperoffice-superbrain) .po-explainer-illustration {
    max-width: 680px;
    height: 300px;
    margin-top: 0;
    margin-bottom: 14px;
    border-radius: 18px;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid rgba(148, 163, 184, 0.22);
}
/* slide_layout=standard: finale Slot-Sperre — schlägt PARTNERS/ARCH-STACK margin/height/body-width (kommt später in der Datei) */
.po-explainer-overlay[data-po-explainer-layout="standard"] .po-explainer-slide .po-explainer-illustration,
.po-explainer-slide.po-explainer-slide--layout-standard .po-explainer-illustration {
    width: 100%;
    max-width: var(--po-ex-copy-column-max, 800px);
    height: 100%;
    min-height: 0;
    max-height: var(--po-ex-ill-slot-h, 260px);
    margin: 0;
}
.po-explainer-overlay[data-po-explainer-layout="standard"] .po-explainer-slide .po-explainer-slide-title,
.po-explainer-slide.po-explainer-slide--layout-standard .po-explainer-slide-title {
    margin: 0;
    max-height: var(--po-ex-title-slot-h, 68px);
}
.po-explainer-overlay[data-po-explainer-layout="standard"] .po-explainer-slide .po-explainer-slide-body,
.po-explainer-slide.po-explainer-slide--layout-standard .po-explainer-slide-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: var(--po-ex-copy-column-max, 800px);
    width: 100%;
    margin: 0;
}
.po-explainer-overlay[data-po-explainer-layout="standard"] .po-explainer-slide:has(.po-explainer-anim--paperoffice-partners) .po-explainer-slide-body,
.po-explainer-overlay[data-po-explainer-layout="standard"] .po-explainer-slide:has(.po-explainer-anim--paperoffice-layers) .po-explainer-slide-body,
.po-explainer-overlay[data-po-explainer-layout="standard"] .po-explainer-slide:has(.po-explainer-anim--paperoffice-arch-stack) .po-explainer-slide-body,
.po-explainer-overlay[data-po-explainer-layout="standard"] .po-explainer-slide:has(.po-explainer-anim--ai-dms) .po-explainer-slide-body,
.po-explainer-overlay[data-po-explainer-layout="standard"] .po-explainer-slide:has(.po-explainer-anim--api-queue-flow) .po-explainer-slide-body,
.po-explainer-overlay[data-po-explainer-layout="standard"] .po-explainer-slide:has(.po-explainer-anim--billing-credits) .po-explainer-slide-body,
.po-explainer-overlay[data-po-explainer-layout="standard"] .po-explainer-slide:has(.po-explainer-anim--paperoffice-mount) .po-explainer-slide-body,
.po-explainer-overlay[data-po-explainer-layout="standard"] .po-explainer-slide:has(.po-explainer-anim--processing-flow) .po-explainer-slide-body,
.po-explainer-overlay[data-po-explainer-layout="standard"] .po-explainer-slide:has(.po-explainer-anim--paperoffice-mcp-claude) .po-explainer-slide-body,
.po-explainer-overlay[data-po-explainer-layout="standard"] .po-explainer-slide:has(.po-explainer-anim--paperoffice-mcp-chatgpt) .po-explainer-slide-body,
.po-explainer-overlay[data-po-explainer-layout="standard"] .po-explainer-slide:has(.po-explainer-anim--paperoffice-superbrain) .po-explainer-slide-body,
.po-explainer-slide.po-explainer-slide--layout-standard:has(.po-explainer-anim--paperoffice-partners) .po-explainer-slide-body,
.po-explainer-slide.po-explainer-slide--layout-standard:has(.po-explainer-anim--paperoffice-layers) .po-explainer-slide-body,
.po-explainer-slide.po-explainer-slide--layout-standard:has(.po-explainer-anim--paperoffice-arch-stack) .po-explainer-slide-body,
.po-explainer-slide.po-explainer-slide--layout-standard:has(.po-explainer-anim--ai-dms) .po-explainer-slide-body,
.po-explainer-slide.po-explainer-slide--layout-standard:has(.po-explainer-anim--api-queue-flow) .po-explainer-slide-body,
.po-explainer-slide.po-explainer-slide--layout-standard:has(.po-explainer-anim--billing-credits) .po-explainer-slide-body,
.po-explainer-slide.po-explainer-slide--layout-standard:has(.po-explainer-anim--paperoffice-mount) .po-explainer-slide-body,
.po-explainer-slide.po-explainer-slide--layout-standard:has(.po-explainer-anim--processing-flow) .po-explainer-slide-body,
.po-explainer-slide.po-explainer-slide--layout-standard:has(.po-explainer-anim--paperoffice-mcp-claude) .po-explainer-slide-body,
.po-explainer-slide.po-explainer-slide--layout-standard:has(.po-explainer-anim--paperoffice-mcp-chatgpt) .po-explainer-slide-body,
.po-explainer-slide.po-explainer-slide--layout-standard:has(.po-explainer-anim--paperoffice-superbrain) .po-explainer-slide-body {
    max-width: var(--po-ex-copy-column-max, 800px);
    width: 100%;
}
.po-explainer-slide:has(.po-explainer-anim--paperoffice-layers) .po-explainer-slide-body,
.po-explainer-slide:has(.po-explainer-anim--paperoffice-arch-stack) .po-explainer-slide-body {
    max-width: 580px;
    color: #64748b;
    font-size: 13.5px;
    line-height: 1.55;
}

/* ── PAPEROFFICE-PARTNERS — echte Marken-Logos (5s) ───────────────────── */
.po-ex-partners-stage {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: 1fr 1.15fr 1fr;
    align-items: center;
    justify-items: center;
    gap: 0 12px;
    padding: 28px 36px;
    box-sizing: border-box;
}
.po-ex-logo-img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 36px;
    object-fit: contain;
}
.po-ex-partners-card-hub .po-ex-logo-img {
    max-height: 48px;
    max-width: 140px;
}
.po-ex-partners-card {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 168px;
    min-height: 88px;
    padding: 16px 18px;
    border-radius: 16px;
    background: #ffffff;
    border: 1px solid rgba(148, 163, 184, 0.32);
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08);
    opacity: 0;
    animation: po-ex-partners-card-in 5s ease-out forwards;
}
/* QNAP + ASUSTOR: Logos sind weiß → dunkle Kartenfläche */
.po-ex-partners-card--dark {
    background: linear-gradient(165deg, #334155 0%, #1e293b 52%, #0f172a 100%);
    border-color: rgba(71, 85, 105, 0.65);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.22);
}
.po-ex-partners-card--dark .po-ex-logo-img {
    max-height: 34px;
    max-width: 132px;
    width: auto;
    height: auto;
    object-fit: contain;
}
.po-ex-partners-card-qnap { animation-delay: 0.14s; }
.po-ex-partners-card-hub {
    max-width: 200px;
    min-height: 104px;
    background: #ffffff;
    border-color: rgba(91, 155, 213, 0.45);
    box-shadow: 0 14px 32px rgba(91, 155, 213, 0.16);
    animation-delay: 0s;
}
.po-ex-partners-card-asustor { animation-delay: 0.28s; }
.po-ex-partners-line {
    position: absolute;
    top: 50%;
    height: 2px;
    background: rgba(91, 155, 213, 0.45);
    z-index: 1;
    transform: translateY(-50%) scaleX(0);
    transform-origin: center;
    animation: po-ex-partners-line 5s ease-out forwards;
}
.po-ex-partners-line-left {
    left: 22%;
    right: 50%;
    margin-right: 88px;
    animation-delay: 0.2s;
}
.po-ex-partners-line-right {
    left: 50%;
    right: 22%;
    margin-left: 88px;
    animation-delay: 0.32s;
}
@keyframes po-ex-partners-card-in {
    0%, 12%  { opacity: 0; transform: translateY(10px) scale(0.96); }
    22%, 100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes po-ex-partners-line {
    0%, 28%  { transform: translateY(-50%) scaleX(0); }
    52%, 100% { transform: translateY(-50%) scaleX(1); }
}

/* ── PAPEROFFICE-LAYERS — Vier-Schichten-Stack (kompakt, ohne Chips in der Illustration) ─ */
.po-ex-layers-overview-stage,
.po-ex-layers-stack-stage {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 12px 20px 14px;
    box-sizing: border-box;
    --po-ex-layers-dur: 2.6s;
}
.po-ex-layers-stack-rail {
    position: relative;
    flex: 0 0 14px;
    width: 14px;
    align-self: stretch;
    margin-right: 12px;
}
.po-ex-layers-stack-track {
    position: absolute;
    left: 50%;
    top: 8%;
    bottom: 8%;
    width: 3px;
    margin-left: -1.5px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.28);
}
.po-ex-layers-stack-fill {
    position: absolute;
    left: 50%;
    top: 8%;
    width: 3px;
    margin-left: -1.5px;
    height: 0;
    border-radius: 999px;
    background: linear-gradient(180deg, #94a3b8 0%, #5B9BD5 45%, #4178BE 100%);
    animation: po-ex-layers-stack-fill var(--po-ex-layers-dur) ease-out forwards;
}
.po-ex-layers-stack-cards {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    width: 100%;
    max-width: 520px;
    min-width: 0;
}
.po-ex-layers-stack-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 46px;
    padding: 10px 14px 10px 12px;
    border-radius: 12px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid rgba(148, 163, 184, 0.32);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
    opacity: 0;
    transform: translateY(10px);
    animation: po-ex-layers-card-in var(--po-ex-layers-dur) ease-out forwards;
    animation-delay: calc(0.14s * var(--po-ex-layer-i, 0) + 0.08s);
    margin-left: calc(6px * var(--po-ex-layer-i, 0));
    overflow: hidden;
}
.po-ex-layers-stack-card--slate {
    border-color: rgba(100, 116, 139, 0.38);
}
.po-ex-layers-stack-card--blue {
    border-color: rgba(91, 155, 213, 0.35);
}
.po-ex-layers-stack-card--accent {
    border-color: rgba(91, 155, 213, 0.52);
    background: linear-gradient(180deg, #ffffff 0%, rgba(91, 155, 213, 0.08) 100%);
    box-shadow: 0 10px 24px rgba(91, 155, 213, 0.12);
}
.po-ex-layers-stack-accent {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #5B9BD5 0%, #4178BE 100%);
    transform: scaleX(0);
    transform-origin: left center;
    animation: po-ex-layers-card-accent-in 0.45s ease-out forwards;
    animation-delay: calc(0.14s * var(--po-ex-layer-i, 0) + 0.2s);
}
.po-ex-layers-stack-card--slate .po-ex-layers-stack-accent {
    background: linear-gradient(90deg, #94a3b8 0%, #64748b 100%);
}
.po-ex-layers-stack-num {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(91, 155, 213, 0.14);
    color: #4178BE;
    font-size: 12px;
    font-weight: 800;
    line-height: 28px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.po-ex-layers-stack-card--slate .po-ex-layers-stack-num {
    background: rgba(100, 116, 139, 0.16);
    color: #475569;
}
.po-ex-layers-stack-label {
    flex: 1 1 auto;
    min-width: 0;
    color: #0f172a;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: 0.01em;
    line-height: 1.25;
    text-align: left;
}
@keyframes po-ex-layers-stack-fill {
    0%   { height: 0; opacity: 0.4; }
    100% { height: 84%; opacity: 1; }
}
@keyframes po-ex-layers-card-in {
    0%   { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}
@keyframes po-ex-layers-card-accent-in {
    0%   { transform: scaleX(0); }
    100% { transform: scaleX(1); }
}
.po-explainer-overlay[data-po-explainer-layout="standard"] .po-explainer-slide:has(.po-explainer-anim--paperoffice-layers) .po-explainer-illustration,
.po-explainer-slide.po-explainer-slide--layout-standard:has(.po-explainer-anim--paperoffice-layers) .po-explainer-illustration {
    background: transparent;
    border: none;
    box-shadow: none;
}
@media (prefers-reduced-motion: reduce) {
    .po-ex-layers-stack-fill,
    .po-ex-layers-stack-card,
    .po-ex-layers-stack-accent {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        height: auto;
    }
    .po-ex-layers-stack-fill {
        height: 84%;
    }
}

/* ── PAPEROFFICE-ARCH-STACK — Hero + Schichten-Rail (Tour 4–6) ───────── */
.po-ex-focus-stage {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.85fr);
    gap: 14px;
    align-items: stretch;
    padding: 18px 24px 22px;
    box-sizing: border-box;
}
.po-ex-focus-hero {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
    min-height: 168px;
    border-radius: 14px;
    background: #ffffff;
    border: 1px solid rgba(91, 155, 213, 0.45);
    box-shadow: 0 12px 28px rgba(91, 155, 213, 0.14);
    opacity: 0;
    animation: po-ex-focus-hero-in 5s ease-out forwards;
}
.po-ex-focus-stage--binary .po-ex-focus-hero {
    border-color: rgba(100, 116, 139, 0.45);
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.1);
}
.po-ex-focus-hero-head {
    display: flex;
    align-items: center;
    gap: 12px;
}
.po-ex-focus-hero-num {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: rgba(91, 155, 213, 0.14);
    color: #4178BE;
    font-size: 14px;
    font-weight: 800;
    line-height: 32px;
    text-align: center;
}
.po-ex-focus-stage--binary .po-ex-focus-hero-num {
    background: rgba(100, 116, 139, 0.14);
    color: #475569;
}
.po-ex-focus-hero-titles {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.po-ex-focus-hero-title {
    color: #0f172a;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1.25;
}
.po-ex-focus-hero-sub {
    color: #64748b;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.2;
}
.po-ex-focus-stage--database .po-ex-focus-hero-sub {
    color: #4178be;
}
.po-ex-focus-hero-detail {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    opacity: 0;
    animation: po-ex-focus-detail-in 5s ease-out forwards;
    animation-delay: 0.22s;
}
.po-ex-focus-rail {
    display: flex;
    flex-direction: column;
    gap: 8px;
    justify-content: center;
    min-width: 0;
}
.po-ex-focus-rail-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 38px;
    padding: 0 12px;
    border-radius: 10px;
    background: #ffffff;
    border: 1px solid rgba(148, 163, 184, 0.28);
    opacity: 0;
    animation: po-ex-focus-rail-in 5s ease-out forwards;
}
.po-ex-focus-rail-item:nth-child(1) { animation-delay: 0.1s; }
.po-ex-focus-rail-item:nth-child(2) { animation-delay: 0.16s; }
.po-ex-focus-rail-item:nth-child(3) { animation-delay: 0.22s; }
.po-ex-focus-rail-item:nth-child(4) { animation-delay: 0.28s; }
.po-ex-focus-rail-item.is-dim {
    opacity: 0.45;
    filter: saturate(0.8);
}
.po-ex-focus-rail-item.is-active {
    opacity: 1;
    border-color: rgba(91, 155, 213, 0.55);
    background: linear-gradient(90deg, #ffffff 0%, rgba(91, 155, 213, 0.08) 100%);
    box-shadow: 0 6px 16px rgba(91, 155, 213, 0.12);
}
.po-ex-focus-rail-num {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 7px;
    background: rgba(148, 163, 184, 0.15);
    color: #64748b;
    font-size: 10px;
    font-weight: 800;
    line-height: 22px;
    text-align: center;
}
.po-ex-focus-rail-item.is-active .po-ex-focus-rail-num {
    background: rgba(91, 155, 213, 0.18);
    color: #4178BE;
}
.po-ex-focus-rail-label {
    flex: 1 1 auto;
    min-width: 0;
    color: #334155;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.po-ex-focus-rail-item.is-active .po-ex-focus-rail-label {
    color: #0f172a;
    font-size: 11px;
}
@keyframes po-ex-focus-hero-in {
    0%, 10%  { opacity: 0; transform: translateY(12px); }
    20%, 100% { opacity: 1; transform: translateY(0); }
}
@keyframes po-ex-focus-detail-in {
    0%, 20%  { opacity: 0; transform: translateY(6px); }
    30%, 100% { opacity: 1; transform: translateY(0); }
}
@keyframes po-ex-focus-rail-in {
    0%, 14%  { opacity: 0; transform: translateX(8px); }
    24%, 100% { opacity: 1; transform: translateX(0); }
}
.po-ex-focus-rail-item.is-dim {
    animation-name: po-ex-focus-rail-in-dim;
}
@keyframes po-ex-focus-rail-in-dim {
    0%, 14%  { opacity: 0; transform: translateX(8px); }
    24%, 100% { opacity: 0.45; transform: translateX(0); }
}

/* Pills/Chips/Attrs — Hero-Detail (Fokus-Slides) */
.po-ex-focus-hero-detail .po-ex-arch-pill,
.po-ex-focus-hero-detail .po-ex-arch-chip,
.po-ex-focus-hero-detail .po-ex-arch-attr {
    opacity: 1;
    animation: none;
}
.po-ex-arch-pill {
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.03em;
    white-space: nowrap;
    border: 1px solid transparent;
}
.po-ex-arch-pill--blue {
    color: #1d4ed8;
    background: #eff6ff;
    border-color: #bfdbfe;
}
.po-ex-arch-pill--green {
    color: #047857;
    background: #ecfdf5;
    border-color: #a7f3d0;
}
.po-ex-arch-pill--slate {
    color: #475569;
    background: #f1f5f9;
    border-color: #cbd5e1;
}
.po-ex-arch-chip {
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(91, 155, 213, 0.08);
    border: 1px solid rgba(91, 155, 213, 0.28);
    color: #334155;
    font-size: 9px;
    font-weight: 700;
    white-space: nowrap;
}
.po-ex-arch-attr {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid rgba(91, 155, 213, 0.28);
    color: #334155;
    font-size: 9px;
    font-weight: 700;
    white-space: nowrap;
}
.po-ex-arch-attr i {
    color: #5B9BD5;
    font-size: 10px;
}
.po-ex-focus-hero-detail .po-ex-arch-pill,
.po-ex-focus-hero-detail .po-ex-arch-chip {
    font-size: 10px;
    padding: 5px 11px;
}
.po-ex-focus-hero-detail--row {
    gap: 5px;
}
.po-ex-focus-hero-detail--intel .po-ex-arch-chip {
    background: rgba(99, 102, 241, 0.08);
    border-color: rgba(99, 102, 241, 0.22);
}

/* DataCore-Slide: dichte Badge-Matrix (26 Capabilities) */
.po-ex-focus-stage--database .po-ex-focus-hero {
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
}
.po-ex-focus-stage--database .po-ex-focus-hero-head {
    flex-shrink: 0;
}
.po-ex-focus-stage--database .po-ex-focus-hero-detail--row,
.po-ex-focus-stage--database .po-ex-focus-hero-detail--core,
.po-ex-focus-stage--database .po-ex-focus-hero-detail--search,
.po-ex-focus-stage--database .po-ex-focus-hero-detail--docai,
.po-ex-focus-stage--database .po-ex-focus-hero-detail--intel {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    flex-shrink: 0;
}
.po-ex-focus-stage--database .po-ex-arch-chip {
    font-size: 8px;
    padding: 3px 7px;
    line-height: 1.2;
}
.po-ex-focus-hero-detail--search .po-ex-arch-chip {
    background: rgba(14, 165, 233, 0.08);
    border-color: rgba(14, 165, 233, 0.28);
}
.po-ex-focus-hero-detail--docai .po-ex-arch-chip {
    background: rgba(16, 185, 129, 0.08);
    border-color: rgba(16, 185, 129, 0.28);
}
.po-explainer-slide:has(.po-ex-focus-stage--database) .po-explainer-illustration {
    height: 380px;
    max-width: 720px;
}
.po-explainer-slide:has(.po-ex-focus-stage--database) .po-ex-focus-stage {
    padding: 14px 18px 16px;
}
.po-explainer-slide:has(.po-ex-focus-stage--database) .po-ex-focus-rail-item {
    min-height: 34px;
}
.po-ex-arch-chip--stagger {
    opacity: 0;
    animation: po-ex-arch-chip-in 5s ease-out forwards;
    animation-delay: calc(0.08s * var(--po-ex-chip-i, 0) + 0.28s);
}
.po-ex-arch-pill.po-ex-arch-chip--stagger {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
@keyframes po-ex-arch-chip-in {
    0%, 16% { opacity: 0; transform: translateY(5px) scale(0.96); }
    26%, 100% { opacity: 1; transform: translateY(0) scale(1); }
}
/* ── PAPEROFFICE-MCP-FLOW — Tool-Calling sichtbar (7s) ─────────────────── */
.po-ex-mcp-flow-stage {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.75fr) minmax(0, 1.1fr);
    grid-template-rows: 1fr auto;
    gap: 8px 10px;
    padding: 16px 20px 14px;
    box-sizing: border-box;
}
.po-ex-mcp-flow-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}
.po-ex-mcp-flow-col--lane {
    align-items: center;
    justify-content: center;
}
.po-ex-mcp-flow-ai,
.po-ex-mcp-flow-po {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 10px;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid rgba(148, 163, 184, 0.32);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
    opacity: 0;
    animation: po-ex-mcp-flow-in 7s ease-out forwards;
}
.po-ex-mcp-flow-po {
    border-color: rgba(91, 155, 213, 0.45);
    animation-delay: 0.2s;
}
.po-ex-mcp-flow-ai i,
.po-ex-mcp-flow-po > i {
    font-size: 18px;
}
.po-ex-mcp-flow-po-title {
    color: #0f172a;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-align: center;
}
.po-ex-mcp-flow-po-sub {
    color: #64748b;
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.po-ex-mcp-flow-prompt {
    padding: 8px 10px;
    border-radius: 10px;
    background: #f8fafc;
    border: 1px solid rgba(148, 163, 184, 0.28);
    color: #334155;
    font-size: 9px;
    font-weight: 600;
    line-height: 1.35;
    opacity: 0;
    animation: po-ex-mcp-flow-in 7s ease-out forwards;
    animation-delay: 0.35s;
}
.po-ex-mcp-flow-bridge {
    position: relative;
    padding: 8px 14px;
    border-radius: 999px;
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.12em;
    opacity: 0;
    animation: po-ex-mcp-flow-bridge 7s ease-out forwards;
    animation-delay: 0.5s;
}
.po-ex-mcp-flow-bridge-pulse {
    position: absolute;
    inset: -4px;
    border-radius: inherit;
    border: 2px solid rgba(255, 255, 255, 0.45);
    opacity: 0;
    animation: po-ex-mcp-flow-pulse 7s ease-out infinite;
    animation-delay: 1.2s;
}
.po-ex-mcp-flow-packet {
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0;
}
.po-ex-mcp-flow-packet--out {
    color: #fff;
    background: #475569;
    animation: po-ex-mcp-flow-packet-out 7s ease-out forwards;
    animation-delay: 0.65s;
}
.po-ex-mcp-flow-packet--in {
    color: #047857;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    animation: po-ex-mcp-flow-packet-in 7s ease-out forwards;
    animation-delay: 2.4s;
}
.po-ex-mcp-flow-tools {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}
.po-ex-mcp-flow-tool {
    padding: 4px 8px;
    border-radius: 8px;
    background: rgba(91, 155, 213, 0.1);
    border: 1px solid rgba(91, 155, 213, 0.28);
    color: #334155;
    font-size: 8px;
    font-weight: 700;
    font-family: ui-monospace, monospace;
    opacity: 0;
    animation: po-ex-mcp-flow-tool 7s ease-out forwards;
    animation-delay: calc(0.9s + 0.35s * var(--po-ex-tool-i, 0));
}
.po-ex-mcp-flow-answer {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 10px;
    background: linear-gradient(90deg, rgba(91, 155, 213, 0.08), rgba(255, 255, 255, 0.9));
    border: 1px solid rgba(91, 155, 213, 0.22);
    opacity: 0;
    animation: po-ex-mcp-flow-in 7s ease-out forwards;
    animation-delay: 2.8s;
}
.po-ex-mcp-flow-answer-text {
    color: #0f172a;
    font-size: 10px;
    font-weight: 700;
}
.po-ex-mcp-flow-answer-cite {
    color: #4178be;
    font-size: 9px;
    font-weight: 700;
}
.po-ex-mcp-flow-stage--claude .po-ex-mcp-flow-ai {
    border-color: rgba(124, 58, 237, 0.4);
}
.po-ex-mcp-flow-stage--claude .po-ex-mcp-flow-ai i { color: #7c3aed; }
.po-ex-mcp-flow-stage--claude .po-ex-mcp-flow-bridge {
    background: linear-gradient(135deg, #6d28d9, #5b21b6);
}
.po-ex-mcp-flow-stage--chatgpt .po-ex-mcp-flow-ai {
    border-color: rgba(16, 185, 129, 0.42);
}
.po-ex-mcp-flow-stage--chatgpt .po-ex-mcp-flow-ai i { color: #059669; }
.po-ex-mcp-flow-stage--chatgpt .po-ex-mcp-flow-bridge {
    background: linear-gradient(135deg, #059669, #047857);
}
.po-ex-mcp-flow-stage--chatgpt .po-ex-mcp-flow-po { animation-delay: 0.15s; }
@keyframes po-ex-mcp-flow-in {
    0%, 12% { opacity: 0; transform: translateY(8px); }
    22%, 100% { opacity: 1; transform: translateY(0); }
}
@keyframes po-ex-mcp-flow-bridge {
    0%, 18% { opacity: 0; transform: scale(0.88); }
    28%, 100% { opacity: 1; transform: scale(1); }
}
@keyframes po-ex-mcp-flow-pulse {
    0%, 40% { opacity: 0; transform: scale(1); }
    50%, 70% { opacity: 0.85; transform: scale(1.08); }
    80%, 100% { opacity: 0; transform: scale(1.15); }
}
@keyframes po-ex-mcp-flow-packet-out {
    0%, 22% { opacity: 0; transform: translateX(-12px); }
    32%, 55% { opacity: 1; transform: translateX(0); }
    70%, 100% { opacity: 0.35; transform: translateX(6px); }
}
@keyframes po-ex-mcp-flow-packet-in {
    0%, 58% { opacity: 0; transform: translateX(12px); }
    68%, 100% { opacity: 1; transform: translateX(0); }
}
@keyframes po-ex-mcp-flow-tool {
    0%, 20% { opacity: 0; transform: scale(0.92); }
    30%, 100% { opacity: 1; transform: scale(1); }
}

/* ── PAPEROFFICE-SUPERBRAIN — Schluss-Slide (7s) ───────────────────────── */
.po-ex-superbrain-stage {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 18px 24px;
    box-sizing: border-box;
}
.po-ex-superbrain-core {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 14px 22px;
    border-radius: 16px;
    background: linear-gradient(165deg, #ffffff 0%, rgba(91, 155, 213, 0.12) 100%);
    border: 1px solid rgba(91, 155, 213, 0.4);
    box-shadow: 0 14px 32px rgba(91, 155, 213, 0.18);
    opacity: 0;
    animation: po-ex-superbrain-core 7s ease-out forwards;
}
.po-ex-superbrain-glow {
    position: absolute;
    inset: -8px;
    border-radius: 20px;
    background: radial-gradient(circle at 50% 40%, rgba(91, 155, 213, 0.35), transparent 68%);
    opacity: 0;
    animation: po-ex-superbrain-glow 7s ease-out forwards;
    animation-delay: 0.2s;
}
.po-ex-superbrain-core > i {
    font-size: 28px;
    color: #5b9bd5;
    z-index: 1;
}
.po-ex-superbrain-brand {
    z-index: 1;
    color: #0f172a;
    font-size: 14px;
    font-weight: 800;
}
.po-ex-superbrain-tag {
    z-index: 1;
    color: #4178be;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.po-ex-superbrain-sub {
    z-index: 1;
    color: #64748b;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.po-ex-superbrain-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 10px;
    width: 100%;
    max-width: 560px;
}
.po-ex-superbrain-doc,
.po-ex-superbrain-datacore,
.po-ex-superbrain-chat {
    padding: 8px 12px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid rgba(148, 163, 184, 0.3);
    font-size: 9px;
    font-weight: 700;
    color: #334155;
    opacity: 0;
    animation: po-ex-superbrain-step 7s ease-out forwards;
}
.po-ex-superbrain-doc { animation-delay: 0.45s; }
.po-ex-superbrain-datacore {
    border-color: rgba(91, 155, 213, 0.4);
    animation-delay: 0.75s;
}
.po-ex-superbrain-chat {
    animation-delay: 1.15s;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.po-ex-superbrain-arrow {
    color: #94a3b8;
    font-size: 11px;
    opacity: 0;
    animation: po-ex-superbrain-step 7s ease-out forwards;
    animation-delay: 0.6s;
}
.po-ex-superbrain-arrow--2 { animation-delay: 0.95s; }
.po-ex-superbrain-datacore-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}
.po-ex-superbrain-datacore-chips span {
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(91, 155, 213, 0.1);
    font-size: 8px;
    font-weight: 700;
}
.po-ex-superbrain-q { color: #0f172a; }
.po-ex-superbrain-a { color: #4178be; font-size: 8px; }
.po-ex-superbrain-footer {
    color: #475569;
    font-size: 10px;
    font-weight: 700;
    text-align: center;
    opacity: 0;
    animation: po-ex-superbrain-step 7s ease-out forwards;
    animation-delay: 1.5s;
}
@keyframes po-ex-superbrain-core {
    0%, 10% { opacity: 0; transform: translateY(10px) scale(0.96); }
    20%, 100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes po-ex-superbrain-glow {
    0%, 15% { opacity: 0; }
    30%, 85% { opacity: 1; }
    100% { opacity: 0.6; }
}
@keyframes po-ex-superbrain-step {
    0%, 18% { opacity: 0; transform: translateY(6px); }
    28%, 100% { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .po-ex-arch-chip--stagger,
    .po-ex-layers-stack-card,
    .po-ex-layers-stack-accent,
    .po-ex-layers-stack-fill,
    .po-ex-mcp-flow-packet,
    .po-ex-mcp-flow-tool,
    .po-ex-mcp-flow-bridge-pulse,
    .po-ex-mcp-flow-ai,
    .po-ex-mcp-flow-po,
    .po-ex-mcp-flow-prompt,
    .po-ex-mcp-flow-answer,
    .po-ex-mcp-flow-bridge,
    .po-ex-superbrain-core,
    .po-ex-superbrain-doc,
    .po-ex-superbrain-datacore,
    .po-ex-superbrain-chat,
    .po-ex-superbrain-arrow,
    .po-ex-superbrain-footer,
    .po-ex-superbrain-glow {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ── PAPEROFFICE-MCP — Legacy-Layout (Fallback) ─────────────────────────── */
.po-ex-mcp-stage {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 32px 40px;
}
.po-ex-mcp-ai,
.po-ex-mcp-po {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 18px;
    border-radius: 14px;
    background: #ffffff;
    border: 1px solid rgba(148, 163, 184, 0.32);
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.07);
    opacity: 0;
}
.po-ex-mcp-ai { animation: po-ex-mcp-side 5s ease-out forwards; }
.po-ex-mcp-po {
    animation: po-ex-mcp-side 5s ease-out forwards;
    animation-delay: 0.35s;
    border-color: rgba(91, 155, 213, 0.4);
}
.po-ex-mcp-ai i,
.po-ex-mcp-po i {
    color: #5B9BD5;
    font-size: 20px;
}
.po-ex-mcp-ai span,
.po-ex-mcp-po span {
    color: #475569;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.po-ex-mcp-bridge {
    position: relative;
    z-index: 3;
    margin: 0 20px;
    padding: 10px 14px;
    border-radius: 999px;
    background: #334155;
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.14em;
    opacity: 0;
    animation: po-ex-mcp-bridge 5s ease-out forwards;
    animation-delay: 0.2s;
}
.po-ex-mcp-line {
    position: absolute;
    top: 50%;
    height: 2px;
    background: rgba(91, 155, 213, 0.5);
    transform: translateY(-50%) scaleX(0);
    animation: po-ex-mcp-line 5s ease-out forwards;
}
.po-ex-mcp-line-1 { left: 22%; right: 50%; margin-right: 52px; animation-delay: 0.25s; }
.po-ex-mcp-line-2 { left: 50%; right: 22%; margin-left: 52px; animation-delay: 0.4s; }
.po-ex-mcp-cap {
    position: absolute;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(91, 155, 213, 0.1);
    border: 1px solid rgba(91, 155, 213, 0.28);
    color: #4178BE;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    opacity: 0;
    animation: po-ex-mcp-cap 5s ease-out forwards;
}
.po-ex-mcp-cap-1 { right: 72px; top: 72px; animation-delay: 0.55s; }
.po-ex-mcp-cap-2 { right: 56px; bottom: 68px; animation-delay: 0.7s; }
@keyframes po-ex-mcp-side {
    0%, 16%  { opacity: 0; transform: translateY(8px); }
    26%, 100% { opacity: 1; transform: translateY(0); }
}
@keyframes po-ex-mcp-bridge {
    0%, 22%  { opacity: 0; transform: scale(0.9); }
    32%, 100% { opacity: 1; transform: scale(1); }
}
@keyframes po-ex-mcp-line {
    0%, 28%  { transform: translateY(-50%) scaleX(0); }
    50%, 100% { transform: translateY(-50%) scaleX(1); }
}
@keyframes po-ex-mcp-cap {
    0%, 48%  { opacity: 0; }
    58%, 100% { opacity: 1; }
}

/* Claude: warmer Akzent links */
.po-ex-mcp-stage--claude .po-ex-mcp-ai {
    border-color: rgba(124, 58, 237, 0.42);
    background: linear-gradient(180deg, #ffffff 0%, #f5f3ff 100%);
}
.po-ex-mcp-stage--claude .po-ex-mcp-ai i {
    color: #7c3aed;
}
.po-ex-mcp-stage--claude .po-ex-mcp-bridge {
    background: linear-gradient(135deg, #6d28d9, #5b21b6);
}

/* ChatGPT: gespiegelte Anordnung + grüner Akzent rechts */
.po-ex-mcp-stage--chatgpt {
    flex-direction: row-reverse;
}
.po-ex-mcp-stage--chatgpt .po-ex-mcp-ai {
    border-color: rgba(16, 185, 129, 0.42);
    background: linear-gradient(180deg, #ffffff 0%, #ecfdf5 100%);
}
.po-ex-mcp-stage--chatgpt .po-ex-mcp-ai i {
    color: #059669;
}
.po-ex-mcp-stage--chatgpt .po-ex-mcp-bridge {
    background: linear-gradient(135deg, #059669, #047857);
}
.po-ex-mcp-stage--chatgpt .po-ex-mcp-cap-1 {
    right: auto;
    left: 72px;
}
.po-ex-mcp-stage--chatgpt .po-ex-mcp-cap-2 {
    right: auto;
    left: 56px;
}

/* ── PAPEROFFICE-SUMMARY — Schichten-Stack mit Workspaces-Kappe (5s) ─── */
.po-ex-summary-stage {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 32px 26px;
    box-sizing: border-box;
}
.po-ex-summary-stack {
    position: relative;
    width: 100%;
    max-width: 480px;
    height: 220px;
}
.po-ex-summary-layer {
    position: absolute;
    left: 0;
    right: 0;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid rgba(148, 163, 184, 0.35);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
    opacity: 0;
    transform: translateY(14px);
}
.po-ex-summary-layer-1 {
    bottom: 0;
    z-index: 1;
    margin-right: 40px;
    padding: 12px 16px;
    border-color: rgba(100, 116, 139, 0.4);
    animation: po-ex-summary-layer-in 5s ease-out forwards;
    animation-delay: 0s;
}
.po-ex-summary-layer-2 {
    bottom: 58px;
    z-index: 2;
    margin-left: 14px;
    margin-right: 14px;
    padding: 12px 16px 14px;
    border-color: rgba(91, 155, 213, 0.38);
    animation: po-ex-summary-layer-in 5s ease-out forwards;
    animation-delay: 0.18s;
}
.po-ex-summary-layer-3 {
    bottom: 128px;
    z-index: 3;
    margin-left: 28px;
    margin-right: 0;
    padding: 12px 18px;
    border-color: rgba(91, 155, 213, 0.55);
    background: linear-gradient(90deg, #ffffff 0%, rgba(91, 155, 213, 0.12) 100%);
    box-shadow: 0 12px 28px rgba(91, 155, 213, 0.2);
    animation: po-ex-summary-layer-in 5s ease-out forwards;
    animation-delay: 0.36s;
}
.po-ex-summary-layer-title {
    display: block;
    color: #0f172a;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.02em;
}
.po-ex-summary-layer-sub {
    display: block;
    margin-top: 3px;
    color: #64748b;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.po-ex-summary-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}
.po-ex-summary-chip {
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(91, 155, 213, 0.08);
    border: 1px solid rgba(91, 155, 213, 0.25);
    color: #334155;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.03em;
}
@keyframes po-ex-summary-layer-in {
    0%, 16%  { opacity: 0; transform: translateY(16px); }
    26%, 100% { opacity: 1; transform: translateY(0); }
}

/* ── PAPEROFFICE-MOUNT — Hub-and-Spoke für Tour (5s, %-Layout) ───────── */
.po-explainer-slide:has(.po-explainer-anim--paperoffice-mount) .po-explainer-illustration {
    max-width: var(--po-ex-copy-column-max, 800px);
    height: 260px;
    margin-top: 0;
    margin-bottom: 14px;
    border-radius: 18px;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid rgba(148, 163, 184, 0.22);
}
.po-explainer-anim--paperoffice-mount {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    overflow: hidden;
}
.po-ex-mount-stage {
    position: absolute;
    inset: 0;
}
.po-ex-mount-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}
.po-ex-mount-path {
    fill: none;
    stroke: rgba(91, 155, 213, 0.45);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 120;
    stroke-dashoffset: 120;
    animation: po-ex-mount-path-draw 5s ease-out forwards;
}
.po-ex-mount-path-s3 { animation-delay: 0.12s; }
.po-ex-mount-path-mail { animation-delay: 0.24s; }
.po-ex-mount-hub,
.po-ex-mount-node {
    position: absolute;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transform: translate(-50%, -50%);
    opacity: 0;
    box-sizing: border-box;
}
.po-ex-mount-hub {
    left: 50%;
    top: 40%;
    width: 88px;
    height: 88px;
    border-radius: 18px;
    color: #ffffff;
    background: linear-gradient(135deg, #5B9BD5, #4178BE);
    box-shadow: 0 12px 28px rgba(65, 120, 190, 0.28);
    animation: po-ex-mount-pop 5s ease-out forwards;
    animation-delay: 0.08s;
    z-index: 5;
}
.po-ex-mount-hub i {
    font-size: 22px;
}
.po-ex-mount-hub span {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: center;
    max-width: 76px;
    line-height: 1.2;
}
.po-ex-mount-node {
    width: 78px;
    height: 52px;
    padding: 8px 10px;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid rgba(148, 163, 184, 0.35);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
    z-index: 4;
}
.po-ex-mount-node i {
    color: #5B9BD5;
    font-size: 16px;
}
.po-ex-mount-node span {
    color: #475569;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.po-ex-mount-node-nas {
    left: 28%;
    top: 24%;
    animation: po-ex-mount-pop 5s ease-out forwards;
    animation-delay: 0.28s;
}
.po-ex-mount-node-s3 {
    left: 72%;
    top: 24%;
    animation: po-ex-mount-pop 5s ease-out forwards;
    animation-delay: 0.38s;
}
.po-ex-mount-node-mail {
    left: 50%;
    top: 78%;
    animation: po-ex-mount-pop 5s ease-out forwards;
    animation-delay: 0.48s;
}
@keyframes po-ex-mount-path-draw {
    0%, 20%  { stroke-dashoffset: 120; opacity: 0.3; }
    45%, 100% { stroke-dashoffset: 0; opacity: 1; }
}
@keyframes po-ex-mount-pop {
    0%, 22%  { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
    32%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.po-explainer-anim--isolation { position: absolute; inset: 0; }
.po-explainer-anim--isolation .po-ex-silo {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 78px;
    height: 100px;
    border-radius: 12px;
    background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
    border: 1px solid rgba(91, 155, 213, 0.28);
    box-shadow: 0 10px 24px rgba(91, 155, 213, 0.16);
    transform: translate(-50%, -50%) scale(0.6);
    opacity: 0;
    overflow: hidden;
    animation: po-ex-silo-pop 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.po-explainer-anim--isolation .po-ex-silo::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0;
    height: 22px;
    background: linear-gradient(90deg, var(--po-silo-color, #5B9BD5) 0%, var(--po-silo-color-2, #4178BE) 100%);
}
.po-explainer-anim--isolation .po-ex-silo::after {
    content: '';
    position: absolute;
    left: 14px; right: 14px;
    top: 38px;
    height: 6px;
    border-radius: 3px;
    background: #e2e8f0;
    box-shadow: 0 14px 0 #e2e8f0, 0 28px 0 #e2e8f0;
}
.po-explainer-anim--isolation .po-ex-silo-1 {
    --po-silo-color: #5B9BD5; --po-silo-color-2: #4178BE;
    animation-name: po-ex-silo-left;
    animation-delay: 0.15s;
}
.po-explainer-anim--isolation .po-ex-silo-2 {
    --po-silo-color: #0ea5e9; --po-silo-color-2: #0284c7;
    animation-name: po-ex-silo-center;
    animation-delay: 0.3s;
}
.po-explainer-anim--isolation .po-ex-silo-3 {
    --po-silo-color: #10b981; --po-silo-color-2: #059669;
    animation-name: po-ex-silo-right;
    animation-delay: 0.45s;
}
.po-explainer-anim--isolation .po-ex-barrier {
    position: absolute;
    top: 25%;
    bottom: 25%;
    width: 1px;
    background: repeating-linear-gradient(180deg, rgba(91, 155, 213, 0.55) 0 6px, transparent 6px 12px);
    opacity: 0;
    animation: po-ex-barrier-fade 0.5s ease 0.9s both;
}
.po-explainer-anim--isolation .po-ex-barrier-1 { left: calc(50% - 52px); }
.po-explainer-anim--isolation .po-ex-barrier-2 { left: calc(50% + 51px); }
@keyframes po-ex-silo-pop {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
    60%  { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes po-ex-silo-left {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
    60%  { opacity: 1; transform: translate(calc(-50% - 108px), -50%) scale(1.05); }
    100% { opacity: 1; transform: translate(calc(-50% - 108px), -50%) scale(1); }
}
@keyframes po-ex-silo-center {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
    60%  { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes po-ex-silo-right {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
    60%  { opacity: 1; transform: translate(calc(-50% + 108px), -50%) scale(1.05); }
    100% { opacity: 1; transform: translate(calc(-50% + 108px), -50%) scale(1); }
}
@keyframes po-ex-barrier-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── 2. SHIELD — zentrales Schild mit 4 Compliance-Badges ──────────────── */
.po-explainer-anim--shield { position: absolute; inset: 0; }
.po-explainer-anim--shield .po-ex-shield {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 88px;
    height: 104px;
    background: linear-gradient(135deg, #7ab3e0 0%, #5B9BD5 60%, #2e5c95 100%);
    clip-path: path('M44 0 L88 16 L88 56 C88 84 68 98 44 104 C20 98 0 84 0 56 L0 16 Z');
    box-shadow: 0 16px 32px rgba(65, 120, 190, 0.36);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.4) rotate(-8deg);
    animation: po-ex-shield-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.po-explainer-anim--shield .po-ex-shield::after {
    content: '';
    position: absolute;
    top: 34px;
    left: 50%;
    width: 12px;
    height: 24px;
    border-right: 3px solid #ffffff;
    border-bottom: 3px solid #ffffff;
    transform: translate(-50%, 0) rotate(45deg) scale(0);
    transform-origin: center;
    animation: po-ex-check-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.7s forwards;
}
.po-explainer-anim--shield .po-ex-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 5px 10px;
    background: #ffffff;
    border: 1px solid rgba(91, 155, 213, 0.32);
    border-radius: 999px;
    font: 600 10.5px/1 system-ui, sans-serif;
    letter-spacing: 0.04em;
    color: var(--po-accent-dark, #4178BE);
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08);
    white-space: nowrap;
    max-width: 88px;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
    animation: po-ex-badge-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.po-explainer-anim--shield .po-ex-badge-1 { animation-delay: 0.8s;  --po-badge-x: -135px; --po-badge-y: -52px; }
.po-explainer-anim--shield .po-ex-badge-2 { animation-delay: 0.95s; --po-badge-x:  100px; --po-badge-y: -52px; }
.po-explainer-anim--shield .po-ex-badge-3 { animation-delay: 1.1s;  --po-badge-x: -135px; --po-badge-y:  36px; }
.po-explainer-anim--shield .po-ex-badge-4 { animation-delay: 1.25s; --po-badge-x:  100px; --po-badge-y:  36px; }
@keyframes po-ex-shield-in {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.4) rotate(-8deg); }
    60%  { opacity: 1; transform: translate(-50%, -50%) scale(1.08) rotate(2deg); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0); }
}
@keyframes po-ex-check-in {
    0%   { transform: translate(-50%, 0) rotate(45deg) scale(0); opacity: 0; }
    100% { transform: translate(-50%, 0) rotate(45deg) scale(1); opacity: 1; }
}
@keyframes po-ex-badge-in {
    0%   { opacity: 0; transform: translate(calc(-50% + var(--po-badge-x) * 0.3), calc(-50% + var(--po-badge-y) * 0.3)) scale(0.6); }
    100% { opacity: 1; transform: translate(calc(-50% + var(--po-badge-x)),       calc(-50% + var(--po-badge-y)))       scale(1); }
}

/* ── 3. TIERS — drei aufsteigende Säulen (Basic / Premium / Ultra) ─────── */
.po-explainer-anim--tiers { position: absolute; inset: 0; }
.po-explainer-anim--tiers .po-ex-ground {
    position: absolute;
    left: 15%; right: 15%;
    bottom: 28px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(91, 155, 213, 0.35), transparent);
}
.po-explainer-anim--tiers .po-ex-tier {
    position: absolute;
    bottom: 28px;
    width: 72px;
    background: linear-gradient(180deg, var(--po-tier-c1) 0%, var(--po-tier-c2) 100%);
    border-radius: 10px 10px 0 0;
    transform-origin: bottom center;
    transform: scaleY(0);
    opacity: 0;
    animation: po-ex-tier-grow 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
    box-shadow: 0 -6px 14px rgba(91, 155, 213, 0.12);
}
.po-explainer-anim--tiers .po-ex-tier-label {
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    font: 700 9.5px/1 system-ui, sans-serif;
    letter-spacing: 0.08em;
    color: #ffffff;
    text-transform: uppercase;
    max-width: 64px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 0.9;
}
/* v6: Icon-Stack pro Balken. Container ist ein flex-column, zentriert oben im
   Balken. Icons sind FA-<i>-Elemente, weiß, staggered reinpoppend. Basic hat 1
   Icon, Premium 2, Ultra 3 — die vertikale Staffelung korrespondiert mit der
   Balken-Höhe (70/100/130px). */
.po-explainer-anim--tiers .po-ex-tier-icons {
    position: absolute;
    top: 9px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
}
.po-explainer-anim--tiers .po-ex-tier-icon {
    color: #ffffff;
    font-size: 13px;
    line-height: 1;
    opacity: 0;
    transform: scale(0) rotate(-15deg);
    animation: po-ex-tier-icon-in 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}
.po-explainer-anim--tiers .po-ex-tier-1 {
    left: calc(50% - 130px);
    height: 70px;
    --po-tier-c1: #94a3b8; --po-tier-c2: #64748b;
    animation-delay: 0.2s;
}
.po-explainer-anim--tiers .po-ex-tier-2 {
    left: calc(50% - 36px);
    height: 100px;
    --po-tier-c1: #5B9BD5; --po-tier-c2: #4178BE;
    animation-delay: 0.5s;
}
.po-explainer-anim--tiers .po-ex-tier-3 {
    left: calc(50% + 58px);
    height: 130px;
    --po-tier-c1: #ec4899; --po-tier-c2: #db2777;
    animation-delay: 0.8s;
}
/* Icon-Delays: jeder Balken poppt seine Icons von oben nach unten rein,
   ca. 0.05s nach dem tier-grow-Ende (Balken-delay + 0.7s grow). */
.po-explainer-anim--tiers .po-ex-tier-1 .po-ex-tier-icon:nth-child(1) { animation-delay: 0.90s; }
.po-explainer-anim--tiers .po-ex-tier-2 .po-ex-tier-icon:nth-child(1) { animation-delay: 1.20s; }
.po-explainer-anim--tiers .po-ex-tier-2 .po-ex-tier-icon:nth-child(2) { animation-delay: 1.33s; }
.po-explainer-anim--tiers .po-ex-tier-3 .po-ex-tier-icon:nth-child(1) { animation-delay: 1.50s; }
.po-explainer-anim--tiers .po-ex-tier-3 .po-ex-tier-icon:nth-child(2) { animation-delay: 1.63s; }
.po-explainer-anim--tiers .po-ex-tier-3 .po-ex-tier-icon:nth-child(3) { animation-delay: 1.76s; }
@keyframes po-ex-tier-grow {
    0%   { opacity: 0; transform: scaleY(0); }
    60%  { opacity: 1; transform: scaleY(1.03); }
    100% { opacity: 1; transform: scaleY(1); }
}
@keyframes po-ex-tier-icon-in {
    0%   { opacity: 0; transform: scale(0)    rotate(-15deg); }
    60%  { opacity: 1; transform: scale(1.18) rotate(4deg); }
    100% { opacity: 1; transform: scale(1)    rotate(0); }
}

/* ── 4. GRAPH — Hub mit 4 User-Nodes, Linien wachsen aus dem Zentrum ───── */
.po-explainer-anim--graph { position: absolute; inset: 0; }
.po-explainer-anim--graph .po-ex-hub {
    position: absolute;
    top: 50%; left: 50%;
    width: 60px; height: 60px;
    margin: -30px 0 0 -30px;
    border-radius: 16px;
    /* v4: PO-Blau als Hub-Farbe — der Hub ist das "PaperOffice-Herzstück" */
    background: linear-gradient(135deg, var(--po-accent, #5B9BD5) 0%, var(--po-accent-dark, #4178BE) 100%);
    box-shadow: 0 12px 28px rgba(65, 120, 190, 0.32);
    display: flex; align-items: center; justify-content: center;
    color: #ffffff; font-size: 22px;
    transform: scale(0);
    animation: po-ex-hub-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards;
    z-index: 2;
}
.po-explainer-anim--graph .po-ex-hub::after {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 20px;
    border: 2px solid rgba(91, 155, 213, 0.32);
    animation: po-ex-hub-pulse 2s ease-in-out 1s infinite;
}
.po-explainer-anim--graph .po-ex-user {
    position: absolute;
    top: 50%; left: 50%;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid var(--po-user-color, #5B9BD5);
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.1);
    opacity: 0;
    transform: translate(calc(-50% + var(--po-user-x, 0) * 0.2), calc(-50% + var(--po-user-y, 0) * 0.2)) scale(0.5);
    animation: po-ex-user-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    z-index: 2;
}
.po-explainer-anim--graph .po-ex-user::after {
    content: '';
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--po-user-color, #5B9BD5) 0%, var(--po-user-color-2, #4178BE) 100%);
}
.po-explainer-anim--graph .po-ex-user-1 { --po-user-x: -130px; --po-user-y: -55px; --po-user-color: #0ea5e9; --po-user-color-2: #0284c7; animation-delay: 0.65s; }
.po-explainer-anim--graph .po-ex-user-2 { --po-user-x:  110px; --po-user-y: -65px; --po-user-color: #10b981; --po-user-color-2: #059669; animation-delay: 0.8s;  }
.po-explainer-anim--graph .po-ex-user-3 { --po-user-x: -115px; --po-user-y:  55px; --po-user-color: #f59e0b; --po-user-color-2: #d97706; animation-delay: 0.95s; }
.po-explainer-anim--graph .po-ex-user-4 { --po-user-x:  125px; --po-user-y:  50px; --po-user-color: #ec4899; --po-user-color-2: #db2777; animation-delay: 1.1s;  }
.po-explainer-anim--graph .po-ex-link {
    position: absolute;
    top: 50%; left: 50%;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, rgba(91, 155, 213, 0.7) 0%, rgba(91, 155, 213, 0.2) 100%);
    transform-origin: left center;
    animation: po-ex-link-draw 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    z-index: 1;
}
.po-explainer-anim--graph .po-ex-link-1 { transform: rotate(-157deg); animation-delay: 0.5s;  --po-link-len: 120px; }
.po-explainer-anim--graph .po-ex-link-2 { transform: rotate(-27deg);  animation-delay: 0.65s; --po-link-len: 115px; }
.po-explainer-anim--graph .po-ex-link-3 { transform: rotate(155deg);  animation-delay: 0.8s;  --po-link-len: 115px; }
.po-explainer-anim--graph .po-ex-link-4 { transform: rotate(22deg);   animation-delay: 0.95s; --po-link-len: 125px; }
@keyframes po-ex-hub-in {
    0%   { transform: scale(0); }
    60%  { transform: scale(1.15); }
    100% { transform: scale(1); }
}
@keyframes po-ex-hub-pulse {
    0%, 100% { transform: scale(1);    opacity: 0.4; }
    50%      { transform: scale(1.18); opacity: 0;   }
}
@keyframes po-ex-user-in {
    0%   { opacity: 0; transform: translate(calc(-50% + var(--po-user-x) * 0.2), calc(-50% + var(--po-user-y) * 0.2)) scale(0.5); }
    70%  { opacity: 1; transform: translate(calc(-50% + var(--po-user-x)),       calc(-50% + var(--po-user-y)))       scale(1.12); }
    100% { opacity: 1; transform: translate(calc(-50% + var(--po-user-x)),       calc(-50% + var(--po-user-y)))       scale(1); }
}
@keyframes po-ex-link-draw {
    0%   { width: 0; }
    100% { width: var(--po-link-len, 120px); }
}

/* ── SECURITY CENTER — Geräte, Reconnect, Standort, Push, Schutz ───────── */
.po-explainer-anim--security-devices,
.po-explainer-anim--security-reconnect,
.po-explainer-anim--security-map,
.po-explainer-anim--security-push,
.po-explainer-anim--security-lock { position: absolute; inset: 0; }

.po-explainer-anim--security-devices .po-ex-sec-shield {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 78px;
    height: 78px;
    margin: -39px 0 0 -39px;
    border-radius: 24px;
    background: linear-gradient(135deg, var(--po-accent, #5B9BD5), var(--po-accent-dark, #4178BE));
    box-shadow: 0 18px 36px rgba(65, 120, 190, 0.32);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    transform: scale(0);
    animation: po-ex-sec-pop 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.12s forwards;
    z-index: 2;
}
.po-explainer-anim--security-devices .po-ex-sec-device {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 74px;
    height: 54px;
    border-radius: 16px;
    background: #ffffff;
    border: 1px solid rgba(91, 155, 213, 0.32);
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.10);
    color: var(--po-accent-dark, #4178BE);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    opacity: 0;
    animation: po-ex-sec-device-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.po-explainer-anim--security-devices .po-ex-sec-device-1 { --po-sec-x: -150px; --po-sec-y: -54px; animation-delay: 0.45s; }
.po-explainer-anim--security-devices .po-ex-sec-device-2 { --po-sec-x:  118px; --po-sec-y: -42px; animation-delay: 0.60s; }
.po-explainer-anim--security-devices .po-ex-sec-device-3 { --po-sec-x:  -22px; --po-sec-y:  78px; animation-delay: 0.75s; }
.po-explainer-anim--security-devices .po-ex-sec-status {
    position: absolute;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    opacity: 0;
    animation: po-ex-sec-pulse 1.7s ease-in-out 1s infinite;
    z-index: 3;
}
.po-explainer-anim--security-devices .po-ex-sec-status-ok { left: calc(50% - 92px); top: calc(50% - 70px); background: #10b981; }
.po-explainer-anim--security-devices .po-ex-sec-status-warn { left: calc(50% + 165px); top: calc(50% - 58px); background: #f59e0b; animation-delay: 1.25s; }

.po-explainer-anim--security-reconnect .po-ex-sec-phone {
    position: absolute;
    top: 50%;
    width: 68px;
    height: 106px;
    margin-top: -53px;
    border-radius: 20px;
    background: linear-gradient(180deg, #ffffff, #f1f5f9);
    border: 2px solid rgba(91, 155, 213, 0.36);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.10);
    color: var(--po-accent-dark, #4178BE);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    opacity: 0;
}
.po-explainer-anim--security-reconnect .po-ex-sec-phone-old { left: calc(50% - 190px); animation: po-ex-sec-slide-left 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.15s forwards; }
.po-explainer-anim--security-reconnect .po-ex-sec-phone-new { right: calc(50% - 190px); animation: po-ex-sec-slide-right 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.95s forwards; }
.po-explainer-anim--security-reconnect .po-ex-sec-qr {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 82px;
    height: 82px;
    margin: -41px 0 0 -41px;
    border-radius: 16px;
    background: #ffffff;
    border: 1px solid rgba(91, 155, 213, 0.34);
    box-shadow: 0 14px 30px rgba(65, 120, 190, 0.16);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 12px;
    opacity: 0;
    transform: scale(0.7);
    animation: po-ex-sec-pop 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.55s forwards;
}
.po-explainer-anim--security-reconnect .po-ex-sec-qr span {
    background: linear-gradient(135deg, var(--po-accent, #5B9BD5), var(--po-accent-dark, #4178BE));
    border-radius: 5px;
}
.po-explainer-anim--security-reconnect .po-ex-sec-link {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 52px;
    height: 52px;
    margin: -26px 0 0 -26px;
    border-radius: 50%;
    background: rgba(16, 185, 129, 0.14);
    color: #059669;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    animation: po-ex-sec-pulse-once 0.8s ease 1.15s forwards;
    z-index: 3;
}

.po-explainer-anim--security-map .po-ex-sec-map-grid {
    position: absolute;
    inset: 28px 54px;
    border-radius: 20px;
    background:
        linear-gradient(rgba(91, 155, 213, 0.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(91, 155, 213, 0.12) 1px, transparent 1px),
        linear-gradient(135deg, #ffffff, #eef6ff);
    background-size: 34px 34px, 34px 34px, auto;
    border: 1px solid rgba(91, 155, 213, 0.28);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.70), 0 16px 34px rgba(15, 23, 42, 0.08);
    opacity: 0;
    animation: po-ex-sec-fade-up 0.55s ease 0.12s forwards;
}
.po-explainer-anim--security-map .po-ex-sec-route {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 180px;
    height: 2px;
    background: linear-gradient(90deg, rgba(91, 155, 213, 0.0), rgba(91, 155, 213, 0.78), rgba(91, 155, 213, 0.0));
    transform: translate(-50%, -50%) rotate(-19deg) scaleX(0);
    transform-origin: center;
    animation: po-ex-sec-route 0.7s ease 0.55s forwards;
}
.po-explainer-anim--security-map .po-ex-sec-radius {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 104px;
    height: 104px;
    margin: -52px 0 0 -52px;
    border-radius: 50%;
    border: 2px solid rgba(91, 155, 213, 0.24);
    transform: scale(0);
    animation: po-ex-sec-radius 1.6s ease 0.95s infinite;
}
.po-explainer-anim--security-map .po-ex-sec-pin {
    position: absolute;
    top: calc(50% - 16px);
    left: 50%;
    color: #ef4444;
    font-size: 38px;
    transform: translate(-50%, -80%) scale(0.4);
    opacity: 0;
    animation: po-ex-sec-pin-drop 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.85s forwards;
    filter: drop-shadow(0 8px 14px rgba(239, 68, 68, 0.28));
    z-index: 2;
}

.po-explainer-anim--security-push .po-ex-sec-bell {
    position: absolute;
    top: 38%;
    left: 50%;
    width: 82px;
    height: 82px;
    margin: -41px 0 0 -41px;
    border-radius: 26px;
    background: linear-gradient(135deg, var(--po-accent, #5B9BD5), var(--po-accent-dark, #4178BE));
    color: #ffffff;
    box-shadow: 0 18px 34px rgba(65, 120, 190, 0.30);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    transform: scale(0);
    animation: po-ex-sec-pop 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.15s forwards, po-ex-sec-bell 1.2s ease-in-out 1.0s infinite;
}
.po-explainer-anim--security-push .po-ex-sec-wave {
    position: absolute;
    top: 38%;
    left: 50%;
    width: 104px;
    height: 104px;
    margin: -52px 0 0 -52px;
    border-radius: 50%;
    border: 2px solid rgba(91, 155, 213, 0.30);
    opacity: 0;
    animation: po-ex-sec-radius 1.6s ease 0.65s infinite;
}
.po-explainer-anim--security-push .po-ex-sec-wave-2 { animation-delay: 1.05s; }
.po-explainer-anim--security-push .po-ex-sec-action-row {
    position: absolute;
    left: 50%;
    bottom: 34px;
    display: flex;
    gap: 12px;
    transform: translateX(-50%);
}
.po-explainer-anim--security-push .po-ex-sec-action-row span {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: #ffffff;
    border: 1px solid rgba(91, 155, 213, 0.30);
    color: var(--po-accent-dark, #4178BE);
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateY(14px);
    animation: po-ex-sec-fade-up 0.45s ease forwards;
}
.po-explainer-anim--security-push .po-ex-sec-action-row span:nth-child(1) { animation-delay: 0.65s; }
.po-explainer-anim--security-push .po-ex-sec-action-row span:nth-child(2) { animation-delay: 0.78s; }
.po-explainer-anim--security-push .po-ex-sec-action-row span:nth-child(3) { animation-delay: 0.91s; }
.po-explainer-anim--security-push .po-ex-sec-action-row span:nth-child(4) { animation-delay: 1.04s; }

.po-explainer-anim--security-lock .po-ex-sec-lock {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 88px;
    height: 88px;
    margin: -44px 0 0 -44px;
    border-radius: 28px;
    background: linear-gradient(135deg, #1e3a8a, var(--po-accent-dark, #4178BE));
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    box-shadow: 0 18px 36px rgba(30, 58, 138, 0.28);
    transform: scale(0);
    animation: po-ex-sec-pop 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.15s forwards;
    z-index: 2;
}
.po-explainer-anim--security-lock .po-ex-sec-audit,
.po-explainer-anim--security-lock .po-ex-sec-danger {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 48px;
    height: 48px;
    border-radius: 16px;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.6);
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.10);
}
.po-explainer-anim--security-lock .po-ex-sec-audit { color: #059669; border: 1px solid rgba(16, 185, 129, 0.32); animation: po-ex-sec-badge-left 0.55s ease 0.62s forwards; }
.po-explainer-anim--security-lock .po-ex-sec-danger { color: #dc2626; border: 1px solid rgba(220, 38, 38, 0.28); animation: po-ex-sec-badge-right 0.55s ease 0.80s forwards; }
.po-explainer-anim--security-lock .po-ex-sec-rule {
    --po-sec-route-rot: 0deg;
    position: absolute;
    left: 50%;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(91, 155, 213, 0.62), transparent);
    transform: translateX(-50%) scaleX(0);
    animation: po-ex-sec-route 0.65s ease forwards;
}
.po-explainer-anim--security-lock .po-ex-sec-rule-1 { top: 60px; width: 220px; animation-delay: 1.05s; }
.po-explainer-anim--security-lock .po-ex-sec-rule-2 { bottom: 60px; width: 180px; animation-delay: 1.18s; }

@keyframes po-ex-sec-pop {
    0%   { opacity: 0; transform: scale(0.55); }
    70%  { opacity: 1; transform: scale(1.08); }
    100% { opacity: 1; transform: scale(1); }
}
@keyframes po-ex-sec-device-in {
    0%   { opacity: 0; transform: translate(calc(-50% + var(--po-sec-x) * 0.45), calc(-50% + var(--po-sec-y) * 0.45)) scale(0.7); }
    100% { opacity: 1; transform: translate(calc(-50% + var(--po-sec-x)), calc(-50% + var(--po-sec-y))) scale(1); }
}
@keyframes po-ex-sec-pulse {
    0%, 100% { opacity: 0.82; transform: scale(1); }
    50%      { opacity: 1; transform: scale(1.28); }
}
@keyframes po-ex-sec-slide-left {
    0%   { opacity: 0; transform: translateX(-28px) scale(0.92); }
    100% { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes po-ex-sec-slide-right {
    0%   { opacity: 0; transform: translateX(28px) scale(0.92); }
    100% { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes po-ex-sec-pulse-once {
    0%   { opacity: 0; transform: scale(0.5); }
    45%  { opacity: 1; transform: scale(1.15); }
    100% { opacity: 1; transform: scale(1); }
}
@keyframes po-ex-sec-fade-up {
    0%   { opacity: 0; transform: translateY(14px); }
    100% { opacity: 1; transform: translateY(0); }
}
@keyframes po-ex-sec-route {
    0%   { transform: translate(-50%, -50%) rotate(var(--po-sec-route-rot, -19deg)) scaleX(0); opacity: 0; }
    100% { transform: translate(-50%, -50%) rotate(var(--po-sec-route-rot, -19deg)) scaleX(1); opacity: 1; }
}
@keyframes po-ex-sec-radius {
    0%   { opacity: 0.65; transform: scale(0.45); }
    100% { opacity: 0; transform: scale(1.35); }
}
@keyframes po-ex-sec-pin-drop {
    0%   { opacity: 0; transform: translate(-50%, -95%) scale(0.45); }
    70%  { opacity: 1; transform: translate(-50%, -42%) scale(1.08); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes po-ex-sec-bell {
    0%, 100% { transform: rotate(0deg) scale(1); }
    20%      { transform: rotate(-8deg) scale(1.02); }
    40%      { transform: rotate(8deg) scale(1.02); }
    60%      { transform: rotate(-4deg) scale(1.01); }
    80%      { transform: rotate(4deg) scale(1.01); }
}
@keyframes po-ex-sec-badge-left {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
    100% { opacity: 1; transform: translate(calc(-50% - 130px), calc(-50% - 22px)) scale(1); }
}
@keyframes po-ex-sec-badge-right {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
    100% { opacity: 1; transform: translate(calc(-50% + 130px), calc(-50% + 30px)) scale(1); }
}

/* ── 5. ROCKET — Abschluss-CTA mit Rakete, Flamme und Sternen ─────── */
.po-explainer-anim--rocket { position: absolute; inset: 0; }
.po-explainer-anim--rocket .po-ex-rocket {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 58px;
    height: 86px;
    margin: -50px 0 0 -29px;
    opacity: 0;
    transform: translateY(42px) rotate(-12deg);
    animation:
        po-ex-rocket-in 0.62s cubic-bezier(0.22, 1, 0.36, 1) 0.12s forwards,
        po-ex-rocket-float 2.6s ease-in-out 0.8s infinite;
}
.po-explainer-anim--rocket .po-ex-rocket::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    width: 28px;
    height: 58px;
    background: linear-gradient(180deg, #f8fafc 0%, #cbd5e1 100%);
    border: 1.5px solid var(--po-accent, #5B9BD5);
    border-radius: 14px 14px 4px 4px;
    transform: translateX(-50%);
    box-shadow: inset -4px 0 0 rgba(15, 23, 42, 0.08);
}
.po-explainer-anim--rocket .po-ex-rocket::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 18px;
    width: 10px;
    height: 10px;
    background: #0ea5e9;
    border: 2px solid #0369a1;
    border-radius: 50%;
    transform: translateX(-50%);
}
.po-explainer-anim--rocket .po-ex-fin {
    position: absolute;
    bottom: 10px;
    width: 14px;
    height: 18px;
    background: linear-gradient(180deg, #ef4444 0%, #b91c1c 100%);
    border-radius: 4px;
}
.po-explainer-anim--rocket .po-ex-fin-l { left: -2px; transform: skewY(25deg); }
.po-explainer-anim--rocket .po-ex-fin-r { right: -2px; transform: skewY(-25deg); }
.po-explainer-anim--rocket .po-ex-flame {
    position: absolute;
    bottom: -4px;
    left: 50%;
    width: 18px;
    height: 22px;
    background: linear-gradient(180deg, #fde047 0%, #f97316 60%, #ef4444 100%);
    border-radius: 50% 50% 30% 30% / 70% 70% 30% 30%;
    transform: translateX(-50%) scaleY(1);
    transform-origin: top center;
    animation: po-ex-flame-flicker 0.35s ease-in-out infinite alternate;
}
.po-explainer-anim--rocket .po-ex-smoke {
    position: absolute;
    top: 65%;
    left: 50%;
    width: 8px;
    height: 8px;
    margin-left: -4px;
    background: radial-gradient(circle, rgba(148, 163, 184, 0.55) 0%, rgba(148, 163, 184, 0) 70%);
    border-radius: 50%;
    opacity: 0;
    animation: po-ex-smoke-drift 1.7s ease-out infinite;
}
.po-explainer-anim--rocket .po-ex-smoke-1 { animation-delay: 0.25s; }
.po-explainer-anim--rocket .po-ex-smoke-2 { animation-delay: 0.65s; transform: translateX(8px); }
.po-explainer-anim--rocket .po-ex-smoke-3 { animation-delay: 1.05s; transform: translateX(-8px); }
.po-explainer-anim--rocket .po-ex-star {
    position: absolute;
    width: 8px;
    height: 8px;
    background: radial-gradient(circle, #fde047 0%, rgba(253, 224, 71, 0) 70%);
    opacity: 0;
    animation: po-ex-star-twinkle 1.8s ease-in-out infinite;
}
.po-explainer-anim--rocket .po-ex-star-1 { top: 18%; left: 22%; animation-delay: 0.4s; }
.po-explainer-anim--rocket .po-ex-star-2 { top: 32%; right: 18%; animation-delay: 0.9s; }
.po-explainer-anim--rocket .po-ex-star-3 { top: 62%; left: 18%; animation-delay: 1.4s; }
.po-explainer-anim--rocket .po-ex-star-4 { top: 26%; left: 46%; animation-delay: 1.9s; width: 5px; height: 5px; }
.po-explainer-anim--rocket .po-ex-star-5 { top: 70%; right: 24%; animation-delay: 2.3s; width: 5px; height: 5px; }
@keyframes po-ex-rocket-in {
    0%   { opacity: 0; transform: translateY(60px) rotate(-18deg); }
    100% { opacity: 1; transform: translateY(0) rotate(0); }
}
@keyframes po-ex-rocket-float {
    0%, 100% { transform: translateY(-2px) rotate(-1deg); }
    50%      { transform: translateY(-14px) rotate(1deg); }
}
@keyframes po-ex-flame-flicker {
    0%   { transform: translateX(-50%) scaleY(0.85) scaleX(0.92); opacity: 0.85; }
    100% { transform: translateX(-50%) scaleY(1.15) scaleX(1.08); opacity: 1; }
}
@keyframes po-ex-smoke-drift {
    0%   { opacity: 0; transform: translate(0, 0) scale(0.5); }
    20%  { opacity: 0.7; }
    100% { opacity: 0; transform: translate(-6px, 58px) scale(2.4); }
}
@keyframes po-ex-star-twinkle {
    0%, 100% { opacity: 0.2; transform: scale(0.8); }
    50%      { opacity: 1; transform: scale(1.3); }
}

/* ── 6. AI-DMS — Dokument fliegt rein, AI-Brain verarbeitet, Tags fliegen raus ─
   Erzählt die Story in drei Phasen:
     Phase A (0.0s): Doc fliegt von links ins Feld + Scan-Linie wandert darüber
     Phase B (0.3s): Brain skaliert in der Mitte hoch + 3 Rings expandieren infinite
     Phase C (0.9s): Drei Metadata-Tags fliegen gestaffelt rechts raus       */
.po-explainer-anim--ai-dms { position: absolute; inset: 0; }

/* Dokument — v5: leicht nach rechts geschoben (-130px statt -200px),
   um links Platz für den Tier-Pill-Stack zu schaffen. */
.po-explainer-anim--ai-dms .po-ex-doc {
    position: absolute;
    top: 50%;
    left: calc(50% - 130px);
    width: 68px;
    height: 88px;
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    border-radius: 5px;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12);
    transform: translate(-48px, -50%);
    opacity: 0;
    animation: po-ex-doc-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards;
    overflow: hidden;
}
.po-explainer-anim--ai-dms .po-ex-doc::before {
    content: '';
    position: absolute;
    left: 9px; right: 9px;
    top: 12px;
    height: 4px;
    border-radius: 2px;
    background: #e2e8f0;
    box-shadow:
        0 10px 0 #e2e8f0,
        0 20px 0 #e2e8f0,
        0 30px 0 #e2e8f0,
        0 40px 0 #e2e8f0,
        0 50px 0 #e2e8f0,
        0 60px 0 #e2e8f0;
}
.po-explainer-anim--ai-dms .po-ex-doc::after {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 12px; height: 12px;
    background: linear-gradient(225deg, #cbd5e1 50%, transparent 50%);
}
.po-explainer-anim--ai-dms .po-ex-doc-scan {
    position: absolute;
    left: 0; right: 0;
    top: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent 0%, #10b981 50%, transparent 100%);
    box-shadow: 0 0 12px #10b981, 0 0 4px #10b981;
    opacity: 0;
    animation: po-ex-scan-line 1.4s cubic-bezier(0.4, 0, 0.6, 1) 0.8s infinite;
}

/* AI-Brain in der Mitte */
.po-explainer-anim--ai-dms .po-ex-brain {
    position: absolute;
    top: 50%; left: calc(50% - 30px);
    width: 72px; height: 72px;
    border-radius: 18px;
    /* v4: Violet→PO-Blau Verlauf — Violet als "AI"-Signal, PO-Blau als Brand. */
    background: linear-gradient(135deg, #8b5cf6 0%, #5B9BD5 55%, #4178BE 100%);
    display: flex; align-items: center; justify-content: center;
    color: #ffffff; font-size: 30px;
    box-shadow: 0 14px 32px rgba(65, 120, 190, 0.36);
    transform: translate(-50%, -50%) scale(0.3);
    opacity: 0;
    animation: po-ex-brain-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.35s forwards;
    z-index: 2;
}
.po-explainer-anim--ai-dms .po-ex-ring {
    position: absolute;
    inset: -4px;
    border-radius: 22px;
    border: 2px solid rgba(139, 92, 246, 0.55);
    opacity: 0;
    animation: po-ex-ring-expand 2.4s ease-out 0.9s infinite;
    pointer-events: none;
}
.po-explainer-anim--ai-dms .po-ex-ring-2 { animation-delay: 1.7s; }
.po-explainer-anim--ai-dms .po-ex-ring-3 { animation-delay: 2.5s; }

/* v5: 6 Output-Tags rechts, 2x3 tier-codiert — Basic (Blau), Premium
   (Violett), Ultra (Pink). Gap verkleinert (8→5), Padding/Font leicht
   kompakter damit alle 6 in 220px Container-Höhe passen. */
.po-explainer-anim--ai-dms .po-ex-tags {
    position: absolute;
    top: 50%;
    left: calc(50% + 55px);
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: flex-start;
}
.po-explainer-anim--ai-dms .po-ex-tag {
    padding: 5px 10px;
    border-radius: 999px;
    background: #ffffff;
    border: 1.5px solid;
    font: 700 9.5px/1 system-ui, sans-serif;
    letter-spacing: 0.05em;
    white-space: nowrap;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.1);
    opacity: 0;
    transform: translateX(-22px) scale(0.8);
    animation: po-ex-tag-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.po-explainer-anim--ai-dms .po-ex-tag i {
    font-size: 9px;
    opacity: 0.85;
}
/* Basic-Gruppe (Blau) — erste Tags, früheste Delays */
.po-explainer-anim--ai-dms .po-ex-tag-basic-1   { color: var(--po-accent-dark, #4178BE); border-color: rgba(91, 155, 213, 0.55);  animation-delay: 0.95s; }
.po-explainer-anim--ai-dms .po-ex-tag-basic-2   { color: var(--po-accent-dark, #4178BE); border-color: rgba(91, 155, 213, 0.55);  animation-delay: 1.10s; }
/* Premium-Gruppe (Violett) — staffelung weiter */
.po-explainer-anim--ai-dms .po-ex-tag-premium-1 { color: #7c3aed;                         border-color: rgba(139, 92, 246, 0.55);  animation-delay: 1.30s; }
.po-explainer-anim--ai-dms .po-ex-tag-premium-2 { color: #7c3aed;                         border-color: rgba(139, 92, 246, 0.55);  animation-delay: 1.45s; }
/* Ultra-Gruppe (Pink) — letzte Tags, unterstreichen dass ULTRA "alles" hat */
.po-explainer-anim--ai-dms .po-ex-tag-ultra-1   { color: #db2777;                         border-color: rgba(236, 72, 153, 0.55);  animation-delay: 1.65s; }
.po-explainer-anim--ai-dms .po-ex-tag-ultra-2   { color: #db2777;                         border-color: rgba(236, 72, 153, 0.55);  animation-delay: 1.80s; }

/* v5/v12: Tier-Pill-Stack ganz links — 3 gestapelte Pills BASIC/PREMIUM/ULTRA.
   Die User-Entscheidung, welche Tier gewählt wird, ist der Input-Aspekt
   der AI-DMS-Story. Ab v12 nutzen sie dieselben dezenten Badge-Farben wie
   documents-overview, damit Basic/Premium/Ultra produktweit konsistent wirken. */
.po-explainer-anim--ai-dms .po-ex-tier-stack {
    position: absolute;
    top: 50%;
    left: calc(50% - 245px);
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 7px;
    align-items: flex-start;
}
.po-explainer-anim--ai-dms .po-ex-tier-pill {
    position: relative;
    padding: 5px 13px;
    border-radius: 5px;
    border: 1px solid transparent;
    font: 600 10px/1 system-ui, sans-serif;
    letter-spacing: 0.03em;
    white-space: nowrap;
    max-width: 96px;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 0 3px 8px rgba(15, 23, 42, 0.08);
    opacity: 0;
    transform: translateX(-18px) scale(0.9);
    animation: po-ex-tier-pill-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
    min-width: 82px;
    text-align: center;
}
.po-explainer-anim--ai-dms .po-ex-tier-pill-basic {
    background: #f1f5f9;
    color: #64748b;
    border-color: #e2e8f0;
    animation-delay: 0.05s;
}
.po-explainer-anim--ai-dms .po-ex-tier-pill-premium {
    background: #eff6ff;
    color: #2563eb;
    border-color: #bfdbfe;
    animation-delay: 0.18s;
}
.po-explainer-anim--ai-dms .po-ex-tier-pill-ultra {
    background: #f5f3ff;
    color: #6d28d9;
    border-color: #ddd6fe;
    animation-delay: 0.31s;
    box-shadow: 0 3px 8px rgba(109, 40, 217, 0.12);
}
.po-explainer-anim--ai-dms .po-ex-tier-pill-ultra::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 8px;
    border: 1.5px solid rgba(109, 40, 217, 0.35);
    opacity: 0;
    animation: po-ex-ultra-pulse 2.6s ease-in-out 1.6s infinite;
    pointer-events: none;
}
@keyframes po-ex-tier-pill-in {
    0%   { opacity: 0; transform: translateX(-18px) scale(0.9); }
    65%  { opacity: 1; transform: translateX(3px)   scale(1.06); }
    100% { opacity: 1; transform: translateX(0)     scale(1); }
}
@keyframes po-ex-ultra-pulse {
    0%, 100% { opacity: 0;   transform: scale(1); }
    40%      { opacity: 0.8; transform: scale(1.05); }
    80%      { opacity: 0;   transform: scale(1.14); }
}

@keyframes po-ex-doc-in {
    0%   { opacity: 0; transform: translate(-80px, -50%) rotate(-6deg); }
    60%  { opacity: 1; transform: translate(6px,   -50%) rotate(1deg);  }
    100% { opacity: 1; transform: translate(0,     -50%) rotate(0);     }
}
@keyframes po-ex-scan-line {
    0%   { top: 0;                opacity: 0; }
    12%  { opacity: 1; }
    88%  { opacity: 1; }
    100% { top: calc(100% - 3px); opacity: 0; }
}
@keyframes po-ex-brain-in {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
    65%  { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes po-ex-ring-expand {
    0%   { opacity: 0.8; transform: scale(0.6); }
    50%  { opacity: 0.4; }
    100% { opacity: 0;   transform: scale(1.8); }
}
@keyframes po-ex-tag-in {
    0%   { opacity: 0; transform: translateX(-22px) scale(0.8); }
    60%  { opacity: 1; transform: translateX(4px)   scale(1.08); }
    100% { opacity: 1; transform: translateX(0)     scale(1); }
}

/* ── 7. CHAT — PaperOffice Agent Chat ─────────────────────────────────────
   Erzählt die Story in vier Phasen:
     Phase A (0.10s): User-Bubble poppt oben-links rein (die Frage)
     Phase B (0.50s): Brain-Hub zentral + 2 Rings pulsieren infinite
     Phase C (0.80s): Drei Docs poppen oben-rechts gestaffelt rein, danach
                      gestaffelt aufglühen → visualisiert, dass die KI aus
                      mehreren Dokumenten gleichzeitig zieht
     Phase D (1.85s): AI-Reply-Bubble unten-mittig + Zitat-Badge für Quelle */
.po-explainer-anim--chat { position: absolute; inset: 0; }

/* Chat-Bubble Basis-Styles (beide Bubbles teilen sich die Grundform,
   Farbe/Tail werden über den Modifier gesetzt). */
.po-explainer-anim--chat .po-ex-chat-bubble {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    border-radius: 14px;
    font: 600 11px/1.2 system-ui, sans-serif;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.12);
    white-space: nowrap;
    opacity: 0;
    transform: scale(0.7) translateY(-10px);
}
.po-explainer-anim--chat .po-ex-chat-bubble i {
    font-size: 12px;
    flex-shrink: 0;
}
.po-explainer-anim--chat .po-ex-chat-text {
    font-weight: 600;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* User-Bubble (oben-links) — PO-Blau, Tail unten-rechts zeigt Richtung Brain */
.po-explainer-anim--chat .po-ex-chat-bubble-user {
    top: 22px;
    left: 28px;
    background: linear-gradient(135deg, var(--po-accent, #5B9BD5) 0%, var(--po-accent-dark, #4178BE) 100%);
    color: #ffffff;
    border-bottom-left-radius: 4px;
    animation: po-ex-chat-user-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards;
    max-width: 215px;
}
.po-explainer-anim--chat .po-ex-chat-bubble-user::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 14px;
    width: 0; height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 7px solid var(--po-accent-dark, #4178BE);
}

/* AI-Reply-Bubble (unten-mittig) — heller Hintergrund + Akzent-Border,
   Tail oben zeigt Richtung Brain. Mit Zitat-Badge rechts. */
.po-explainer-anim--chat .po-ex-chat-bubble-ai {
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%) scale(0.7) translateY(10px);
    background: #ffffff;
    color: #0f172a;
    border: 1.5px solid var(--po-accent-light, #7ab3e0);
    border-top-right-radius: 4px;
    animation: po-ex-chat-ai-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) 1.85s forwards;
    max-width: 315px;
}
.po-explainer-anim--chat .po-ex-chat-bubble-ai i {
    color: var(--po-accent, #5B9BD5);
}
.po-explainer-anim--chat .po-ex-chat-bubble-ai::after {
    content: '';
    position: absolute;
    top: -6px;
    right: 18px;
    width: 0; height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 7px solid var(--po-accent-light, #7ab3e0);
}
.po-explainer-anim--chat .po-ex-chat-cite {
    margin-left: 4px;
    padding: 2px 7px;
    background: var(--po-accent-soft, #eaf4fc);
    color: var(--po-accent-dark, #4178BE);
    border-radius: 999px;
    font: 700 9px/1 system-ui, sans-serif;
    letter-spacing: 0.03em;
    white-space: nowrap;
    max-width: 72px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Brain-Hub zentral — gleiches Design wie AI-DMS-Brain, aber etwas kleiner */
.po-explainer-anim--chat .po-ex-chat-hub {
    position: absolute;
    top: 50%; left: 50%;
    width: 54px; height: 54px;
    margin: -27px 0 0 -27px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--po-accent, #5B9BD5) 0%, var(--po-accent-dark, #4178BE) 100%);
    box-shadow: 0 10px 24px rgba(65, 120, 190, 0.32);
    display: flex; align-items: center; justify-content: center;
    color: #ffffff; font-size: 20px;
    transform: scale(0);
    animation: po-ex-chat-hub-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.5s forwards;
    z-index: 2;
}
.po-explainer-anim--chat .po-ex-chat-ring {
    position: absolute;
    inset: -4px;
    border-radius: 20px;
    border: 2px solid rgba(91, 155, 213, 0.45);
    opacity: 0;
    animation: po-ex-chat-ring-pulse 2.2s ease-in-out 1.1s infinite;
    pointer-events: none;
}
.po-explainer-anim--chat .po-ex-chat-ring-2 {
    animation-delay: 1.9s;
}

/* Docs-Stack rechts — 3 Dokumente mit leichtem Fan-Effekt, gestaffelt
   reinpoppend + danach gestaffelt glühend (pulse-highlight) */
.po-explainer-anim--chat .po-ex-chat-docs {
    position: absolute;
    top: 22px;
    right: 32px;
    width: 88px;
    height: 90px;
}
.po-explainer-anim--chat .po-ex-chat-doc {
    position: absolute;
    width: 40px;
    height: 52px;
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    border-radius: 5px;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.12);
    opacity: 0;
    transform-origin: center bottom;
}
/* Zeilen-Andeutungen auf den Docs via pseudo-element */
.po-explainer-anim--chat .po-ex-chat-doc::before {
    content: '';
    position: absolute;
    left: 6px; right: 6px;
    top: 9px;
    height: 2px;
    border-radius: 1px;
    background: #e2e8f0;
    box-shadow:
        0 6px 0 #e2e8f0,
        0 12px 0 #e2e8f0,
        0 18px 0 #e2e8f0,
        0 24px 0 #e2e8f0,
        0 30px 0 #e2e8f0,
        0 36px 0 #e2e8f0;
}
/* Eck-Dreieck oben-rechts (Papier-Ecke) */
.po-explainer-anim--chat .po-ex-chat-doc::after {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 10px; height: 10px;
    background: linear-gradient(225deg, #cbd5e1 50%, transparent 50%);
}
/* Fan-Positionen (von hinten nach vorne) + Reinpopp-Delays + Glow-Pulse */
.po-explainer-anim--chat .po-ex-chat-doc-1 {
    top: 8px; right: 12px;
    transform: rotate(-10deg) scale(0.6);
    animation:
        po-ex-chat-doc-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.80s forwards,
        po-ex-chat-doc-glow 1.1s ease-in-out 1.50s 1;
}
.po-explainer-anim--chat .po-ex-chat-doc-2 {
    top: 14px; right: 34px;
    transform: rotate(-2deg) scale(0.6);
    animation:
        po-ex-chat-doc-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.95s forwards,
        po-ex-chat-doc-glow 1.1s ease-in-out 1.75s 1;
}
.po-explainer-anim--chat .po-ex-chat-doc-3 {
    top: 18px; right: 56px;
    transform: rotate(6deg) scale(0.6);
    animation:
        po-ex-chat-doc-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) 1.10s forwards,
        po-ex-chat-doc-glow 1.1s ease-in-out 2.00s 1;
}

/* Keyframes */
@keyframes po-ex-chat-user-in {
    0%   { opacity: 0; transform: scale(0.7) translateY(-10px); }
    60%  { opacity: 1; transform: scale(1.05) translateY(2px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes po-ex-chat-ai-in {
    0%   { opacity: 0; transform: translateX(-50%) scale(0.7) translateY(10px); }
    60%  { opacity: 1; transform: translateX(-50%) scale(1.05) translateY(-2px); }
    100% { opacity: 1; transform: translateX(-50%) scale(1) translateY(0); }
}
@keyframes po-ex-chat-hub-in {
    0%   { transform: scale(0); }
    60%  { transform: scale(1.15); }
    100% { transform: scale(1); }
}
@keyframes po-ex-chat-ring-pulse {
    0%, 100% { opacity: 0;   transform: scale(1); }
    40%      { opacity: 0.6; transform: scale(1.02); }
    80%      { opacity: 0;   transform: scale(1.35); }
}
@keyframes po-ex-chat-doc-in {
    0%   { opacity: 0; }
    100% { opacity: 1; transform: rotate(var(--po-doc-rot, 0deg)) scale(1); }
}
@keyframes po-ex-chat-doc-glow {
    0%, 100% { box-shadow: 0 4px 10px rgba(15, 23, 42, 0.12); border-color: #cbd5e1; }
    50%      { box-shadow: 0 0 0 3px rgba(91, 155, 213, 0.35), 0 4px 14px rgba(91, 155, 213, 0.4); border-color: var(--po-accent-light, #7ab3e0); }
}
/* Doc-End-Positionen nach Fan-Rotation mit Scale(1) explizit festnageln,
   damit die Final-Frame stabil bleibt (kein Sprung nach animation-end). */
.po-explainer-anim--chat .po-ex-chat-doc-1 { --po-doc-rot: -10deg; }
.po-explainer-anim--chat .po-ex-chat-doc-2 { --po-doc-rot:  -2deg; }
.po-explainer-anim--chat .po-ex-chat-doc-3 { --po-doc-rot:   6deg; }

/* ── 8. INDUSTRIES — branchenspezifische Namensgebung sichtbar machen ────────
   Erzählt in drei Phasen, dass ein Workspace je nach Branche anders heißt:
     Phase A (0.15s):    Ordner poppt aus Mitte mit leichtem Bounce
     Phase B (ab 0.30s): 6 Branchen-Badges poppen im Uhrzeigersinn rein,
                         anschließend infinite sanftes Schweben (Float)
     Phase C (infinite): Label-Pill unter dem Ordner wechselt durch
                         Mandant → Patient → Klient → Objekt → Projekt →
                         Personalakte (je 1s sichtbar, 0.2s Crossfade,
                         7.2s Gesamt-Zyklus). */
.po-explainer-anim--industries { position: absolute; inset: 0; }

/* Zentraler Workspace-Ordner mit Label */
.po-explainer-anim--industries .po-ex-ind-folder {
    position: absolute;
    top: 50%; left: 50%;
    width: 128px;
    margin: -62px 0 0 -64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    opacity: 0;
    transform: scale(0.75) rotate(-4deg);
    animation: po-ex-ind-folder-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.15s forwards;
    z-index: 3;
}
.po-explainer-anim--industries .po-ex-ind-folder i {
    font-size: 56px;
    color: var(--po-accent, #5B9BD5);
    filter: drop-shadow(0 8px 18px rgba(65, 120, 190, 0.35));
}

/* Label-Wrap: die 6 Branchen-Begriffe sind übereinander gestapelt;
   einer ist jeweils sichtbar, Rotation läuft infinite. */
.po-explainer-anim--industries .po-ex-ind-label-wrap {
    position: relative;
    width: 128px;
    height: 26px;
}
.po-explainer-anim--industries .po-ex-ind-label {
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%) translateY(6px);
    padding: 4px 12px;
    background: linear-gradient(135deg, var(--po-accent, #5B9BD5) 0%, var(--po-accent-dark, #4178BE) 100%);
    color: #ffffff;
    border-radius: 999px;
    font: 700 11px/1 system-ui, sans-serif;
    letter-spacing: 0.03em;
    white-space: nowrap;
    max-width: 138px;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
    box-shadow: 0 6px 14px rgba(65, 120, 190, 0.35);
    animation: po-ex-ind-label-cycle 7.2s ease-in-out infinite;
}
.po-explainer-anim--industries .po-ex-ind-label-1 { animation-delay: 0s;   }
.po-explainer-anim--industries .po-ex-ind-label-2 { animation-delay: 1.2s; }
.po-explainer-anim--industries .po-ex-ind-label-3 { animation-delay: 2.4s; }
.po-explainer-anim--industries .po-ex-ind-label-4 { animation-delay: 3.6s; }
.po-explainer-anim--industries .po-ex-ind-label-5 { animation-delay: 4.8s; }
.po-explainer-anim--industries .po-ex-ind-label-6 { animation-delay: 6.0s; }

/* Branchen-Badges — weiße Kreise mit Akzent-Border, Icon im PO-Blau.
   6 Positionen um den zentralen Ordner, gestaffelt reinpoppend + float. */
.po-explainer-anim--industries .po-ex-ind-badge {
    position: absolute;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid var(--po-accent-light, #7ab3e0);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--po-accent-dark, #4178BE);
    font-size: 17px;
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.14);
    opacity: 0;
    transform: scale(0);
    z-index: 2;
}
.po-explainer-anim--industries .po-ex-ind-badge-1 {
    top: 24px; left: 90px;
    animation:
        po-ex-ind-badge-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.30s forwards,
        po-ex-ind-badge-float 3.8s ease-in-out 0.70s infinite;
}
.po-explainer-anim--industries .po-ex-ind-badge-2 {
    top: 24px; right: 90px;
    animation:
        po-ex-ind-badge-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.40s forwards,
        po-ex-ind-badge-float 4.1s ease-in-out 0.80s infinite;
}
.po-explainer-anim--industries .po-ex-ind-badge-3 {
    top: 50%; right: 40px;
    margin-top: -22px;
    animation:
        po-ex-ind-badge-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.50s forwards,
        po-ex-ind-badge-float 3.6s ease-in-out 0.90s infinite;
}
.po-explainer-anim--industries .po-ex-ind-badge-4 {
    bottom: 24px; right: 90px;
    animation:
        po-ex-ind-badge-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.60s forwards,
        po-ex-ind-badge-float 3.9s ease-in-out 1.00s infinite;
}
.po-explainer-anim--industries .po-ex-ind-badge-5 {
    bottom: 24px; left: 90px;
    animation:
        po-ex-ind-badge-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.70s forwards,
        po-ex-ind-badge-float 4.0s ease-in-out 1.10s infinite;
}
.po-explainer-anim--industries .po-ex-ind-badge-6 {
    top: 50%; left: 40px;
    margin-top: -22px;
    animation:
        po-ex-ind-badge-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.80s forwards,
        po-ex-ind-badge-float 3.7s ease-in-out 1.20s infinite;
}

/* Industries-Keyframes */
@keyframes po-ex-ind-folder-in {
    0%   { opacity: 0; transform: scale(0.75) rotate(-4deg); }
    60%  { opacity: 1; transform: scale(1.05) rotate(2deg);  }
    100% { opacity: 1; transform: scale(1)    rotate(0);     }
}
@keyframes po-ex-ind-badge-in {
    0%   { opacity: 0; transform: scale(0)    rotate(-30deg); }
    70%  { opacity: 1; transform: scale(1.15) rotate(6deg);   }
    100% { opacity: 1; transform: scale(1)    rotate(0);      }
}
@keyframes po-ex-ind-badge-float {
    0%, 100% { transform: scale(1) translateY(0);    }
    50%      { transform: scale(1) translateY(-4px); }
}
/* Label-Cycle über 7.2s: 0-1s sichtbar, 1-1.2s fade-out, dann warten.
   In Prozent: 0% sichtbar ab 2.78% (0.2s fade-in), 13.88% = 1.0s, 16.67% = 1.2s. */
@keyframes po-ex-ind-label-cycle {
    0%     { opacity: 0; transform: translateX(-50%) translateY(6px);  }
    2.78%  { opacity: 1; transform: translateX(-50%) translateY(0);    }
    13.88% { opacity: 1; transform: translateX(-50%) translateY(0);    }
    16.67% { opacity: 0; transform: translateX(-50%) translateY(-6px); }
    100%   { opacity: 0; transform: translateX(-50%) translateY(-6px); }
}

/* ── 9. DOCUMENT TYPES — fachliche Dokumenttypen-Animationen ───────────── */
.po-explainer-anim--doc-types,
.po-explainer-anim--zero-shot-idp,
.po-explainer-anim--doc-rules,
.po-explainer-anim--doc-library,
.po-explainer-anim--jurisdiction,
.po-explainer-anim--retention,
.po-explainer-anim--storage-mount,
.po-explainer-anim--storage-flow,
.po-explainer-anim--storage-protocols,
.po-explainer-anim--storage-security,
.po-explainer-anim--storage-health {
    position: absolute;
    inset: 0;
}

/* Document Types: Dokument fliegt in Typ-Badge.
   v13 (2026-04-25): Doc-Scan-Linie (po-ex-dt-scan), Type-Aura (::before),
   3 wandernde Flow-Dots auf dem Arrow, Float-Loop auf Chips. */
.po-explainer-anim--doc-types .po-ex-dt-doc {
    position: absolute;
    top: 50%; left: calc(50% - 105px);
    width: 72px; height: 92px;
    border-radius: 7px;
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.12);
    transform: translate(-55px, -50%) rotate(-8deg);
    opacity: 0;
    overflow: hidden;
    animation: po-ex-pop-slide 0.62s cubic-bezier(0.22, 1, 0.36, 1) 0.08s forwards;
}
.po-explainer-anim--doc-types .po-ex-dt-doc::after {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 14px; height: 14px;
    background: linear-gradient(225deg, #cbd5e1 50%, transparent 50%);
}
/* Scan-Linie: nach dem Pop-Slide wandert ein blauer Streifen vertikal über
   das Dokument (Loop), zeigt: Dokument wird gelesen/klassifiziert. */
.po-explainer-anim--doc-types .po-ex-dt-scan {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: linear-gradient(180deg,
        transparent 0%,
        transparent 38%,
        rgba(91, 155, 213, 0.55) 50%,
        transparent 62%,
        transparent 100%);
    opacity: 0;
    pointer-events: none;
    animation: po-ex-scan-fade 0.4s ease 0.78s forwards, po-ex-scan-loop 2.4s ease-in-out 1.2s infinite;
}
.po-explainer-anim--doc-types .po-ex-dt-line {
    position: absolute;
    left: 12px; right: 12px;
    height: 5px;
    border-radius: 3px;
    background: #e2e8f0;
}
.po-explainer-anim--doc-types .po-ex-dt-line-1 { top: 24px; width: 38px; }
.po-explainer-anim--doc-types .po-ex-dt-line-2 { top: 40px; }
.po-explainer-anim--doc-types .po-ex-dt-line-3 { top: 56px; }
.po-explainer-anim--doc-types .po-ex-dt-badge {
    position: absolute;
    top: 50%; left: calc(50% + 190px);
    transform: translate(-50%, -50%) scale(0.6);
    width: 132px; height: 58px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--po-accent, #5B9BD5), var(--po-accent-dark, #4178BE));
    color: #ffffff;
    box-shadow: 0 14px 30px rgba(65, 120, 190, 0.32);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font: 800 12px/1 system-ui, sans-serif;
    letter-spacing: 0.04em;
    opacity: 0;
    animation: po-ex-scale-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.48s forwards,
               po-ex-badge-breathe 3.6s ease-in-out 1.4s infinite;
}
.po-explainer-anim--doc-types .po-ex-dt-badge::before {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 18px;
    border: 2px solid rgba(91, 155, 213, 0.55);
    opacity: 0;
    animation: po-ex-aura-pulse 2.6s ease-out 1s infinite;
}
/* Arrow ist jetzt ein Track-Container für 3 Flow-Dots. Die eigentliche Linie
   kommt als ::before (so verzerrt sie nicht die Dots-Children). */
.po-explainer-anim--doc-types .po-ex-dt-arrow {
    position: absolute;
    top: 50%; left: calc(50% - 34px);
    width: 160px; height: 12px;
    margin-top: -6px;
    pointer-events: none;
}
.po-explainer-anim--doc-types .po-ex-dt-arrow::before {
    content: '';
    position: absolute;
    top: 5px; left: 0;
    width: 100%; height: 2px;
    background: linear-gradient(90deg, rgba(91, 155, 213, 0.1), rgba(91, 155, 213, 0.75));
    transform: scaleX(0);
    transform-origin: left center;
    animation: po-ex-line-grow 0.4s ease 0.42s forwards;
}
.po-explainer-anim--doc-types .po-ex-dt-flow {
    position: absolute;
    top: 2px; left: 0;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--po-accent, #5B9BD5);
    box-shadow: 0 0 8px rgba(91, 155, 213, 0.65);
    opacity: 0;
    --po-flow-distance-mid: 128px;
    --po-flow-distance-end: 152px;
    animation: po-ex-flow-travel 1.8s ease-in-out infinite;
}
.po-explainer-anim--doc-types .po-ex-dt-flow-1 { animation-delay: 0.9s; }
.po-explainer-anim--doc-types .po-ex-dt-flow-2 { animation-delay: 1.5s; }
.po-explainer-anim--doc-types .po-ex-dt-flow-3 { animation-delay: 2.1s; }
.po-explainer-anim--doc-types .po-ex-dt-chip {
    position: absolute;
    padding: 5px 10px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid rgba(91, 155, 213, 0.3);
    color: var(--po-accent-dark, #4178BE);
    font: 700 10px/1 system-ui, sans-serif;
    box-shadow: 0 5px 12px rgba(15, 23, 42, 0.08);
    opacity: 0;
    animation: po-ex-chip-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards,
               po-ex-chip-float 4s ease-in-out infinite;
}
.po-explainer-anim--doc-types .po-ex-dt-chip-1 { top: 36px; left: 80px;  animation-delay: 0.82s, 1.6s; }
.po-explainer-anim--doc-types .po-ex-dt-chip-2 { bottom: 42px; left: 116px; animation-delay: 0.96s, 1.9s; }
.po-explainer-anim--doc-types .po-ex-dt-chip-3 { top: 34px; right: 48px; animation-delay: 1.10s, 2.2s; }

/* Zero-Shot IDP: Natürlicher Prompt wird ohne Training zum strukturierten Feld. */
.po-explainer-anim--zero-shot-idp .po-ex-zs-prompt-card,
.po-explainer-anim--zero-shot-idp .po-ex-zs-result-card {
    position: absolute;
    top: 50%;
    width: 150px;
    min-height: 74px;
    padding: 10px 12px;
    border-radius: 15px;
    background: #ffffff;
    border: 1px solid rgba(91, 155, 213, 0.25);
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.10);
    color: #1e293b;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    opacity: 0;
    z-index: 3;
}
.po-explainer-anim--zero-shot-idp .po-ex-zs-prompt-card {
    left: 34px;
    transform: translate(-18px, -50%);
    animation: po-ex-zs-card-in-left 0.58s cubic-bezier(0.22, 1, 0.36, 1) 0.12s forwards,
               po-ex-zs-card-breathe 3.6s ease-in-out 1.6s infinite;
}
.po-explainer-anim--zero-shot-idp .po-ex-zs-result-card {
    right: 28px;
    transform: translate(18px, -50%);
    animation: po-ex-zs-card-in-right 0.58s cubic-bezier(0.22, 1, 0.36, 1) 1.12s forwards,
               po-ex-zs-card-breathe 3.8s ease-in-out 2.1s infinite;
}
.po-explainer-anim--zero-shot-idp .po-ex-zs-kicker,
.po-explainer-anim--zero-shot-idp .po-ex-zs-result-card span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--po-accent-dark, #4178BE);
    font: 700 9px/1 system-ui, sans-serif;
    letter-spacing: 0.03em;
}
.po-explainer-anim--zero-shot-idp .po-ex-zs-prompt-card strong,
.po-explainer-anim--zero-shot-idp .po-ex-zs-result-card strong {
    font: 800 13px/1.2 system-ui, sans-serif;
    color: #0f172a;
}
.po-explainer-anim--zero-shot-idp .po-ex-zs-result-card b {
    width: fit-content;
    padding: 3px 7px;
    border-radius: 999px;
    background: rgba(16, 185, 129, 0.10);
    color: #047857;
    font: 800 9px/1 system-ui, sans-serif;
}
.po-explainer-anim--zero-shot-idp .po-ex-zs-doc {
    position: absolute;
    top: 50%;
    left: calc(50% - 38px);
    width: 72px;
    height: 92px;
    margin: -46px 0 0 -36px;
    border-radius: 8px;
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12);
    overflow: hidden;
    opacity: 0;
    transform: translateY(10px) rotate(-3deg);
    animation: po-ex-zs-doc-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.38s forwards;
    z-index: 2;
}
.po-explainer-anim--zero-shot-idp .po-ex-zs-doc::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 14px;
    height: 14px;
    background: linear-gradient(225deg, #cbd5e1 50%, transparent 50%);
}
.po-explainer-anim--zero-shot-idp .po-ex-zs-scan {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 0%, transparent 36%, rgba(91, 155, 213, 0.55) 50%, transparent 64%, transparent 100%);
    opacity: 0;
    animation: po-ex-scan-fade 0.35s ease 0.75s forwards, po-ex-scan-loop 2.2s ease-in-out 1.05s infinite;
}
.po-explainer-anim--zero-shot-idp .po-ex-zs-line {
    position: absolute;
    left: 12px;
    right: 12px;
    height: 5px;
    border-radius: 3px;
    background: #e2e8f0;
}
.po-explainer-anim--zero-shot-idp .po-ex-zs-line-1 { top: 24px; width: 38px; }
.po-explainer-anim--zero-shot-idp .po-ex-zs-line-2 { top: 41px; }
.po-explainer-anim--zero-shot-idp .po-ex-zs-line-3 { top: 58px; width: 42px; }
.po-explainer-anim--zero-shot-idp .po-ex-zs-box {
    position: absolute;
    left: 10px;
    right: 10px;
    border: 2px solid rgba(16, 185, 129, 0.72);
    border-radius: 5px;
    opacity: 0;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.10);
    animation: po-ex-zs-box-in 0.45s ease forwards, po-ex-zs-box-pulse 2.4s ease-in-out infinite;
}
.po-explainer-anim--zero-shot-idp .po-ex-zs-box-1 { top: 35px; height: 14px; animation-delay: 1.15s, 1.7s; }
.po-explainer-anim--zero-shot-idp .po-ex-zs-box-2 { top: 55px; height: 12px; animation-delay: 1.32s, 2.0s; }
.po-explainer-anim--zero-shot-idp .po-ex-zs-llm {
    position: absolute;
    top: 50%;
    left: calc(50% + 64px);
    width: 58px;
    height: 58px;
    margin: -29px 0 0 -29px;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--po-accent, #5B9BD5), var(--po-accent-dark, #4178BE));
    color: #ffffff;
    box-shadow: 0 14px 30px rgba(65, 120, 190, 0.32);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font: 800 9px/1 system-ui, sans-serif;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.6);
    animation: po-ex-zs-llm-in 0.48s cubic-bezier(0.22, 1, 0.36, 1) 0.72s forwards,
               po-ex-zs-llm-pulse 2.8s ease-in-out 1.35s infinite;
    z-index: 3;
}
.po-explainer-anim--zero-shot-idp .po-ex-zs-llm i { font-size: 20px; }
.po-explainer-anim--zero-shot-idp .po-ex-zs-flow {
    position: absolute;
    top: 50%;
    left: 184px;
    right: 184px;
    height: 12px;
    margin-top: -6px;
    pointer-events: none;
}
.po-explainer-anim--zero-shot-idp .po-ex-zs-flow::before {
    content: '';
    position: absolute;
    top: 5px;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, rgba(91, 155, 213, 0.12), rgba(91, 155, 213, 0.65), rgba(16, 185, 129, 0.55));
    transform: scaleX(0);
    transform-origin: left center;
    animation: po-ex-line-grow 0.48s ease 0.55s forwards;
}
.po-explainer-anim--zero-shot-idp .po-ex-zs-dot {
    position: absolute;
    top: 2px;
    left: 0;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--po-accent, #5B9BD5);
    box-shadow: 0 0 10px rgba(91, 155, 213, 0.65);
    opacity: 0;
    --po-flow-distance-mid: 168px;
    --po-flow-distance-end: 184px;
    animation: po-ex-flow-travel 1.9s ease-in-out infinite;
}
.po-explainer-anim--zero-shot-idp .po-ex-zs-dot-1 { animation-delay: 0.95s; }
.po-explainer-anim--zero-shot-idp .po-ex-zs-dot-2 { animation-delay: 1.55s; }
.po-explainer-anim--zero-shot-idp .po-ex-zs-dot-3 { animation-delay: 2.15s; }
.po-explainer-anim--zero-shot-idp .po-ex-zs-badge {
    position: absolute;
    padding: 5px 10px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid rgba(91, 155, 213, 0.26);
    color: var(--po-accent-dark, #4178BE);
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08);
    font: 800 10px/1 system-ui, sans-serif;
    opacity: 0;
    animation: po-ex-chip-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards,
               po-ex-chip-float 4s ease-in-out infinite;
    z-index: 4;
}
.po-explainer-anim--zero-shot-idp .po-ex-zs-badge-zero { top: 26px; left: 230px; animation-delay: 0.80s, 1.6s; }
.po-explainer-anim--zero-shot-idp .po-ex-zs-badge-training { bottom: 28px; right: 198px; animation-delay: 1.02s, 1.9s; }

/* Document Rules: Felder, Regeln, Compliance docken an Dokument an.
   v13 (2026-04-25): Doc-Aura via ::before, Flow-Dots wandern auf den Links
   (loop), Icons der Regeln glaenzen gestaffelt im Hintergrund-Loop. */
.po-explainer-anim--doc-rules .po-ex-dr-doc {
    position: absolute;
    top: 50%; left: 50%;
    width: 72px; height: 86px;
    margin: -43px 0 0 -36px;
    border-radius: 13px;
    background: linear-gradient(135deg, var(--po-accent, #5B9BD5), var(--po-accent-dark, #4178BE));
    color: #ffffff;
    box-shadow: 0 12px 28px rgba(65, 120, 190, 0.32);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    transform: scale(0.55);
    opacity: 0;
    animation: po-ex-scale-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.12s forwards,
               po-ex-doc-breathe 3.4s ease-in-out 1s infinite;
    z-index: 3;
}
.po-explainer-anim--doc-rules .po-ex-dr-doc::before {
    content: '';
    position: absolute;
    inset: -10px;
    border-radius: 18px;
    border: 2px solid rgba(91, 155, 213, 0.45);
    opacity: 0;
    animation: po-ex-aura-pulse 2.8s ease-out 0.8s infinite;
}
.po-explainer-anim--doc-rules .po-ex-dr-rule {
    position: absolute;
    left: 50%; top: 50%;
    min-width: 112px;
    padding: 8px 11px;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid rgba(91, 155, 213, 0.28);
    color: #334155;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.1);
    display: flex;
    align-items: center;
    gap: 8px;
    font: 800 10px/1 system-ui, sans-serif;
    letter-spacing: 0.06em;
    opacity: 0;
    transform: translate(var(--po-dr-x), var(--po-dr-y)) scale(0.7);
    animation: po-ex-dr-rule-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    z-index: 2;
}
.po-explainer-anim--doc-rules .po-ex-dr-rule i {
    color: var(--po-accent-dark, #4178BE);
    animation: po-ex-icon-glow-stagger 4.5s ease-in-out infinite;
}
.po-explainer-anim--doc-rules .po-ex-dr-rule-1 { --po-dr-x: -220px; --po-dr-y: -74px; animation-delay: 0.62s; }
.po-explainer-anim--doc-rules .po-ex-dr-rule-2 { --po-dr-x: 96px;   --po-dr-y: -74px; animation-delay: 0.78s; }
.po-explainer-anim--doc-rules .po-ex-dr-rule-3 { --po-dr-x: -56px;  --po-dr-y: 68px;  animation-delay: 0.94s; }
.po-explainer-anim--doc-rules .po-ex-dr-rule-1 i { animation-delay: 1.6s; }
.po-explainer-anim--doc-rules .po-ex-dr-rule-2 i { animation-delay: 3.1s; }
.po-explainer-anim--doc-rules .po-ex-dr-rule-3 i { animation-delay: 4.6s; }
.po-explainer-anim--doc-rules .po-ex-dr-link {
    position: absolute;
    top: 50%; left: 50%;
    height: 2px;
    width: 0;
    background: rgba(91, 155, 213, 0.42);
    transform-origin: left center;
    animation: po-ex-link-grow 0.42s ease forwards;
    z-index: 1;
}
/* Wandernde Flow-Dots auf jedem Link — startet erst nach Link-Intro
   (delay > intro-end), animiert via translateX(var(--po-link-width)). */
.po-explainer-anim--doc-rules .po-ex-dr-link::after {
    content: '';
    position: absolute;
    top: 50%; left: 0;
    width: 8px; height: 8px;
    margin: -4px 0 0 -4px;
    border-radius: 50%;
    background: var(--po-accent, #5B9BD5);
    box-shadow: 0 0 8px rgba(91, 155, 213, 0.65);
    opacity: 0;
    animation: po-ex-dot-travel 2.2s ease-in-out infinite;
}
.po-explainer-anim--doc-rules .po-ex-dr-link-1 { transform: rotate(-154deg); --po-link-width: 112px; animation-delay: 0.50s; }
.po-explainer-anim--doc-rules .po-ex-dr-link-2 { transform: rotate(-28deg);  --po-link-width: 106px; animation-delay: 0.66s; }
.po-explainer-anim--doc-rules .po-ex-dr-link-3 { transform: rotate(93deg);   --po-link-width: 70px;  animation-delay: 0.82s; }
.po-explainer-anim--doc-rules .po-ex-dr-link-1::after { animation-delay: 1.5s; }
.po-explainer-anim--doc-rules .po-ex-dr-link-2::after { animation-delay: 1.9s; }
.po-explainer-anim--doc-rules .po-ex-dr-link-3::after { animation-delay: 2.3s; }

/* Document Library: Systemkatalog plus eigene Typen.
   v13 (2026-04-25): Karten bobben subtil, Plus-Icon pulsiert, Custom-Karte
   bekommt periodisches Halo (zeigt individuellen Charakter), Chips schweben. */
.po-explainer-anim--doc-library .po-ex-lib-card {
    position: absolute;
    top: 50%;
    width: 126px; height: 104px;
    margin-top: -52px;
    border-radius: 16px;
    background: #ffffff;
    border: 1px solid rgba(91, 155, 213, 0.28);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: #334155;
    opacity: 0;
}
.po-explainer-anim--doc-library .po-ex-lib-card i {
    color: var(--po-accent, #5B9BD5);
    font-size: 25px;
}
.po-explainer-anim--doc-library .po-ex-lib-card span {
    font: 800 10px/1 system-ui, sans-serif;
    letter-spacing: 0.08em;
}
.po-explainer-anim--doc-library .po-ex-lib-card b {
    color: var(--po-text-muted, #64748b);
    font: 600 11px/1 system-ui, sans-serif;
}
.po-explainer-anim--doc-library .po-ex-lib-system {
    left: calc(50% - 155px);
    animation: po-ex-card-left-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.12s forwards,
               po-ex-card-bob 4.2s ease-in-out 1.4s infinite;
}
.po-explainer-anim--doc-library .po-ex-lib-custom {
    right: calc(50% - 155px);
    animation: po-ex-card-right-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.28s forwards,
               po-ex-card-bob 4.6s ease-in-out 2.0s infinite;
}
.po-explainer-anim--doc-library .po-ex-lib-custom::before {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 22px;
    border: 2px solid rgba(91, 155, 213, 0.45);
    opacity: 0;
    animation: po-ex-aura-pulse 3s ease-out 1.6s infinite;
    pointer-events: none;
}
.po-explainer-anim--doc-library .po-ex-lib-plus {
    position: absolute;
    top: 50%; left: 50%;
    width: 38px; height: 38px;
    margin: -19px 0 0 -19px;
    border-radius: 50%;
    background: var(--po-accent, #5B9BD5);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font: 800 24px/1 system-ui, sans-serif;
    opacity: 0;
    transform: scale(0.3);
    box-shadow: 0 6px 16px rgba(65, 120, 190, 0.3);
    animation: po-ex-scale-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.62s forwards,
               po-ex-plus-pulse 2.4s ease-in-out 1.2s infinite;
    z-index: 2;
}
.po-explainer-anim--doc-library .po-ex-lib-chip {
    position: absolute;
    bottom: 30px;
    padding: 4px 9px;
    border-radius: 999px;
    background: #eff6ff;
    color: #2563eb;
    border: 1px solid #bfdbfe;
    font: 700 10px/1 system-ui, sans-serif;
    opacity: 0;
    animation: po-ex-chip-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards,
               po-ex-chip-bob 3.6s ease-in-out infinite;
}
.po-explainer-anim--doc-library .po-ex-lib-chip-1 { left: 150px; animation-delay: 0.92s, 1.8s; }
.po-explainer-anim--doc-library .po-ex-lib-chip-2 { left: 245px; animation-delay: 1.04s, 2.1s; }
.po-explainer-anim--doc-library .po-ex-lib-chip-3 { right: 150px; animation-delay: 1.16s, 2.4s; }

/* Jurisdiction: Region + Global.
   v13 (2026-04-25): Pins sind jetzt orbital-symmetrisch um den Globus
   positioniert (uber CSS-Variablen --po-jur-x/y), Globus bekommt einen
   rotierenden Radar-Sweep (::before mit conic-gradient), Pins schweben
   subtil im Loop. */
.po-explainer-anim--jurisdiction .po-ex-jur-globe {
    position: absolute;
    top: 50%; left: 50%;
    width: 92px; height: 92px;
    margin: -56px 0 0 -46px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ffffff 0%, #bfdbfe 42%, #5B9BD5 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    box-shadow: 0 14px 30px rgba(65, 120, 190, 0.28);
    opacity: 0;
    transform: scale(0.55) rotate(-12deg);
    animation: po-ex-globe-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.12s forwards,
               po-ex-globe-breathe 4s ease-in-out 1.2s infinite;
    z-index: 2;
}
.po-explainer-anim--jurisdiction .po-ex-jur-globe::before {
    content: '';
    position: absolute;
    inset: -14px;
    border-radius: 50%;
    background: conic-gradient(from 0deg,
        transparent 0%,
        transparent 78%,
        rgba(91, 155, 213, 0.32) 88%,
        rgba(91, 155, 213, 0.55) 95%,
        transparent 100%);
    opacity: 0;
    animation: po-ex-jur-radar-in 0.5s ease 0.9s forwards, po-ex-orbit-soft 4.2s linear 1.2s infinite;
    pointer-events: none;
    z-index: -1;
}
.po-explainer-anim--jurisdiction .po-ex-jur-pin {
    position: absolute;
    top: 50%; left: 50%;
    padding: 5px 10px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid rgba(91, 155, 213, 0.32);
    color: var(--po-accent-dark, #4178BE);
    font: 800 10px/1 system-ui, sans-serif;
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.1);
    opacity: 0;
    transform: translate(-50%, -50%) translate(var(--po-jur-x, 0), var(--po-jur-y, 0)) scale(0.75);
    animation: po-ex-jur-pin-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards,
               po-ex-jur-pin-bob 3.8s ease-in-out infinite;
    z-index: 3;
}
.po-explainer-anim--jurisdiction .po-ex-jur-pin-1 { --po-jur-x: -118px; --po-jur-y: -38px; animation-delay: 0.62s, 1.6s; }
.po-explainer-anim--jurisdiction .po-ex-jur-pin-2 { --po-jur-x:  118px; --po-jur-y: -38px; animation-delay: 0.78s, 1.9s; }
.po-explainer-anim--jurisdiction .po-ex-jur-pin-3 { --po-jur-x:    0;  --po-jur-y:  72px; animation-delay: 0.94s, 2.2s; }

/* Retention: Timeline mit WORM-Sperre.
   v13 (2026-04-25): Wandernder Progress-Dot über die Timeline (loop),
   Lock bekommt grünen Aura-Pulse, Marker pulsieren leicht beim Erreichen,
   Years werden mit Stempel-Effekt eingefuegt. */
.po-explainer-anim--retention .po-ex-ret-doc {
    position: absolute;
    top: 50%; left: calc(50% - 130px);
    width: 78px; height: 88px;
    margin-top: -44px;
    border-radius: 14px;
    background: #ffffff;
    border: 1px solid rgba(91, 155, 213, 0.28);
    color: var(--po-accent, #5B9BD5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.1);
    opacity: 0;
    transform: translateX(-36px) scale(0.75);
    animation: po-ex-pop-slide 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.12s forwards,
               po-ex-doc-breathe 4.2s ease-in-out 1.2s infinite;
}
.po-explainer-anim--retention .po-ex-ret-timeline {
    position: absolute;
    top: 50%; left: calc(50% - 54px);
    width: 164px; height: 4px;
    background: rgba(91, 155, 213, 0.22);
    border-radius: 4px;
    transform: scaleX(0);
    transform-origin: left center;
    animation: po-ex-line-grow 0.65s ease 0.55s forwards;
}
.po-explainer-anim--retention .po-ex-ret-timeline span {
    position: absolute;
    top: -6px;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: #ffffff;
    border: 3px solid var(--po-accent, #5B9BD5);
}
.po-explainer-anim--retention .po-ex-ret-timeline span:nth-child(1) { left: 0; }
.po-explainer-anim--retention .po-ex-ret-timeline span:nth-child(2) { left: 72px; }
.po-explainer-anim--retention .po-ex-ret-timeline span:nth-child(3) { right: 0; }
/* Marker pulsieren gestaffelt (zeigt: Etappen werden erreicht). */
.po-explainer-anim--retention .po-ex-ret-timeline span:nth-child(1) { animation: po-ex-ret-marker-pulse 3.4s ease-in-out 1.4s infinite; }
.po-explainer-anim--retention .po-ex-ret-timeline span:nth-child(2) { animation: po-ex-ret-marker-pulse 3.4s ease-in-out 2.4s infinite; }
.po-explainer-anim--retention .po-ex-ret-timeline span:nth-child(3) { animation: po-ex-ret-marker-pulse 3.4s ease-in-out 3.4s infinite; }
/* Wandernder Progress-Dot: Aufbewahrungsfrist tickt vom Doc-Marker zum
   WORM-Lock-Marker (loop, ease-in-out für flüssigen Eindruck). */
.po-explainer-anim--retention .po-ex-ret-timeline .po-ex-ret-progress {
    position: absolute;
    top: 50%; left: 0;
    margin-top: -6px;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--po-accent-dark, #4178BE);
    border: none;
    box-shadow: 0 0 12px rgba(91, 155, 213, 0.75);
    opacity: 0;
    animation: po-ex-ret-progress-travel 3.6s ease-in-out 1.4s infinite;
}
.po-explainer-anim--retention .po-ex-ret-lock {
    position: absolute;
    top: 50%; left: calc(50% + 135px);
    width: 82px; height: 78px;
    margin: -39px 0 0 -41px;
    border-radius: 18px;
    background: linear-gradient(135deg, #10b981, #059669);
    color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    box-shadow: 0 13px 28px rgba(5, 150, 105, 0.28);
    opacity: 0;
    transform: scale(0.6);
    animation: po-ex-scale-in 0.48s cubic-bezier(0.22, 1, 0.36, 1) 1.08s forwards,
               po-ex-doc-breathe 3.2s ease-in-out 2s infinite;
}
.po-explainer-anim--retention .po-ex-ret-lock::before {
    content: '';
    position: absolute;
    inset: -10px;
    border-radius: 22px;
    border: 2px solid rgba(16, 185, 129, 0.5);
    opacity: 0;
    animation: po-ex-aura-pulse-green 2.6s ease-out 1.8s infinite;
    pointer-events: none;
}
.po-explainer-anim--retention .po-ex-ret-lock i { font-size: 24px; }
.po-explainer-anim--retention .po-ex-ret-lock b { color: #ffffff; font: 800 10px/1 system-ui, sans-serif; }
.po-explainer-anim--retention .po-ex-ret-year {
    position: absolute;
    padding: 4px 9px;
    border-radius: 999px;
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
    font: 800 10px/1 system-ui, sans-serif;
    opacity: 0;
    transform: scale(0.5) rotate(-8deg);
    animation: po-ex-stamp-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.po-explainer-anim--retention .po-ex-ret-year-1 { top: 50px; left: 248px; animation-delay: 0.78s; }
.po-explainer-anim--retention .po-ex-ret-year-2 { bottom: 48px; left: 318px; animation-delay: 0.94s; }

/* Storage Mounts v14: aktive SVG-Geometrie statt rotierter Pixel-DIVs.
   Linien, Dots und Karten haben getrennte Layer, damit i18n-Labels nicht in
   Pfeile laufen und Transform-Animationen sich nicht gegenseitig überschreiben. */
.po-ex-storage-stage {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}
.po-ex-storage-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    z-index: 1;
}
.po-ex-storage-path {
    fill: none;
    stroke: rgba(91, 155, 213, 0.58);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}
.po-ex-storage-path-green {
    stroke: rgba(16, 185, 129, 0.62);
}
.po-ex-storage-path-secure {
    stroke: rgba(16, 185, 129, 0.66);
    stroke-width: 8;
    stroke-dasharray: 7 9;
    animation: po-ex-storage-tunnel-dash 1.5s linear infinite;
}
.po-ex-storage-dot {
    fill: var(--po-accent, #5B9BD5);
    opacity: 0.92;
    filter: drop-shadow(0 0 6px rgba(91, 155, 213, 0.68));
}
.po-ex-storage-dot-green,
.po-ex-storage-dot-secure {
    fill: #10b981;
    filter: drop-shadow(0 0 6px rgba(16, 185, 129, 0.72));
}
.po-ex-storage-card,
.po-ex-storage-lane,
.po-ex-storage-proto,
.po-ex-storage-key,
.po-ex-storage-queue {
    position: absolute;
    z-index: 2;
    opacity: 0;
    animation: po-ex-storage-fade-in 0.42s ease forwards;
}
.po-ex-storage-card {
    transform: translate(-50%, -50%);
}
.po-ex-storage-card-inner {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    border-radius: inherit;
    box-sizing: border-box;
    animation: po-ex-storage-card-float 4.4s ease-in-out infinite;
}
.po-ex-storage-card i {
    line-height: 1;
}
.po-ex-storage-card span,
.po-ex-storage-lane span,
.po-ex-storage-lane b,
.po-ex-storage-proto,
.po-ex-storage-key span,
.po-ex-storage-queue b {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.po-ex-storage-card span {
    max-width: 92px;
    font: 800 10px/1.25 system-ui, sans-serif;
}
.po-ex-storage-card--core {
    top: 110px;
    left: 280px;
    width: 78px;
    height: 78px;
    border-radius: 20px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--po-accent, #5B9BD5), var(--po-accent-dark, #4178BE));
    box-shadow: 0 14px 30px rgba(65, 120, 190, 0.32);
    z-index: 4;
    animation-delay: 0.08s;
}
.po-ex-storage-card--core::before,
.po-ex-storage-card--plug::before,
.po-ex-storage-health-pulse {
    content: '';
    position: absolute;
    inset: -10px;
    border-radius: 26px;
    border: 2px solid rgba(91, 155, 213, 0.48);
    animation: po-ex-aura-pulse 2.7s ease-out 0.9s infinite;
    pointer-events: none;
}
.po-ex-storage-card--core i {
    font-size: 24px;
}
.po-ex-storage-card--node,
.po-ex-storage-flow-card,
.po-ex-storage-secure-card,
.po-ex-storage-health-card {
    color: #334155;
    background: var(--po-bg-primary, #ffffff);
    border: 1px solid rgba(91, 155, 213, 0.28);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.1);
}
.po-ex-storage-card--node {
    width: 94px;
    height: 58px;
    border-radius: 14px;
}
.po-ex-storage-card--node i,
.po-ex-storage-flow-card i {
    color: var(--po-accent, #5B9BD5);
    font-size: 18px;
}
.po-ex-storage-card--nas { top: 64px; left: 158px; animation-delay: 0.34s; }
.po-ex-storage-card--s3 { top: 64px; left: 402px; animation-delay: 0.46s; }
.po-ex-storage-card--imap { top: 184px; left: 280px; animation-delay: 0.58s; }
.po-ex-storage-flow-card {
    top: 110px;
    width: 96px;
    height: 74px;
    border-radius: 16px;
}
.po-ex-storage-flow-card--source { left: 104px; animation-delay: 0.10s; }
.po-ex-storage-flow-card--target { left: 456px; animation-delay: 0.54s; }
.po-ex-storage-flow-card i {
    font-size: 22px;
}
.po-ex-storage-lane {
    left: 280px;
    width: 146px;
    min-height: 31px;
    padding: 7px 10px;
    border-radius: 12px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    transform: translate(-50%, -50%);
    box-shadow: 0 7px 16px rgba(15, 23, 42, 0.1);
    z-index: 3;
}
.po-ex-storage-lane b {
    max-width: 76px;
    font: 800 11px/1.25 system-ui, sans-serif;
}
.po-ex-storage-lane span {
    max-width: 68px;
    font: 600 10px/1.25 system-ui, sans-serif;
}
.po-ex-storage-lane--byos {
    top: 74px;
    color: #2563eb;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    animation-delay: 0.32s;
}
.po-ex-storage-lane--connector {
    top: 146px;
    color: #047857;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    animation-delay: 0.42s;
}
.po-ex-storage-card--plug {
    top: 110px;
    left: 280px;
    width: 66px;
    height: 66px;
    border-radius: 18px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--po-accent, #5B9BD5), var(--po-accent-dark, #4178BE));
    box-shadow: 0 12px 26px rgba(65, 120, 190, 0.3);
    z-index: 4;
    animation-delay: 0.08s;
}
.po-ex-storage-card--plug i {
    font-size: 25px;
}
.po-ex-storage-proto {
    min-width: 72px;
    max-width: 112px;
    padding: 7px 12px;
    box-sizing: border-box;
    border-radius: 999px;
    text-align: center;
    color: var(--po-accent-dark, #4178BE);
    background: var(--po-bg-primary, #ffffff);
    border: 1px solid rgba(91, 155, 213, 0.32);
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.1);
    font: 800 10px/1.25 system-ui, sans-serif;
    transform: translate(-50%, -50%);
    animation-name: po-ex-storage-fade-in, po-ex-storage-proto-pulse;
    animation-duration: 0.42s, 4.6s;
    animation-timing-function: ease, ease-in-out;
    animation-fill-mode: forwards, none;
    animation-iteration-count: 1, infinite;
}
.po-ex-storage-proto--sftp { top: 62px; left: 174px; animation-delay: 0.30s, 1.2s; }
.po-ex-storage-proto--s3 { top: 62px; left: 386px; animation-delay: 0.42s, 2.2s; }
.po-ex-storage-proto--webdav { top: 158px; left: 174px; animation-delay: 0.54s, 3.2s; }
.po-ex-storage-proto--imap { top: 158px; left: 386px; animation-delay: 0.66s, 4.2s; }
.po-ex-storage-secure-card {
    width: 86px;
    height: 74px;
    border-radius: 16px;
}
.po-ex-storage-secure-card--store {
    top: 110px;
    left: 126px;
    animation-delay: 0.10s;
}
.po-ex-storage-secure-card--store i {
    color: var(--po-accent, #5B9BD5);
    font-size: 28px;
}
.po-ex-storage-secure-card--lock {
    top: 110px;
    left: 434px;
    width: 78px;
    height: 78px;
    border: 0;
    color: #ffffff;
    background: linear-gradient(135deg, #10b981, #059669);
    box-shadow: 0 12px 26px rgba(5, 150, 105, 0.28);
    animation-delay: 0.58s;
}
.po-ex-storage-secure-card--lock i {
    font-size: 26px;
}
.po-ex-storage-secure-card--lock::before {
    content: '';
    position: absolute;
    inset: -10px;
    border-radius: 22px;
    border: 2px solid rgba(16, 185, 129, 0.55);
    animation: po-ex-aura-pulse-green 2.6s ease-out 1.1s infinite;
    pointer-events: none;
}
.po-ex-storage-key {
    left: 280px;
    top: 176px;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    gap: 7px;
    max-width: 150px;
    padding: 7px 13px;
    border-radius: 999px;
    color: #047857;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    box-shadow: 0 8px 16px rgba(16, 185, 129, 0.12);
    font: 800 10px/1.25 system-ui, sans-serif;
    animation-delay: 0.78s;
}
.po-ex-storage-key span {
    display: block;
    max-width: 104px;
}
.po-ex-storage-health-pulse {
    top: 118px;
    left: 280px;
    width: 86px;
    height: 86px;
    margin: -43px 0 0 -43px;
    border-radius: 50%;
    border-color: rgba(16, 185, 129, 0.45);
    z-index: 1;
}
.po-ex-storage-health-card {
    width: 86px;
    height: 62px;
    border-radius: 16px;
}
.po-ex-storage-health-card--main {
    top: 118px;
    left: 280px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--po-accent, #5B9BD5), var(--po-accent-dark, #4178BE));
    box-shadow: 0 12px 26px rgba(65, 120, 190, 0.32);
    z-index: 4;
    animation-delay: 0.10s;
}
.po-ex-storage-health-card--main i {
    font-size: 23px;
}
.po-ex-storage-health-card--mirror-1,
.po-ex-storage-health-card--mirror-2 {
    width: 88px;
    height: 56px;
}
.po-ex-storage-health-card--mirror-1 { top: 58px; left: 172px; animation-delay: 0.36s; }
.po-ex-storage-health-card--mirror-2 { top: 58px; left: 388px; animation-delay: 0.48s; }
.po-ex-storage-health-card--mirror-1 i,
.po-ex-storage-health-card--mirror-2 i {
    color: var(--po-accent, #5B9BD5);
    font-size: 18px;
}
.po-ex-storage-health-card--mirror-1::after,
.po-ex-storage-health-card--mirror-2::after {
    content: '';
    position: absolute;
    top: 6px;
    right: 7px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.75);
    animation: po-ex-led-blink 2.2s ease-in-out infinite;
}
.po-ex-storage-queue {
    left: 280px;
    top: 180px;
    width: 190px;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    animation-delay: 0.72s;
}
.po-ex-storage-queue b {
    max-width: 98px;
    margin-right: 2px;
    color: var(--po-text-muted, #64748b);
    font: 800 10px/1.25 system-ui, sans-serif;
}
.po-ex-storage-queue span {
    width: 24px;
    height: 8px;
    border-radius: 999px;
    background: #bfdbfe;
    animation: po-ex-queue-blink 1.8s ease-in-out infinite;
}
.po-ex-storage-queue span:nth-child(2) { animation-delay: 0.2s; }
.po-ex-storage-queue span:nth-child(3) { animation-delay: 0.4s; }
.po-ex-storage-queue span:nth-child(4) { animation-delay: 0.6s; }
body.po-darkmode .po-ex-storage-card--node,
body.po-darkmode .po-ex-storage-flow-card,
body.po-darkmode .po-ex-storage-proto,
body.po-darkmode .po-ex-storage-secure-card--store,
body.po-darkmode .po-ex-storage-health-card:not(.po-ex-storage-health-card--main) {
    background: rgba(15, 23, 42, 0.96);
    color: #e5edf7;
    border-color: rgba(91, 155, 213, 0.38);
}
body.po-darkmode .po-ex-storage-lane--byos {
    background: rgba(37, 99, 235, 0.16);
}
body.po-darkmode .po-ex-storage-lane--connector,
body.po-darkmode .po-ex-storage-key {
    background: rgba(16, 185, 129, 0.16);
}
@keyframes po-ex-storage-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes po-ex-storage-card-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-3px); }
}
@keyframes po-ex-storage-proto-pulse {
    0%, 80%, 100% { box-shadow: 0 6px 14px rgba(15, 23, 42, 0.1); }
    20%           { box-shadow: 0 6px 14px rgba(15, 23, 42, 0.1), 0 0 16px rgba(91, 155, 213, 0.6); }
}
@keyframes po-ex-storage-tunnel-dash {
    from { stroke-dashoffset: 0; }
    to   { stroke-dashoffset: -32; }
}
@media (prefers-reduced-motion: reduce) {
    .po-ex-storage-dot {
        display: none !important;
    }
    .po-ex-storage-path-secure {
        stroke-dasharray: none !important;
    }
    .po-ex-storage-card-inner,
    .po-ex-storage-proto,
    .po-ex-storage-queue span,
    .po-ex-storage-path-secure {
        animation: none !important;
    }
}

/* Gemeinsame Keyframes fuer neue Fach-Animationen */
@keyframes po-ex-scale-in {
    0%   { opacity: 0; transform: scale(0.55); }
    65%  { opacity: 1; transform: scale(1.08); }
    100% { opacity: 1; transform: scale(1); }
}
@keyframes po-ex-pop-slide {
    0%   { opacity: 0; transform: translate(-55px, -50%) rotate(-8deg) scale(0.75); }
    70%  { opacity: 1; transform: translate(6px, -50%) rotate(2deg) scale(1.05); }
    100% { opacity: 1; transform: translate(0, -50%) rotate(0) scale(1); }
}
@keyframes po-ex-line-grow {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}
@keyframes po-ex-link-grow {
    from { width: 0; }
    to   { width: var(--po-link-width, 100px); }
}
@keyframes po-ex-chip-in {
    0%   { opacity: 0; transform: translateY(10px) scale(0.75); }
    70%  { opacity: 1; transform: translateY(-2px) scale(1.06); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes po-ex-node-in {
    0%   { opacity: 0; transform: scale(0.7); }
    70%  { opacity: 1; transform: scale(1.08); }
    100% { opacity: 1; transform: scale(1); }
}
@keyframes po-ex-dr-rule-in {
    0%   { opacity: 0; transform: translate(var(--po-dr-x), var(--po-dr-y)) scale(0.7); }
    70%  { opacity: 1; transform: translate(var(--po-dr-x), var(--po-dr-y)) scale(1.08); }
    100% { opacity: 1; transform: translate(var(--po-dr-x), var(--po-dr-y)) scale(1); }
}
@keyframes po-ex-card-left-in {
    0%   { opacity: 0; transform: translateX(-38px) scale(0.86); }
    70%  { opacity: 1; transform: translateX(4px) scale(1.04); }
    100% { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes po-ex-card-right-in {
    0%   { opacity: 0; transform: translateX(38px) scale(0.86); }
    70%  { opacity: 1; transform: translateX(-4px) scale(1.04); }
    100% { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes po-ex-globe-in {
    0%   { opacity: 0; transform: scale(0.55) rotate(-12deg); }
    70%  { opacity: 1; transform: scale(1.08) rotate(3deg); }
    100% { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes po-ex-filter-in {
    0%   { opacity: 0; transform: translateX(-50%) translateY(20px); }
    100% { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes po-ex-lane-in {
    0%   { opacity: 0; transform: translateY(14px); }
    100% { opacity: 1; transform: translateY(0); }
}
@keyframes po-ex-ring-visible {
    from { opacity: 0; transform: scale(0.85); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes po-ex-orbit-soft {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
@keyframes po-ex-tunnel-flow {
    from { transform: translateX(-24px); }
    to   { transform: translateX(24px); }
}
@keyframes po-ex-queue-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes po-ex-queue-blink {
    0%, 100% { background: #bfdbfe; }
    50%      { background: #10b981; }
}

/* ── v13 (2026-04-25): neue Loop-Keyframes für Document-Types und Storage-
   Mounts Fach-Animationen (Auras, Floats, Glows, Flow-Dots, Pulses). ───── */

/* Doc-Types: Scan-Linie auf Doc */
@keyframes po-ex-scan-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes po-ex-scan-loop {
    0%   { background-position: 0 -100%; }
    100% { background-position: 0 200%; }
}

/* Generische Aura-Pulse für alle blau geführten Kerne (Type-Badge, Doc,
   PO-Core, Plug, Custom-Card etc.). Atmet einen Ring nach aussen. */
@keyframes po-ex-aura-pulse {
    0%   { opacity: 0.85; transform: scale(0.92); }
    70%  { opacity: 0;    transform: scale(1.18); }
    100% { opacity: 0;    transform: scale(1.22); }
}
/* Grüne Variante für Lock/WORM-Hinweise. */
@keyframes po-ex-aura-pulse-green {
    0%   { opacity: 0.85; transform: scale(0.92); border-color: rgba(16, 185, 129, 0.7); }
    70%  { opacity: 0;    transform: scale(1.20); border-color: rgba(16, 185, 129, 0.2); }
    100% { opacity: 0;    transform: scale(1.24); border-color: rgba(16, 185, 129, 0); }
}

/* Wandernde Flow-Dots auf doc-types Arrow (3 Dots, fixe Strecke 70px). */
@keyframes po-ex-flow-travel {
    0%   { opacity: 0; transform: translateX(0) scale(0.6); }
    15%  { opacity: 1; transform: translateX(12px) scale(1); }
    85%  { opacity: 1; transform: translateX(var(--po-flow-distance-mid, 58px)) scale(1); }
    100% { opacity: 0; transform: translateX(var(--po-flow-distance-end, 70px)) scale(0.6); }
}
/* Wandernde Flow-Dots auf storage-flow Arrow (Strecke 214px). */
@keyframes po-ex-storage-flow-travel {
    0%   { opacity: 0; transform: translateX(0)     scale(0.6); }
    12%  { opacity: 1; transform: translateX(28px)  scale(1); }
    88%  { opacity: 1; transform: translateX(186px) scale(1); }
    100% { opacity: 0; transform: translateX(214px) scale(0.6); }
}
/* Wandernde Flow-Dots auf rotierten Links (doc-rules, storage-mount,
   storage-health). Strecke = var(--po-link-width). */
@keyframes po-ex-dot-travel {
    0%   { opacity: 0; transform: translateX(0); }
    15%  { opacity: 1; }
    85%  { opacity: 1; }
    100% { opacity: 0; transform: translateX(var(--po-link-width, 100px)); }
}

/* Type-Badge subtle breathe (skaliert minimal). */
@keyframes po-ex-badge-breathe {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50%      { transform: translate(-50%, -50%) scale(1.04); }
}

/* Chips floaten subtil (Doc-Types-Chips, Doc-Library-Chips). */
@keyframes po-ex-chip-float {
    0%, 100% { transform: translateY(0) scale(1); }
    50%      { transform: translateY(-3px) scale(1); }
}
@keyframes po-ex-chip-bob {
    0%, 100% { transform: translateY(0) scale(1); }
    50%      { transform: translateY(-3px) scale(1); }
}
/* Karten bobben (doc-library-System/Custom, storage-mount-Nodes,
   storage-health-Mirrors). Behaelt scale(1) damit Intro-End-State erhalten
   bleibt. */
@keyframes po-ex-card-bob {
    0%, 100% { transform: translateY(0) scale(1); }
    50%      { transform: translateY(-3px) scale(1); }
}

/* Doc/Core breathe — atmet (skaliert subtil). */
@keyframes po-ex-doc-breathe {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.04); }
}

/* Zero-Shot-IDP: Karten, Dokument, LLM und Bounding-Boxes. */
@keyframes po-ex-zs-card-in-left {
    0%   { opacity: 0; transform: translate(-18px, -50%) scale(0.88); }
    70%  { opacity: 1; transform: translate(3px, -50%) scale(1.03); }
    100% { opacity: 1; transform: translate(0, -50%) scale(1); }
}
@keyframes po-ex-zs-card-in-right {
    0%   { opacity: 0; transform: translate(18px, -50%) scale(0.88); }
    70%  { opacity: 1; transform: translate(-3px, -50%) scale(1.03); }
    100% { opacity: 1; transform: translate(0, -50%) scale(1); }
}
@keyframes po-ex-zs-card-breathe {
    0%, 100% { transform: translate(0, -50%) scale(1); box-shadow: 0 12px 26px rgba(15, 23, 42, 0.10); }
    50%      { transform: translate(0, -50%) scale(1.015); box-shadow: 0 16px 30px rgba(65, 120, 190, 0.16); }
}
@keyframes po-ex-zs-doc-in {
    0%   { opacity: 0; transform: translateY(10px) rotate(-3deg) scale(0.86); }
    70%  { opacity: 1; transform: translateY(-2px) rotate(1deg) scale(1.04); }
    100% { opacity: 1; transform: translateY(0) rotate(0) scale(1); }
}
@keyframes po-ex-zs-llm-in {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.60); }
    70%  { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes po-ex-zs-llm-pulse {
    0%, 100% { box-shadow: 0 14px 30px rgba(65, 120, 190, 0.32), 0 0 0 rgba(91, 155, 213, 0); }
    50%      { box-shadow: 0 14px 30px rgba(65, 120, 190, 0.32), 0 0 22px rgba(91, 155, 213, 0.45); }
}
@keyframes po-ex-zs-box-in {
    from { opacity: 0; transform: scaleX(0.72); }
    to   { opacity: 1; transform: scaleX(1); }
}
@keyframes po-ex-zs-box-pulse {
    0%, 100% { border-color: rgba(16, 185, 129, 0.72); box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.10); }
    50%      { border-color: rgba(16, 185, 129, 1);    box-shadow: 0 0 0 5px rgba(16, 185, 129, 0.16); }
}

/* Icon-Glow-Stagger für doc-rules Icons (Pulse mit Color-Shift im Loop). */
@keyframes po-ex-icon-glow-stagger {
    0%, 14%, 100% { color: var(--po-accent-dark, #4178BE); filter: drop-shadow(0 0 0 transparent); }
    7%            { color: var(--po-accent, #5B9BD5);      filter: drop-shadow(0 0 6px rgba(91, 155, 213, 0.7)); }
}

/* Plus-Icon (doc-library) Pulse. */
@keyframes po-ex-plus-pulse {
    0%, 100% { transform: scale(1);    box-shadow: 0 6px 16px rgba(65, 120, 190, 0.3); }
    50%      { transform: scale(1.15); box-shadow: 0 6px 16px rgba(65, 120, 190, 0.3), 0 0 18px rgba(91, 155, 213, 0.55); }
}

/* Jurisdiction: Radar-Sweep-Visibility-Anteil (zeigt den Sweep an). */
@keyframes po-ex-jur-radar-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* Jurisdiction-Pin Intro: behält orbital Position via --po-jur-x/y. */
@keyframes po-ex-jur-pin-in {
    0%   { opacity: 0; transform: translate(-50%, -50%) translate(var(--po-jur-x, 0), var(--po-jur-y, 0)) scale(0.75); }
    70%  { opacity: 1; transform: translate(-50%, -50%) translate(var(--po-jur-x, 0), var(--po-jur-y, 0)) scale(1.06); }
    100% { opacity: 1; transform: translate(-50%, -50%) translate(var(--po-jur-x, 0), var(--po-jur-y, 0)) scale(1); }
}
/* Pin-Bob behält orbital Position und scale(1). */
@keyframes po-ex-jur-pin-bob {
    0%, 100% { transform: translate(-50%, -50%) translate(var(--po-jur-x, 0), var(--po-jur-y, 0))                            scale(1); }
    50%      { transform: translate(-50%, -50%) translate(var(--po-jur-x, 0), calc(var(--po-jur-y, 0) - 3px))                scale(1); }
}
/* Globus atmet leicht (nach Intro-Rotation). */
@keyframes po-ex-globe-breathe {
    0%, 100% { transform: scale(1) rotate(0); }
    50%      { transform: scale(1.04) rotate(0); }
}
/* Filter-Pill bekommt einen sanften Highlight-Sweep über die Oberfläche. */
@keyframes po-ex-filter-sweep {
    0%   { left: -60%; }
    50%  { left:  60%; }
    100% { left: 110%; }
}

/* Retention: Marker-Pulse (Marker auf Timeline pulsieren gestaffelt). */
@keyframes po-ex-ret-marker-pulse {
    0%, 88%, 100% { transform: scale(1);    box-shadow: 0 0 0 rgba(91, 155, 213, 0); }
    44%           { transform: scale(1.18); box-shadow: 0 0 12px rgba(91, 155, 213, 0.55); }
}
/* Progress-Dot wandert auf der Timeline (164px breit, 12px Dot → 152px Strecke). */
@keyframes po-ex-ret-progress-travel {
    0%   { opacity: 0; transform: translateX(0); }
    12%  { opacity: 1; transform: translateX(0); }
    88%  { opacity: 1; transform: translateX(152px); }
    100% { opacity: 0; transform: translateX(152px); }
}
/* Years werden als "Stempel" eingefuegt (Rotation + scale). */
@keyframes po-ex-stamp-in {
    0%   { opacity: 0; transform: scale(0.5)  rotate(-8deg); }
    70%  { opacity: 1; transform: scale(1.1)  rotate(2deg); }
    100% { opacity: 1; transform: scale(1)    rotate(0deg); }
}

/* Storage-Flow: Source/Target Card Glow. */
@keyframes po-ex-storage-card-glow {
    0%, 100% { box-shadow: 0 9px 20px rgba(15, 23, 42, 0.1); }
    50%      { box-shadow: 0 9px 20px rgba(15, 23, 42, 0.1), 0 0 18px rgba(91, 155, 213, 0.45); }
}
/* Storage-Flow: BYOS-Lane Pulse (blau) und Connector-Lane Pulse (grün). */
@keyframes po-ex-storage-lane-pulse-blue {
    0%, 100% { box-shadow: 0 7px 16px rgba(15, 23, 42, 0.1); }
    50%      { box-shadow: 0 7px 16px rgba(15, 23, 42, 0.1), 0 0 16px rgba(59, 130, 246, 0.45); }
}
@keyframes po-ex-storage-lane-pulse-green {
    0%, 100% { box-shadow: 0 7px 16px rgba(15, 23, 42, 0.1); }
    50%      { box-shadow: 0 7px 16px rgba(15, 23, 42, 0.1), 0 0 16px rgba(16, 185, 129, 0.45); }
}

/* Storage-Protocols: Protokoll-Intro behält Orbit-Position via --po-sp-x/y. */
@keyframes po-ex-storage-protocol-in {
    0%   { opacity: 0; transform: translate(-50%, -50%) translate(var(--po-sp-x, 0), var(--po-sp-y, 0)) scale(0.65); }
    70%  { opacity: 1; transform: translate(-50%, -50%) translate(var(--po-sp-x, 0), var(--po-sp-y, 0)) scale(1.08); }
    100% { opacity: 1; transform: translate(-50%, -50%) translate(var(--po-sp-x, 0), var(--po-sp-y, 0)) scale(1); }
}
@keyframes po-ex-storage-protocol-pulse {
    0%, 80%, 100% { transform: translate(-50%, -50%) translate(var(--po-sp-x, 0), var(--po-sp-y, 0)) scale(1);    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.1); }
    20%           { transform: translate(-50%, -50%) translate(var(--po-sp-x, 0), var(--po-sp-y, 0)) scale(1.10); box-shadow: 0 6px 14px rgba(15, 23, 42, 0.1), 0 0 16px rgba(91, 155, 213, 0.6); }
}

/* Storage-Security: Tunnel-Background-Bewegung (statt span-Transform, damit
   children ::before/::after nicht mitverschoben werden). */
@keyframes po-ex-storage-tunnel-bg-flow {
    from { background-position:  0 0; }
    to   { background-position: 24px 0; }
}
/* Tunnel-Partikel: einzelne Datenpakete wandern durch den Tunnel. */
@keyframes po-ex-storage-packet-travel {
    0%   { opacity: 0; transform: translateX(0)     scale(0.6); }
    12%  { opacity: 1; transform: translateX(20px)  scale(1); }
    88%  { opacity: 1; transform: translateX(180px) scale(1); }
    100% { opacity: 0; transform: translateX(202px) scale(0.6); }
}
/* Storage-Security Key-Glow (grüner Schein). */
@keyframes po-ex-storage-key-glow {
    0%, 100% { box-shadow: 0 0 0 rgba(16, 185, 129, 0); }
    50%      { box-shadow: 0 0 18px rgba(16, 185, 129, 0.55); }
}

/* Storage-Health Mirror-LED Blink. */
@keyframes po-ex-led-blink {
    0%, 100% { opacity: 0.45; transform: scale(0.85); }
    50%      { opacity: 1;    transform: scale(1.1); }
}

/* Reduced-Motion-Respekt: alle Animationen werden deaktiviert, Elemente bleiben
   in ihrem End-Zustand sichtbar. */
@media (prefers-reduced-motion: reduce) {
    .po-explainer-anim *,
    .po-explainer-anim *::before,
    .po-explainer-anim *::after {
        animation: none !important;
        transition: none !important;
    }
    .po-explainer-anim--isolation .po-ex-silo,
    .po-explainer-anim--isolation .po-ex-barrier,
    .po-explainer-anim--shield .po-ex-shield,
    .po-explainer-anim--shield .po-ex-badge,
    .po-explainer-anim--tiers .po-ex-tier,
    .po-explainer-anim--tiers .po-ex-tier-icon,
    .po-explainer-anim--graph .po-ex-hub,
    .po-explainer-anim--graph .po-ex-user,
    .po-explainer-anim--graph .po-ex-link,
    .po-explainer-anim--rocket .po-ex-rocket,
    .po-explainer-anim--rocket .po-ex-star,
    .po-explainer-anim--ai-dms .po-ex-doc,
    .po-explainer-anim--ai-dms .po-ex-brain,
    .po-explainer-anim--ai-dms .po-ex-tag,
    .po-explainer-anim--ai-dms .po-ex-tier-pill,
    .po-explainer-anim--chat .po-ex-chat-bubble,
    .po-explainer-anim--chat .po-ex-chat-hub,
    .po-explainer-anim--chat .po-ex-chat-doc,
    .po-explainer-anim--industries .po-ex-ind-folder,
    .po-explainer-anim--industries .po-ex-ind-badge,
    .po-explainer-anim--doc-types *,
    .po-explainer-anim--zero-shot-idp *,
    .po-explainer-anim--doc-rules *,
    .po-explainer-anim--doc-library *,
    .po-explainer-anim--jurisdiction *,
    .po-explainer-anim--retention *,
    .po-explainer-anim--storage-mount *,
    .po-explainer-anim--storage-flow *,
    .po-explainer-anim--storage-protocols *,
    .po-explainer-anim--storage-security *,
    .po-explainer-anim--storage-health *,
    .po-explainer-anim--users-create-flow *,
    .po-explainer-anim--users-group-access *,
    .po-explainer-anim--users-role-scope *,
    .po-explainer-anim--users-invite-link *,
    .po-explainer-anim--users-security-review *,
    .po-explainer-anim--tracking-overview *,
    .po-explainer-anim--tracking-zero *,
    .po-explainer-anim--tracking-filters *,
    .po-explainer-anim--tracking-log *,
    .po-explainer-anim--reflink-campaign *,
    .po-explainer-anim--reflink-destination *,
    .po-explainer-anim--reflink-tracking *,
    .po-explainer-anim--reflink-benefit *,
    .po-explainer-anim--reflink-best-practice * {
        opacity: 1 !important;
    }
    .po-explainer-anim--doc-types .po-ex-dt-badge::before,
    .po-explainer-anim--doc-rules .po-ex-dr-doc::before,
    .po-explainer-anim--doc-library .po-ex-lib-custom::before,
    .po-explainer-anim--jurisdiction .po-ex-jur-globe::before,
    .po-explainer-anim--retention .po-ex-ret-lock::before,
    .po-explainer-anim--ai-dms .po-ex-ring,
    .po-explainer-anim--chat .po-ex-chat-ring,
    .po-explainer-anim--rocket .po-ex-smoke,
    .po-explainer-anim--doc-types .po-ex-dt-flow,
    .po-explainer-anim--zero-shot-idp .po-ex-zs-dot,
    .po-explainer-anim--doc-rules .po-ex-dr-link::after,
    .po-explainer-anim--retention .po-ex-ret-timeline .po-ex-ret-progress {
        opacity: 0 !important;
    }
    .po-explainer-anim--isolation .po-ex-silo-1 { transform: translate(calc(-50% - 108px), -50%); }
    .po-explainer-anim--isolation .po-ex-silo-3 { transform: translate(calc(-50% + 108px), -50%); }
    .po-explainer-anim--shield .po-ex-shield { transform: translate(-50%, -50%) scale(1) rotate(0); }
    .po-explainer-anim--shield .po-ex-badge-1 { transform: translate(calc(-50% - 135px), calc(-50% - 52px)); }
    .po-explainer-anim--shield .po-ex-badge-2 { transform: translate(calc(-50% + 100px), calc(-50% - 52px)); }
    .po-explainer-anim--shield .po-ex-badge-3 { transform: translate(calc(-50% - 135px), calc(-50% + 36px)); }
    .po-explainer-anim--shield .po-ex-badge-4 { transform: translate(calc(-50% + 100px), calc(-50% + 36px)); }
    .po-explainer-anim--tiers .po-ex-tier { transform: scaleY(1); }
    .po-explainer-anim--tiers .po-ex-tier-icon { transform: scale(1) rotate(0); }
    .po-explainer-anim--graph .po-ex-hub { transform: scale(1); }
    .po-explainer-anim--rocket .po-ex-rocket { transform: translateY(0) rotate(0); }
    .po-explainer-anim--ai-dms .po-ex-doc { transform: translate(0, -50%); }
    .po-explainer-anim--ai-dms .po-ex-brain { transform: translate(-50%, -50%) scale(1); }
    .po-explainer-anim--ai-dms .po-ex-tag,
    .po-explainer-anim--ai-dms .po-ex-tier-pill { transform: translateX(0) scale(1); }
    .po-explainer-anim--zero-shot-idp .po-ex-zs-prompt-card,
    .po-explainer-anim--zero-shot-idp .po-ex-zs-result-card { transform: translate(0, -50%) scale(1); }
    .po-explainer-anim--zero-shot-idp .po-ex-zs-doc { transform: translateY(0) rotate(0) scale(1); }
    .po-explainer-anim--zero-shot-idp .po-ex-zs-llm { transform: translate(-50%, -50%) scale(1); }
    .po-explainer-anim--chat .po-ex-chat-bubble-user { transform: scale(1) translateY(0); }
    .po-explainer-anim--chat .po-ex-chat-bubble-ai { transform: translateX(-50%) scale(1) translateY(0); }
    .po-explainer-anim--chat .po-ex-chat-hub { transform: scale(1); }
    .po-explainer-anim--industries .po-ex-ind-folder,
    .po-explainer-anim--industries .po-ex-ind-badge { transform: scale(1) rotate(0); }
    .po-explainer-anim--industries .po-ex-ind-label { opacity: 0 !important; transform: translateX(-50%) translateY(0); }
    .po-explainer-anim--industries .po-ex-ind-label-1 { opacity: 1 !important; }
    .po-explainer-anim--reflink-campaign .po-ex-rl-flow,
    .po-explainer-anim--reflink-tracking .po-ex-rl-flow,
    .po-explainer-anim--reflink-benefit .po-ex-rl-quota i {
        transform: scaleX(1) !important;
    }
}

/* v3: Responsive/Mobile-Styles entfernt — Desktop-only (≥1920 HD Min-Spec).
   Die @media (max-width: 600px)-Regel und die -sm Keyframes sind bewusst
   raus, weil PaperOffice auf Enterprise-Desktop läuft. */

/* ----- Dark-Mode-Anpassung ---------------------------------------------- */
body.po-darkmode .po-explainer-modal,
body.dark-mode .po-explainer-modal,
.dark-side .po-explainer-modal {
    background: #1a1d24;
    border-color: rgba(255, 255, 255, 0.1);
    color: #e2e8f0;
    box-shadow:
        0 24px 48px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
body.po-darkmode .po-explainer-header,
body.dark-mode .po-explainer-header,
.dark-side .po-explainer-header {
    background: linear-gradient(180deg, rgba(30, 33, 40, 0.98), rgba(22, 24, 29, 0.96));
    border-bottom-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25);
}
body.po-darkmode .po-explainer-header-title,
body.dark-mode .po-explainer-header-title,
.dark-side .po-explainer-header-title {
    color: #f8fafc;
}
body.po-darkmode .po-explainer-header-subtitle,
body.dark-mode .po-explainer-header-subtitle,
.dark-side .po-explainer-header-subtitle {
    color: #94a3b8;
}
body.po-darkmode .po-explainer-close,
body.dark-mode .po-explainer-close,
.dark-side .po-explainer-close {
    background: #2a2d35;
    border-color: rgba(255, 255, 255, 0.1);
    color: #94a3b8;
}
body.po-darkmode .po-explainer-body,
body.dark-mode .po-explainer-body,
.dark-side .po-explainer-body {
    background: linear-gradient(180deg, #1e2128 0%, #1a1d24 68%, #16181d 100%);
}
body.po-darkmode .po-explainer-overlay[data-po-explainer-layout="standard"] .po-explainer-slide-body .po-ex-slide-copy,
body.po-darkmode .po-explainer-overlay[data-po-explainer-layout="standard"] .po-explainer-slide-body .po-ex-legacy-copy,
body.dark-mode .po-explainer-overlay[data-po-explainer-layout="standard"] .po-explainer-slide-body .po-ex-slide-copy,
body.dark-mode .po-explainer-overlay[data-po-explainer-layout="standard"] .po-explainer-slide-body .po-ex-legacy-copy,
.dark-side .po-explainer-overlay[data-po-explainer-layout="standard"] .po-explainer-slide-body .po-ex-slide-copy,
.dark-side .po-explainer-overlay[data-po-explainer-layout="standard"] .po-explainer-slide-body .po-ex-legacy-copy {
    background: #252830;
    border-color: rgba(255, 255, 255, 0.1);
    border-left-color: rgba(91, 155, 213, 0.55);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
}
body.po-darkmode .po-explainer-slide-title,
body.dark-mode .po-explainer-slide-title,
.dark-side .po-explainer-slide-title {
    color: #f8fafc;
}
body.po-darkmode .po-explainer-slide-body,
body.dark-mode .po-explainer-slide-body,
.dark-side .po-explainer-slide-body {
    color: #cbd5e1;
}
/* v5: <b>/<strong> im Slide-Body muss im Dark-Mode explizit hell sein —
   ohne diese Regel fällt er auf den Light-Mode-Default var(--po-text-primary,
   #0f172a) zurück und ist damit auf dunklem Background unsichtbar. */
body.po-darkmode .po-explainer-slide-body b,
body.po-darkmode .po-explainer-slide-body strong,
body.dark-mode   .po-explainer-slide-body b,
body.dark-mode   .po-explainer-slide-body strong,
.dark-side       .po-explainer-slide-body b,
.dark-side       .po-explainer-slide-body strong {
    color: #f8fafc;
}
body.po-darkmode .po-explainer-footer,
body.dark-mode .po-explainer-footer,
.dark-side .po-explainer-footer {
    background: linear-gradient(180deg, rgba(30, 33, 40, 0.97), rgba(22, 24, 29, 0.98));
    border-top-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 -14px 36px rgba(0, 0, 0, 0.3);
}
body.po-darkmode .po-explainer-btn-secondary,
body.po-darkmode .po-explainer-btn-ghost,
body.dark-mode .po-explainer-btn-secondary,
body.dark-mode .po-explainer-btn-ghost,
.dark-side .po-explainer-btn-secondary,
.dark-side .po-explainer-btn-ghost {
    background: #2a2d35;
    border-color: rgba(255, 255, 255, 0.1);
    color: #cbd5e1;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25);
}

/* Dark-Mode-Anpassung für Illustration-Slot + Animationen (v2).
   Farbige Akzente bleiben kräftig, neutrale Flächen werden dunkler. */
body.po-darkmode .po-explainer-illustration,
body.dark-mode .po-explainer-illustration,
.dark-side .po-explainer-illustration {
    background:
        radial-gradient(circle at 30% 20%, rgba(91, 155, 213, 0.22) 0%, transparent 55%),
        radial-gradient(circle at 75% 80%, rgba(14, 165, 233, 0.18) 0%, transparent 55%),
        linear-gradient(135deg, rgba(91, 155, 213, 0.08) 0%, rgba(65, 120, 190, 0.12) 100%);
}
/* Isolation — Silos auf dunklem Grund */
body.po-darkmode .po-explainer-anim--isolation .po-ex-silo,
body.dark-mode .po-explainer-anim--isolation .po-ex-silo,
.dark-side .po-explainer-anim--isolation .po-ex-silo {
    background: linear-gradient(180deg, #2a2d35 0%, #1e2128 100%);
    border-color: rgba(122, 179, 224, 0.45);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
}
body.po-darkmode .po-explainer-anim--isolation .po-ex-silo::after,
body.dark-mode .po-explainer-anim--isolation .po-ex-silo::after,
.dark-side .po-explainer-anim--isolation .po-ex-silo::after {
    background: rgba(148, 163, 184, 0.25);
    box-shadow: 0 14px 0 rgba(148, 163, 184, 0.25), 0 28px 0 rgba(148, 163, 184, 0.25);
}
/* Shield — Badges dunkel */
body.po-darkmode .po-explainer-anim--shield .po-ex-badge,
body.dark-mode .po-explainer-anim--shield .po-ex-badge,
.dark-side .po-explainer-anim--shield .po-ex-badge {
    background: #2a2d35;
    border-color: rgba(122, 179, 224, 0.45);
    color: #a5c7e5;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4);
}
/* Graph — Hub pulse & Users */
body.po-darkmode .po-explainer-anim--graph .po-ex-hub::after,
body.dark-mode .po-explainer-anim--graph .po-ex-hub::after,
.dark-side .po-explainer-anim--graph .po-ex-hub::after {
    border-color: rgba(122, 179, 224, 0.5);
}
body.po-darkmode .po-explainer-anim--graph .po-ex-user,
body.dark-mode .po-explainer-anim--graph .po-ex-user,
.dark-side .po-explainer-anim--graph .po-ex-user {
    background: #1e2128;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}
/* Rocket — Rumpf */
body.po-darkmode .po-explainer-anim--rocket .po-ex-rocket::before,
body.dark-mode .po-explainer-anim--rocket .po-ex-rocket::before,
.dark-side .po-explainer-anim--rocket .po-ex-rocket::before {
    background: linear-gradient(180deg, #e2e8f0 0%, #94a3b8 100%);
}
/* AI-DMS — Dokument, Tags dunkel */
body.po-darkmode .po-explainer-anim--ai-dms .po-ex-doc,
body.dark-mode .po-explainer-anim--ai-dms .po-ex-doc,
.dark-side .po-explainer-anim--ai-dms .po-ex-doc {
    background: #2a2d35;
    border-color: rgba(148, 163, 184, 0.35);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45);
}
body.po-darkmode .po-explainer-anim--zero-shot-idp .po-ex-zs-doc,
body.dark-mode .po-explainer-anim--zero-shot-idp .po-ex-zs-doc,
.dark-side .po-explainer-anim--zero-shot-idp .po-ex-zs-doc,
body.po-darkmode .po-explainer-anim--zero-shot-idp .po-ex-zs-prompt-card,
body.dark-mode .po-explainer-anim--zero-shot-idp .po-ex-zs-prompt-card,
.dark-side .po-explainer-anim--zero-shot-idp .po-ex-zs-prompt-card,
body.po-darkmode .po-explainer-anim--zero-shot-idp .po-ex-zs-result-card,
body.dark-mode .po-explainer-anim--zero-shot-idp .po-ex-zs-result-card,
.dark-side .po-explainer-anim--zero-shot-idp .po-ex-zs-result-card,
body.po-darkmode .po-explainer-anim--zero-shot-idp .po-ex-zs-badge,
body.dark-mode .po-explainer-anim--zero-shot-idp .po-ex-zs-badge,
.dark-side .po-explainer-anim--zero-shot-idp .po-ex-zs-badge {
    background: #2a2d35;
    border-color: rgba(122, 179, 224, 0.38);
    color: #e5edf7;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.42);
}
body.po-darkmode .po-explainer-anim--zero-shot-idp .po-ex-zs-prompt-card strong,
body.dark-mode .po-explainer-anim--zero-shot-idp .po-ex-zs-prompt-card strong,
.dark-side .po-explainer-anim--zero-shot-idp .po-ex-zs-prompt-card strong,
body.po-darkmode .po-explainer-anim--zero-shot-idp .po-ex-zs-result-card strong,
body.dark-mode .po-explainer-anim--zero-shot-idp .po-ex-zs-result-card strong,
.dark-side .po-explainer-anim--zero-shot-idp .po-ex-zs-result-card strong {
    color: #f8fafc;
}
body.po-darkmode .po-explainer-anim--zero-shot-idp .po-ex-zs-line,
body.dark-mode .po-explainer-anim--zero-shot-idp .po-ex-zs-line,
.dark-side .po-explainer-anim--zero-shot-idp .po-ex-zs-line {
    background: rgba(148, 163, 184, 0.3);
}
body.po-darkmode .po-explainer-anim--ai-dms .po-ex-doc::before,
body.dark-mode .po-explainer-anim--ai-dms .po-ex-doc::before,
.dark-side .po-explainer-anim--ai-dms .po-ex-doc::before {
    background: rgba(148, 163, 184, 0.3);
    box-shadow:
        0 10px 0 rgba(148, 163, 184, 0.3),
        0 20px 0 rgba(148, 163, 184, 0.3),
        0 30px 0 rgba(148, 163, 184, 0.3),
        0 40px 0 rgba(148, 163, 184, 0.3),
        0 50px 0 rgba(148, 163, 184, 0.3),
        0 60px 0 rgba(148, 163, 184, 0.3);
}
body.po-darkmode .po-explainer-anim--ai-dms .po-ex-doc::after,
body.dark-mode .po-explainer-anim--ai-dms .po-ex-doc::after,
.dark-side .po-explainer-anim--ai-dms .po-ex-doc::after {
    background: linear-gradient(225deg, rgba(148, 163, 184, 0.35) 50%, transparent 50%);
}
body.po-darkmode .po-explainer-anim--ai-dms .po-ex-tag,
body.dark-mode .po-explainer-anim--ai-dms .po-ex-tag,
.dark-side .po-explainer-anim--ai-dms .po-ex-tag {
    background: #2a2d35;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4);
}
/* v5: Dark-Mode Tag-Farben nach Tier-Gruppe */
body.po-darkmode .po-explainer-anim--ai-dms .po-ex-tag-basic-1,
body.dark-mode   .po-explainer-anim--ai-dms .po-ex-tag-basic-1,
.dark-side       .po-explainer-anim--ai-dms .po-ex-tag-basic-1,
body.po-darkmode .po-explainer-anim--ai-dms .po-ex-tag-basic-2,
body.dark-mode   .po-explainer-anim--ai-dms .po-ex-tag-basic-2,
.dark-side       .po-explainer-anim--ai-dms .po-ex-tag-basic-2   { color: #a5c7e5; border-color: rgba(122, 179, 224, 0.55); }

body.po-darkmode .po-explainer-anim--ai-dms .po-ex-tag-premium-1,
body.dark-mode   .po-explainer-anim--ai-dms .po-ex-tag-premium-1,
.dark-side       .po-explainer-anim--ai-dms .po-ex-tag-premium-1,
body.po-darkmode .po-explainer-anim--ai-dms .po-ex-tag-premium-2,
body.dark-mode   .po-explainer-anim--ai-dms .po-ex-tag-premium-2,
.dark-side       .po-explainer-anim--ai-dms .po-ex-tag-premium-2 { color: #c4b5fd; border-color: rgba(167, 139, 250, 0.55); }

body.po-darkmode .po-explainer-anim--ai-dms .po-ex-tag-ultra-1,
body.dark-mode   .po-explainer-anim--ai-dms .po-ex-tag-ultra-1,
.dark-side       .po-explainer-anim--ai-dms .po-ex-tag-ultra-1,
body.po-darkmode .po-explainer-anim--ai-dms .po-ex-tag-ultra-2,
body.dark-mode   .po-explainer-anim--ai-dms .po-ex-tag-ultra-2,
.dark-side       .po-explainer-anim--ai-dms .po-ex-tag-ultra-2   { color: #f9a8d4; border-color: rgba(244, 114, 182, 0.55); }

/* Tier-Pills im Dark-Mode: Badge-Farben bleiben wie in documents-overview,
   bekommen aber etwas mehr Kontrast zum dunklen Hintergrund. */
body.po-darkmode .po-explainer-anim--ai-dms .po-ex-tier-pill,
body.dark-mode   .po-explainer-anim--ai-dms .po-ex-tier-pill,
.dark-side       .po-explainer-anim--ai-dms .po-ex-tier-pill {
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.5);
}
body.po-darkmode .po-explainer-anim--ai-dms .po-ex-tier-pill-ultra,
body.dark-mode   .po-explainer-anim--ai-dms .po-ex-tier-pill-ultra,
.dark-side       .po-explainer-anim--ai-dms .po-ex-tier-pill-ultra {
    box-shadow: 0 6px 14px rgba(109, 40, 217, 0.35);
}

/* Document-Types/Storage-Mounts — neutrale Karten im Dark-Mode */
body.po-darkmode .po-explainer-anim--doc-types .po-ex-dt-doc,
body.po-darkmode .po-explainer-anim--doc-types .po-ex-dt-chip,
body.po-darkmode .po-explainer-anim--doc-rules .po-ex-dr-rule,
body.po-darkmode .po-explainer-anim--doc-library .po-ex-lib-card,
body.po-darkmode .po-explainer-anim--jurisdiction .po-ex-jur-pin,
body.po-darkmode .po-explainer-anim--retention .po-ex-ret-doc,
body.dark-mode .po-explainer-anim--doc-types .po-ex-dt-doc,
body.dark-mode .po-explainer-anim--doc-types .po-ex-dt-chip,
body.dark-mode .po-explainer-anim--doc-rules .po-ex-dr-rule,
body.dark-mode .po-explainer-anim--doc-library .po-ex-lib-card,
body.dark-mode .po-explainer-anim--jurisdiction .po-ex-jur-pin,
body.dark-mode .po-explainer-anim--retention .po-ex-ret-doc,
.dark-side .po-explainer-anim--doc-types .po-ex-dt-doc,
.dark-side .po-explainer-anim--doc-types .po-ex-dt-chip,
.dark-side .po-explainer-anim--doc-rules .po-ex-dr-rule,
.dark-side .po-explainer-anim--doc-library .po-ex-lib-card,
.dark-side .po-explainer-anim--jurisdiction .po-ex-jur-pin,
.dark-side .po-explainer-anim--retention .po-ex-ret-doc {
    background: #2a2d35;
    border-color: rgba(122, 179, 224, 0.45);
    color: #cbd5e1;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.42);
}
body.po-darkmode .po-explainer-anim--doc-types .po-ex-dt-line,
body.dark-mode .po-explainer-anim--doc-types .po-ex-dt-line,
.dark-side .po-explainer-anim--doc-types .po-ex-dt-line {
    background: rgba(148, 163, 184, 0.3);
}

/* v7: Chat-Slide Dark-Mode — User-Bubble behält PO-Blau (ist ohnehin hell genug),
   AI-Reply-Bubble bekommt dunklen Hintergrund mit weißem Text und heller Border,
   Docs werden grau-dunkel mit hellgrauen Zeilen-Andeutungen. */
body.po-darkmode .po-explainer-anim--chat .po-ex-chat-bubble-ai,
body.dark-mode   .po-explainer-anim--chat .po-ex-chat-bubble-ai,
.dark-side       .po-explainer-anim--chat .po-ex-chat-bubble-ai {
    background: #2a2d35;
    color: #f8fafc;
    border-color: rgba(122, 179, 224, 0.55);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
}
body.po-darkmode .po-explainer-anim--chat .po-ex-chat-bubble-ai::after,
body.dark-mode   .po-explainer-anim--chat .po-ex-chat-bubble-ai::after,
.dark-side       .po-explainer-anim--chat .po-ex-chat-bubble-ai::after {
    border-bottom-color: rgba(122, 179, 224, 0.55);
}
body.po-darkmode .po-explainer-anim--chat .po-ex-chat-cite,
body.dark-mode   .po-explainer-anim--chat .po-ex-chat-cite,
.dark-side       .po-explainer-anim--chat .po-ex-chat-cite {
    background: rgba(91, 155, 213, 0.18);
    color: #a5c7e5;
}
body.po-darkmode .po-explainer-anim--chat .po-ex-chat-doc,
body.dark-mode   .po-explainer-anim--chat .po-ex-chat-doc,
.dark-side       .po-explainer-anim--chat .po-ex-chat-doc {
    background: #2a2d35;
    border-color: rgba(148, 163, 184, 0.35);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.45);
}
body.po-darkmode .po-explainer-anim--chat .po-ex-chat-doc::before,
body.dark-mode   .po-explainer-anim--chat .po-ex-chat-doc::before,
.dark-side       .po-explainer-anim--chat .po-ex-chat-doc::before {
    background: rgba(148, 163, 184, 0.3);
    box-shadow:
        0 6px 0 rgba(148, 163, 184, 0.3),
        0 12px 0 rgba(148, 163, 184, 0.3),
        0 18px 0 rgba(148, 163, 184, 0.3),
        0 24px 0 rgba(148, 163, 184, 0.3),
        0 30px 0 rgba(148, 163, 184, 0.3),
        0 36px 0 rgba(148, 163, 184, 0.3);
}
body.po-darkmode .po-explainer-anim--chat .po-ex-chat-doc::after,
body.dark-mode   .po-explainer-anim--chat .po-ex-chat-doc::after,
.dark-side       .po-explainer-anim--chat .po-ex-chat-doc::after {
    background: linear-gradient(225deg, rgba(148, 163, 184, 0.35) 50%, transparent 50%);
}
body.po-darkmode .po-explainer-anim--chat .po-ex-chat-hub,
body.dark-mode   .po-explainer-anim--chat .po-ex-chat-hub,
.dark-side       .po-explainer-anim--chat .po-ex-chat-hub {
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.55);
}

/* v10 (2026-04-24): Industries-Slide Dark-Mode — Ordner und Label-Pill bleiben
   farbkräftig (sehen auf dunklem Grund ohnehin gut aus), Branchen-Badges
   werden dunkelgrau mit heller Border + hellem Icon. */
body.po-darkmode .po-explainer-anim--industries .po-ex-ind-badge,
body.dark-mode   .po-explainer-anim--industries .po-ex-ind-badge,
.dark-side       .po-explainer-anim--industries .po-ex-ind-badge {
    background: #2a2d35;
    border-color: rgba(122, 179, 224, 0.55);
    color: #a5c7e5;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45);
}
body.po-darkmode .po-explainer-anim--industries .po-ex-ind-folder i,
body.dark-mode   .po-explainer-anim--industries .po-ex-ind-folder i,
.dark-side       .po-explainer-anim--industries .po-ex-ind-folder i {
    filter: drop-shadow(0 8px 22px rgba(91, 155, 213, 0.55));
}
body.po-darkmode .po-explainer-anim--industries .po-ex-ind-label,
body.dark-mode   .po-explainer-anim--industries .po-ex-ind-label,
.dark-side       .po-explainer-anim--industries .po-ex-ind-label {
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.5);
}

/* Fallback-Icon dunkler Hintergrund */
body.po-darkmode .po-explainer-slide-icon,
body.dark-mode .po-explainer-slide-icon,
.dark-side .po-explainer-slide-icon {
    background: linear-gradient(135deg, rgba(122, 179, 224, 0.22) 0%, rgba(91, 155, 213, 0.32) 100%);
    color: #a5c7e5;
}

/* ============================================================================
   USERS-EXPLAINER-ANIMATIONEN
   Eigene Visuals für Benutzerverwaltung: Anlegen, Gruppen, Rollen, Einladung,
   Security-Review. Keine Workspace-Tier-Grafiken mehr.
   ============================================================================ */

.po-explainer-anim--users-create-flow,
.po-explainer-anim--users-group-access,
.po-explainer-anim--users-role-scope,
.po-explainer-anim--users-invite-link,
.po-explainer-anim--users-security-review {
    position: absolute;
    inset: 0;
}

.po-explainer-anim--users-create-flow .po-ex-uc-card,
.po-explainer-anim--users-create-flow .po-ex-uc-check,
.po-explainer-anim--users-group-access .po-ex-uga-hub,
.po-explainer-anim--users-group-access .po-ex-uga-node,
.po-explainer-anim--users-role-scope .po-ex-urs-role,
.po-explainer-anim--users-invite-link .po-ex-uil-account,
.po-explainer-anim--users-invite-link .po-ex-uil-link,
.po-explainer-anim--users-invite-link .po-ex-uil-expiry,
.po-explainer-anim--users-invite-link .po-ex-uil-sent,
.po-explainer-anim--users-security-review .po-ex-usr-shield,
.po-explainer-anim--users-security-review .po-ex-usr-check {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-radius: 14px;
    border: 1px solid rgba(91, 155, 213, 0.22);
    background: rgba(255, 255, 255, 0.9);
    color: #334155;
    box-shadow: 0 10px 24px rgba(91, 155, 213, 0.14);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.po-explainer-anim--users-create-flow .po-ex-uc-card {
    width: 106px;
    height: 58px;
    top: 82px;
    opacity: 0;
    transform: translateY(16px) scale(0.96);
    animation: po-ex-users-card-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.po-explainer-anim--users-create-flow .po-ex-uc-card i,
.po-explainer-anim--users-group-access .po-ex-uga-node i,
.po-explainer-anim--users-invite-link i,
.po-explainer-anim--users-security-review .po-ex-usr-check i {
    color: var(--po-accent, #5B9BD5);
}
.po-explainer-anim--users-create-flow .po-ex-uc-card-1 { left: 76px; animation-delay: 0.1s; }
.po-explainer-anim--users-create-flow .po-ex-uc-card-2 { left: 226px; animation-delay: 0.28s; }
.po-explainer-anim--users-create-flow .po-ex-uc-card-3 { left: 376px; animation-delay: 0.46s; }
.po-explainer-anim--users-create-flow .po-ex-uc-check {
    left: 452px;
    top: 32px;
    width: 92px;
    height: 42px;
    color: #047857;
    border-color: rgba(16, 185, 129, 0.28);
    background: rgba(236, 253, 245, 0.94);
    opacity: 0;
    transform: scale(0.82);
    animation: po-ex-users-check-in 0.5s ease 0.88s both;
}
.po-explainer-anim--users-create-flow .po-ex-uc-line {
    position: absolute;
    top: 110px;
    width: 44px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(91, 155, 213, 0.1), rgba(91, 155, 213, 0.75));
    opacity: 0;
    animation: po-ex-users-line-flow 1.4s ease-in-out infinite;
}
.po-explainer-anim--users-create-flow .po-ex-uc-line-1 { left: 184px; animation-delay: 0.35s; }
.po-explainer-anim--users-create-flow .po-ex-uc-line-2 { left: 334px; animation-delay: 0.55s; }
.po-explainer-anim--users-create-flow .po-ex-uc-line-3 { left: 474px; top: 76px; width: 32px; transform: rotate(-42deg); animation-delay: 0.8s; }

@keyframes po-ex-users-card-in {
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes po-ex-users-check-in {
    60% { opacity: 1; transform: scale(1.08); }
    100% { opacity: 1; transform: scale(1); }
}
@keyframes po-ex-users-line-flow {
    0%, 100% { opacity: 0.25; transform: translateX(0); }
    50% { opacity: 1; transform: translateX(6px); }
}

.po-explainer-anim--users-group-access .po-ex-uga-hub {
    left: 215px;
    top: 72px;
    width: 130px;
    height: 76px;
    color: #fff;
    background: linear-gradient(135deg, var(--po-accent, #5B9BD5), var(--po-accent-dark, #4178BE));
    border-color: rgba(255, 255, 255, 0.3);
    animation: po-ex-users-hub-pulse 2.2s ease-in-out infinite;
}
.po-explainer-anim--users-group-access .po-ex-uga-node {
    width: 128px;
    height: 46px;
    opacity: 0;
    animation: po-ex-users-node-in 0.55s ease both;
}
.po-explainer-anim--users-group-access .po-ex-uga-node-1 { left: 48px; top: 46px; animation-delay: 0.15s; }
.po-explainer-anim--users-group-access .po-ex-uga-node-2 { right: 48px; top: 46px; animation-delay: 0.3s; }
.po-explainer-anim--users-group-access .po-ex-uga-node-3 { left: 216px; bottom: 32px; animation-delay: 0.45s; }
.po-explainer-anim--users-group-access .po-ex-uga-link {
    position: absolute;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(91, 155, 213, 0.72), transparent);
    opacity: 0;
    animation: po-ex-users-link-draw 1.8s ease-in-out infinite;
}
.po-explainer-anim--users-group-access .po-ex-uga-link-1 { left: 174px; top: 70px; width: 52px; transform: rotate(14deg); animation-delay: 0.2s; }
.po-explainer-anim--users-group-access .po-ex-uga-link-2 { right: 174px; top: 70px; width: 52px; transform: rotate(-14deg); animation-delay: 0.35s; }
.po-explainer-anim--users-group-access .po-ex-uga-link-3 { left: 272px; top: 148px; width: 48px; transform: rotate(90deg); animation-delay: 0.5s; }

@keyframes po-ex-users-hub-pulse {
    0%, 100% { box-shadow: 0 12px 28px rgba(91, 155, 213, 0.22); transform: scale(1); }
    50% { box-shadow: 0 16px 34px rgba(91, 155, 213, 0.34); transform: scale(1.03); }
}
@keyframes po-ex-users-node-in {
    from { opacity: 0; transform: translateY(12px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes po-ex-users-link-draw {
    0%, 100% { opacity: 0.22; background-position: -40px 0; }
    50% { opacity: 1; background-position: 40px 0; }
}

.po-explainer-anim--users-role-scope .po-ex-urs-lane {
    position: absolute;
    left: 94px;
    right: 94px;
    top: 110px;
    height: 2px;
    background: rgba(91, 155, 213, 0.18);
}
.po-explainer-anim--users-role-scope .po-ex-urs-role {
    width: 132px;
    height: 64px;
    top: 78px;
    opacity: 0;
    animation: po-ex-users-role-in 0.55s ease both;
}
.po-explainer-anim--users-role-scope .po-ex-urs-role-owner { left: 72px; animation-delay: 0.12s; color: #92400e; border-color: rgba(245, 158, 11, 0.26); }
.po-explainer-anim--users-role-scope .po-ex-urs-role-admin { left: 214px; animation-delay: 0.3s; color: #1d4ed8; }
.po-explainer-anim--users-role-scope .po-ex-urs-role-user { left: 356px; animation-delay: 0.48s; color: #047857; border-color: rgba(16, 185, 129, 0.24); }
.po-explainer-anim--users-role-scope .po-ex-urs-scope {
    position: absolute;
    bottom: 46px;
    width: 74px;
    height: 8px;
    border-radius: 999px;
    background: rgba(91, 155, 213, 0.2);
    opacity: 0;
    animation: po-ex-users-scope-scan 1.8s ease-in-out infinite;
}
.po-explainer-anim--users-role-scope .po-ex-urs-scope-1 { left: 100px; animation-delay: 0.2s; }
.po-explainer-anim--users-role-scope .po-ex-urs-scope-2 { left: 244px; animation-delay: 0.38s; }
.po-explainer-anim--users-role-scope .po-ex-urs-scope-3 { left: 386px; animation-delay: 0.56s; }

@keyframes po-ex-users-role-in {
    from { opacity: 0; transform: translateY(-10px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes po-ex-users-scope-scan {
    0%, 100% { opacity: 0.2; transform: scaleX(0.72); }
    50% { opacity: 0.85; transform: scaleX(1); }
}

.po-explainer-anim--users-invite-link .po-ex-uil-account,
.po-explainer-anim--users-invite-link .po-ex-uil-link,
.po-explainer-anim--users-invite-link .po-ex-uil-expiry,
.po-explainer-anim--users-invite-link .po-ex-uil-sent {
    width: 116px;
    height: 52px;
    opacity: 0;
    animation: po-ex-users-invite-pop 0.55s ease both;
}
.po-explainer-anim--users-invite-link .po-ex-uil-account { left: 60px; top: 84px; animation-delay: 0.1s; }
.po-explainer-anim--users-invite-link .po-ex-uil-link { left: 222px; top: 84px; animation-delay: 0.28s; }
.po-explainer-anim--users-invite-link .po-ex-uil-expiry { left: 384px; top: 84px; animation-delay: 0.46s; }
.po-explainer-anim--users-invite-link .po-ex-uil-sent {
    left: 222px;
    top: 24px;
    color: #047857;
    background: rgba(236, 253, 245, 0.94);
    border-color: rgba(16, 185, 129, 0.25);
    animation-delay: 0.78s;
}
.po-explainer-anim--users-invite-link .po-ex-uil-path {
    position: absolute;
    top: 110px;
    width: 46px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(91, 155, 213, 0.12), rgba(91, 155, 213, 0.75));
    animation: po-ex-users-line-flow 1.5s ease-in-out infinite;
}
.po-explainer-anim--users-invite-link .po-ex-uil-path-1 { left: 176px; animation-delay: 0.2s; }
.po-explainer-anim--users-invite-link .po-ex-uil-path-2 { left: 338px; animation-delay: 0.42s; }
.po-explainer-anim--users-invite-link .po-ex-uil-path-3 { left: 280px; top: 76px; width: 34px; transform: rotate(-90deg); animation-delay: 0.65s; }

@keyframes po-ex-users-invite-pop {
    from { opacity: 0; transform: translateY(14px) scale(0.94); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.po-explainer-anim--users-security-review .po-ex-usr-shield {
    left: 222px;
    top: 56px;
    width: 116px;
    height: 92px;
    border-radius: 22px;
    color: #fff;
    font-size: 34px;
    background: linear-gradient(135deg, var(--po-accent, #5B9BD5), var(--po-accent-dark, #4178BE));
    animation: po-ex-users-shield-glow 2.2s ease-in-out infinite;
}
.po-explainer-anim--users-security-review .po-ex-usr-check {
    width: 122px;
    height: 40px;
    opacity: 0;
    animation: po-ex-users-security-check 0.5s ease both;
}
.po-explainer-anim--users-security-review .po-ex-usr-check-1 { left: 56px; top: 36px; animation-delay: 0.12s; }
.po-explainer-anim--users-security-review .po-ex-usr-check-2 { right: 56px; top: 36px; animation-delay: 0.28s; }
.po-explainer-anim--users-security-review .po-ex-usr-check-3 { left: 56px; bottom: 38px; animation-delay: 0.44s; }
.po-explainer-anim--users-security-review .po-ex-usr-check-4 { right: 56px; bottom: 38px; animation-delay: 0.6s; }

@keyframes po-ex-users-shield-glow {
    0%, 100% { transform: scale(1); box-shadow: 0 14px 32px rgba(91, 155, 213, 0.28); }
    50% { transform: scale(1.04); box-shadow: 0 18px 42px rgba(91, 155, 213, 0.42); }
}
@keyframes po-ex-users-security-check {
    from { opacity: 0; transform: translateY(12px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

body.po-darkmode .po-explainer-anim--users-create-flow .po-ex-uc-card,
body.po-darkmode .po-explainer-anim--users-group-access .po-ex-uga-node,
body.po-darkmode .po-explainer-anim--users-role-scope .po-ex-urs-role,
body.po-darkmode .po-explainer-anim--users-invite-link .po-ex-uil-account,
body.po-darkmode .po-explainer-anim--users-invite-link .po-ex-uil-link,
body.po-darkmode .po-explainer-anim--users-invite-link .po-ex-uil-expiry,
body.po-darkmode .po-explainer-anim--users-security-review .po-ex-usr-check,
body.dark-mode .po-explainer-anim--users-create-flow .po-ex-uc-card,
body.dark-mode .po-explainer-anim--users-group-access .po-ex-uga-node,
body.dark-mode .po-explainer-anim--users-role-scope .po-ex-urs-role,
body.dark-mode .po-explainer-anim--users-invite-link .po-ex-uil-account,
body.dark-mode .po-explainer-anim--users-invite-link .po-ex-uil-link,
body.dark-mode .po-explainer-anim--users-invite-link .po-ex-uil-expiry,
body.dark-mode .po-explainer-anim--users-security-review .po-ex-usr-check,
.dark-side .po-explainer-anim--users-create-flow .po-ex-uc-card,
.dark-side .po-explainer-anim--users-group-access .po-ex-uga-node,
.dark-side .po-explainer-anim--users-role-scope .po-ex-urs-role,
.dark-side .po-explainer-anim--users-invite-link .po-ex-uil-account,
.dark-side .po-explainer-anim--users-invite-link .po-ex-uil-link,
.dark-side .po-explainer-anim--users-invite-link .po-ex-uil-expiry,
.dark-side .po-explainer-anim--users-security-review .po-ex-usr-check {
    background: #2a2d35;
    color: #f8fafc;
    border-color: rgba(122, 179, 224, 0.42);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.42);
}


/* ── Tracking — klare Funnel-, Nullzustand-, Filter- und Log-Animationen ── */
.po-explainer-anim--tracking-overview,
.po-explainer-anim--tracking-zero,
.po-explainer-anim--tracking-filters,
.po-explainer-anim--tracking-log {
    position: absolute;
    inset: 0;
}
.po-explainer-anim--tracking-overview .po-ex-tracking-card,
.po-explainer-anim--tracking-filters .po-ex-filter-panel,
.po-explainer-anim--tracking-filters .po-ex-filter-result,
.po-explainer-anim--tracking-log .po-ex-log-table,
.po-explainer-anim--tracking-zero .po-ex-zero-card,
.po-explainer-anim--tracking-zero .po-ex-zero-badge {
    position: absolute;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(91, 155, 213, 0.22);
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.10);
}
.po-explainer-anim--tracking-overview .po-ex-tracking-card {
    top: 86px;
    width: 104px;
    height: 70px;
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--po-accent-dark, #4178BE);
    font: 700 11px/1.2 system-ui, sans-serif;
    opacity: 0;
    animation: po-ex-tracking-card-in 0.48s ease both;
}
.po-explainer-anim--tracking-overview .po-ex-tracking-card i { font-size: 18px; color: var(--po-accent, #5B9BD5); }
.po-explainer-anim--tracking-overview .po-ex-tracking-link { left: 42px; animation-delay: 0.1s; }
.po-explainer-anim--tracking-overview .po-ex-tracking-click { left: 174px; animation-delay: 0.28s; }
.po-explainer-anim--tracking-overview .po-ex-tracking-signup { left: 306px; animation-delay: 0.46s; }
.po-explainer-anim--tracking-overview .po-ex-tracking-conversion { left: 438px; animation-delay: 0.64s; color: #047857; }
.po-explainer-anim--tracking-overview .po-ex-tracking-line {
    position: absolute;
    top: 120px;
    width: 28px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(91, 155, 213, 0.16), rgba(91, 155, 213, 0.8));
    transform-origin: left center;
    transform: scaleX(0);
    animation: po-ex-tracking-line-in 0.42s ease both;
}
.po-explainer-anim--tracking-overview .po-ex-tracking-line-1 { left: 146px; animation-delay: 0.46s; }
.po-explainer-anim--tracking-overview .po-ex-tracking-line-2 { left: 278px; animation-delay: 0.64s; }
.po-explainer-anim--tracking-overview .po-ex-tracking-line-3 { left: 410px; animation-delay: 0.82s; }

.po-explainer-anim--tracking-zero .po-ex-zero-card {
    left: 198px;
    top: 56px;
    width: 164px;
    height: 118px;
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--po-accent-dark, #4178BE);
    opacity: 0;
    animation: po-ex-zero-card-in 0.58s ease 0.12s both;
}
.po-explainer-anim--tracking-zero .po-ex-zero-card i { font-size: 26px; color: #64748b; }
.po-explainer-anim--tracking-zero .po-ex-zero-card strong { font: 800 24px/1 system-ui, sans-serif; color: #0f172a; }
.po-explainer-anim--tracking-zero .po-ex-zero-card span { font: 700 11px/1.2 system-ui, sans-serif; color: #64748b; text-transform: uppercase; letter-spacing: 0.06em; }
.po-explainer-anim--tracking-zero .po-ex-zero-dot {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: rgba(91, 155, 213, 0.28);
    animation: po-ex-zero-pulse 1.9s ease-in-out infinite;
}
.po-explainer-anim--tracking-zero .po-ex-zero-dot-1 { left: 150px; top: 78px; animation-delay: 0.1s; }
.po-explainer-anim--tracking-zero .po-ex-zero-dot-2 { right: 150px; top: 80px; animation-delay: 0.45s; }
.po-explainer-anim--tracking-zero .po-ex-zero-dot-3 { left: 274px; bottom: 34px; animation-delay: 0.8s; }
.po-explainer-anim--tracking-zero .po-ex-zero-badge {
    left: 222px;
    bottom: 28px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 14px;
    border-radius: 999px;
    color: #047857;
    font: 800 11px/1 system-ui, sans-serif;
    background: rgba(236, 253, 245, 0.96);
    border-color: rgba(16, 185, 129, 0.24);
    opacity: 0;
    animation: po-ex-zero-badge-in 0.45s ease 0.74s both;
}

.po-explainer-anim--tracking-filters .po-ex-filter-panel {
    left: 62px;
    top: 58px;
    width: 210px;
    height: 118px;
    border-radius: 22px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-sizing: border-box;
}
.po-explainer-anim--tracking-filters .po-ex-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(91, 155, 213, 0.10);
    color: var(--po-accent-dark, #4178BE);
    font: 800 10px/1 system-ui, sans-serif;
    opacity: 0;
    transform: translateX(-12px);
    animation: po-ex-filter-chip-in 0.42s ease both;
}
.po-explainer-anim--tracking-filters .po-ex-filter-chip-1 { animation-delay: 0.16s; }
.po-explainer-anim--tracking-filters .po-ex-filter-chip-2 { animation-delay: 0.32s; }
.po-explainer-anim--tracking-filters .po-ex-filter-chip-3 { animation-delay: 0.48s; }
.po-explainer-anim--tracking-filters .po-ex-filter-result {
    right: 62px;
    top: 74px;
    width: 188px;
    height: 84px;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #047857;
    font: 800 12px/1.2 system-ui, sans-serif;
    opacity: 0;
    animation: po-ex-filter-result-in 0.5s ease 0.72s both;
}
.po-explainer-anim--tracking-filters .po-ex-filter-result i { font-size: 20px; }

.po-explainer-anim--tracking-log .po-ex-log-table {
    left: 58px;
    right: 58px;
    top: 48px;
    height: 140px;
    border-radius: 22px;
    padding: 14px;
    box-sizing: border-box;
    overflow: hidden;
}
.po-explainer-anim--tracking-log .po-ex-log-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 12px;
    color: #475569;
    font: 700 10.5px/1 system-ui, sans-serif;
    opacity: 0;
    transform: translateY(10px);
    animation: po-ex-log-row-in 0.42s ease both;
}
.po-explainer-anim--tracking-log .po-ex-log-header {
    background: rgba(91, 155, 213, 0.10);
    color: var(--po-accent-dark, #4178BE);
    opacity: 1;
    transform: none;
    animation: none;
}
.po-explainer-anim--tracking-log .po-ex-log-row-1 { animation-delay: 0.18s; }
.po-explainer-anim--tracking-log .po-ex-log-row-2 { animation-delay: 0.36s; }
.po-explainer-anim--tracking-log .po-ex-log-row-3 { animation-delay: 0.54s; }
.po-explainer-anim--tracking-log .po-ex-log-row em { color: #0f172a; font-style: normal; }
.po-explainer-anim--tracking-log .po-ex-log-row small { color: #64748b; font: inherit; }

@keyframes po-ex-tracking-card-in {
    from { opacity: 0; transform: translateY(14px) scale(0.94); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes po-ex-tracking-line-in {
    from { transform: scaleX(0); opacity: 0; }
    to { transform: scaleX(1); opacity: 1; }
}
@keyframes po-ex-zero-card-in {
    from { opacity: 0; transform: translateY(14px) scale(0.94); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes po-ex-zero-pulse {
    0%, 100% { opacity: 0.25; transform: scale(0.8); }
    50% { opacity: 0.9; transform: scale(1.35); }
}
@keyframes po-ex-zero-badge-in {
    from { opacity: 0; transform: translateY(10px) scale(0.94); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes po-ex-filter-chip-in {
    to { opacity: 1; transform: translateX(0); }
}
@keyframes po-ex-filter-result-in {
    from { opacity: 0; transform: translateX(18px) scale(0.95); }
    to { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes po-ex-log-row-in {
    to { opacity: 1; transform: translateY(0); }
}

/* ── Ref-Links — Kampagne, Ziel, Tracking, Vorteil und Copy-Workflow ── */
.po-explainer-anim--reflink-campaign,
.po-explainer-anim--reflink-destination,
.po-explainer-anim--reflink-tracking,
.po-explainer-anim--reflink-benefit,
.po-explainer-anim--reflink-best-practice {
    position: absolute;
    inset: 0;
}

.po-explainer-anim--reflink-campaign .po-ex-rl-campaign-card,
.po-explainer-anim--reflink-campaign .po-ex-rl-slug-card,
.po-explainer-anim--reflink-campaign .po-ex-rl-public-link,
.po-explainer-anim--reflink-destination .po-ex-rl-browser,
.po-explainer-anim--reflink-destination .po-ex-rl-test,
.po-explainer-anim--reflink-destination .po-ex-rl-verified,
.po-explainer-anim--reflink-tracking .po-ex-rl-event,
.po-explainer-anim--reflink-tracking .po-ex-rl-metric,
.po-explainer-anim--reflink-benefit .po-ex-rl-benefit-card,
.po-explainer-anim--reflink-benefit .po-ex-rl-quota,
.po-explainer-anim--reflink-benefit .po-ex-rl-month,
.po-explainer-anim--reflink-best-practice .po-ex-rl-channel,
.po-explainer-anim--reflink-best-practice .po-ex-rl-copy {
    position: absolute;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(91, 155, 213, 0.22);
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.10);
    box-sizing: border-box;
}

.po-ex-rl-flow {
    position: absolute;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(91, 155, 213, 0.18), rgba(91, 155, 213, 0.88));
    transform-origin: left center;
    transform: scaleX(0);
    animation: po-ex-rl-flow-in 0.46s ease both;
}

.po-explainer-anim--reflink-campaign .po-ex-rl-campaign-card,
.po-explainer-anim--reflink-campaign .po-ex-rl-slug-card {
    top: 64px;
    width: 138px;
    height: 88px;
    border-radius: 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    color: var(--po-accent-dark, #4178BE);
    font: 800 12px/1.2 system-ui, sans-serif;
    opacity: 0;
    animation: po-ex-rl-card-in 0.48s ease both;
}
.po-explainer-anim--reflink-campaign .po-ex-rl-campaign-card { left: 58px; animation-delay: 0.12s; }
.po-explainer-anim--reflink-campaign .po-ex-rl-slug-card { left: 238px; animation-delay: 0.34s; }
.po-explainer-anim--reflink-campaign .po-ex-rl-campaign-card i,
.po-explainer-anim--reflink-campaign .po-ex-rl-slug-card i { font-size: 22px; color: var(--po-accent, #5B9BD5); }
.po-explainer-anim--reflink-campaign .po-ex-rl-flow-1 { left: 196px; top: 107px; width: 42px; animation-delay: 0.36s; }
.po-explainer-anim--reflink-campaign .po-ex-rl-public-link {
    right: 46px;
    top: 70px;
    width: 184px;
    height: 76px;
    border-radius: 18px;
    padding: 15px 16px;
    color: #047857;
    opacity: 0;
    animation: po-ex-rl-card-in 0.48s ease 0.58s both;
}
.po-explainer-anim--reflink-campaign .po-ex-rl-public-link b,
.po-explainer-anim--reflink-campaign .po-ex-rl-public-link small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.po-explainer-anim--reflink-campaign .po-ex-rl-public-link b { font: 800 15px/1.2 system-ui, sans-serif; }
.po-explainer-anim--reflink-campaign .po-ex-rl-public-link small { margin-top: 7px; color: #64748b; font: 800 10px/1 system-ui, sans-serif; text-transform: uppercase; letter-spacing: 0.07em; }

.po-explainer-anim--reflink-destination .po-ex-rl-browser {
    left: 58px;
    top: 48px;
    width: 304px;
    height: 118px;
    border-radius: 22px;
    padding: 34px 18px 18px;
    opacity: 0;
    animation: po-ex-rl-card-in 0.5s ease 0.12s both;
}
.po-explainer-anim--reflink-destination .po-ex-rl-browser-bar {
    position: absolute;
    left: 16px;
    right: 16px;
    top: 14px;
    height: 9px;
    border-radius: 999px;
    background: linear-gradient(90deg, #ef4444 0 8px, #f59e0b 8px 20px, #10b981 20px 32px, rgba(148, 163, 184, 0.24) 32px);
}
.po-explainer-anim--reflink-destination .po-ex-rl-browser strong,
.po-explainer-anim--reflink-destination .po-ex-rl-browser small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.po-explainer-anim--reflink-destination .po-ex-rl-browser strong { color: #0f172a; font: 800 17px/1.2 system-ui, sans-serif; }
.po-explainer-anim--reflink-destination .po-ex-rl-browser small { margin-top: 10px; color: #64748b; font: 700 12px/1.2 system-ui, sans-serif; }
.po-explainer-anim--reflink-destination .po-ex-rl-test,
.po-explainer-anim--reflink-destination .po-ex-rl-verified {
    right: 66px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-width: 142px;
    min-height: 42px;
    padding: 0 14px;
    border-radius: 999px;
    font: 800 12px/1 system-ui, sans-serif;
    opacity: 0;
    animation: po-ex-rl-pill-in 0.45s ease both;
}
.po-explainer-anim--reflink-destination .po-ex-rl-test { top: 62px; color: var(--po-accent-dark, #4178BE); animation-delay: 0.42s; }
.po-explainer-anim--reflink-destination .po-ex-rl-verified { top: 116px; color: #047857; background: rgba(236, 253, 245, 0.96); border-color: rgba(16, 185, 129, 0.24); animation-delay: 0.62s; }

.po-explainer-anim--reflink-tracking .po-ex-rl-event {
    top: 76px;
    width: 122px;
    height: 76px;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--po-accent-dark, #4178BE);
    font: 800 11px/1.2 system-ui, sans-serif;
    opacity: 0;
    animation: po-ex-rl-card-in 0.48s ease both;
}
.po-explainer-anim--reflink-tracking .po-ex-rl-event i { color: var(--po-accent, #5B9BD5); font-size: 19px; }
.po-explainer-anim--reflink-tracking .po-ex-rl-event-1 { left: 42px; animation-delay: 0.1s; }
.po-explainer-anim--reflink-tracking .po-ex-rl-event-2 { left: 216px; animation-delay: 0.36s; }
.po-explainer-anim--reflink-tracking .po-ex-rl-event-3 { left: 390px; color: #047857; animation-delay: 0.62s; }
.po-explainer-anim--reflink-tracking .po-ex-rl-flow-2 { left: 164px; top: 113px; width: 52px; animation-delay: 0.38s; }
.po-explainer-anim--reflink-tracking .po-ex-rl-flow-3 { left: 338px; top: 113px; width: 52px; animation-delay: 0.64s; }
.po-explainer-anim--reflink-tracking .po-ex-rl-metric {
    left: 214px;
    bottom: 18px;
    width: 132px;
    height: 44px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    opacity: 0;
    animation: po-ex-rl-pill-in 0.45s ease 0.84s both;
}
.po-explainer-anim--reflink-tracking .po-ex-rl-metric strong { color: #0f172a; font: 900 20px/1 system-ui, sans-serif; }
.po-explainer-anim--reflink-tracking .po-ex-rl-metric span { color: #64748b; font: 800 10px/1.1 system-ui, sans-serif; text-transform: uppercase; letter-spacing: 0.05em; }

.po-explainer-anim--reflink-benefit .po-ex-rl-benefit-card {
    left: 60px;
    top: 50px;
    width: 148px;
    height: 120px;
    border-radius: 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #047857;
    background: rgba(236, 253, 245, 0.96);
    border-color: rgba(16, 185, 129, 0.26);
    opacity: 0;
    animation: po-ex-rl-card-in 0.5s ease 0.12s both;
}
.po-explainer-anim--reflink-benefit .po-ex-rl-benefit-card i { font-size: 24px; }
.po-explainer-anim--reflink-benefit .po-ex-rl-benefit-card strong { font: 900 34px/1 system-ui, sans-serif; }
.po-explainer-anim--reflink-benefit .po-ex-rl-benefit-card span { font: 800 11px/1 system-ui, sans-serif; text-transform: uppercase; letter-spacing: 0.06em; }
.po-explainer-anim--reflink-benefit .po-ex-rl-quota {
    left: 252px;
    width: 220px;
    height: 42px;
    border-radius: 999px;
    padding: 7px 10px;
    display: grid;
    grid-template-columns: 70px 1fr;
    align-items: center;
    gap: 10px;
    opacity: 0;
    animation: po-ex-rl-pill-in 0.45s ease both;
}
.po-explainer-anim--reflink-benefit .po-ex-rl-quota span { color: #475569; font: 800 11px/1 system-ui, sans-serif; }
.po-explainer-anim--reflink-benefit .po-ex-rl-quota i { height: 10px; border-radius: 999px; background: rgba(91, 155, 213, 0.28); transform-origin: left center; animation: po-ex-rl-quota-fill 0.7s ease both; }
.po-explainer-anim--reflink-benefit .po-ex-rl-quota-base { top: 58px; animation-delay: 0.34s; }
.po-explainer-anim--reflink-benefit .po-ex-rl-quota-base i { width: 50%; animation-delay: 0.48s; }
.po-explainer-anim--reflink-benefit .po-ex-rl-quota-partner { top: 112px; animation-delay: 0.54s; }
.po-explainer-anim--reflink-benefit .po-ex-rl-quota-partner i { width: 100%; background: linear-gradient(90deg, #10b981, #5B9BD5); animation-delay: 0.68s; }
.po-explainer-anim--reflink-benefit .po-ex-rl-month {
    right: 74px;
    bottom: 28px;
    min-width: 178px;
    min-height: 40px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--po-accent-dark, #4178BE);
    font: 800 11px/1 system-ui, sans-serif;
    opacity: 0;
    animation: po-ex-rl-pill-in 0.45s ease 0.84s both;
}

.po-explainer-anim--reflink-best-practice .po-ex-rl-channel {
    top: 58px;
    width: 124px;
    height: 78px;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--po-accent-dark, #4178BE);
    font: 800 11px/1.2 system-ui, sans-serif;
    opacity: 0;
    animation: po-ex-rl-card-in 0.48s ease both;
}
.po-explainer-anim--reflink-best-practice .po-ex-rl-channel i { color: var(--po-accent, #5B9BD5); font-size: 19px; }
.po-explainer-anim--reflink-best-practice .po-ex-rl-channel-1 { left: 54px; animation-delay: 0.1s; }
.po-explainer-anim--reflink-best-practice .po-ex-rl-channel-2 { left: 218px; animation-delay: 0.28s; }
.po-explainer-anim--reflink-best-practice .po-ex-rl-channel-3 { left: 382px; animation-delay: 0.46s; }
.po-explainer-anim--reflink-best-practice .po-ex-rl-copy {
    left: 196px;
    bottom: 28px;
    width: 168px;
    min-height: 44px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    color: #047857;
    font: 800 12px/1 system-ui, sans-serif;
    background: rgba(236, 253, 245, 0.96);
    border-color: rgba(16, 185, 129, 0.24);
    opacity: 0;
    animation: po-ex-rl-pill-in 0.45s ease 0.72s both;
}

@keyframes po-ex-rl-card-in {
    from { opacity: 0; transform: translateY(14px) scale(0.94); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes po-ex-rl-pill-in {
    from { opacity: 0; transform: translateY(10px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes po-ex-rl-flow-in {
    to { opacity: 1; transform: scaleX(1); }
}
@keyframes po-ex-rl-quota-fill {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

/* ── Partner-Auszahlungen — verständliche Flow-Animationen ── */
.po-explainer-anim--payouts-flow,
.po-explainer-anim--payouts-waiting,
.po-explainer-anim--payouts-requirements,
.po-explainer-anim--payouts-request,
.po-explainer-anim--payouts-history {
    inset: 0;
}

.po-explainer-anim--payouts-flow .po-ex-pay-card,
.po-explainer-anim--payouts-requirements .po-ex-pay-check,
.po-explainer-anim--payouts-request .po-ex-pay-request-source,
.po-explainer-anim--payouts-request .po-ex-pay-request-bank,
.po-explainer-anim--payouts-history .po-ex-pay-receipt,
.po-explainer-anim--payouts-history .po-ex-pay-history-list,
.po-explainer-anim--payouts-waiting .po-ex-pay-calendar,
.po-explainer-anim--payouts-waiting .po-ex-pay-release,
.po-explainer-anim--payouts-waiting .po-ex-pay-hold,
.po-ex-pay-ready,
.po-ex-pay-processing-pill,
.po-ex-pay-status-chip {
    position: absolute;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.10);
}

.po-explainer-anim--payouts-flow .po-ex-pay-card,
.po-explainer-anim--payouts-request .po-ex-pay-request-source,
.po-explainer-anim--payouts-request .po-ex-pay-request-bank {
    top: 64px;
    width: 138px;
    height: 86px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    gap: 7px;
    text-align: center;
    color: #0f172a;
    font: 800 12px/1.2 system-ui, sans-serif;
    opacity: 0;
    animation: po-ex-pay-card-in 0.46s ease both;
}

.po-explainer-anim--payouts-flow .po-ex-pay-card i,
.po-explainer-anim--payouts-request .po-ex-pay-request-source i,
.po-explainer-anim--payouts-request .po-ex-pay-request-bank i,
.po-explainer-anim--payouts-history .po-ex-pay-receipt i {
    font-size: 22px;
    color: var(--po-accent, #5B9BD5);
}

.po-explainer-anim--payouts-flow .po-ex-pay-card-available { left: 54px; animation-delay: 0.12s; }
.po-explainer-anim--payouts-flow .po-ex-pay-card-pending { left: 226px; animation-delay: 0.34s; }
.po-explainer-anim--payouts-flow .po-ex-pay-card-processing { left: 398px; animation-delay: 0.56s; }

.po-ex-pay-flow,
.po-ex-pay-transfer-line {
    position: absolute;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(91, 155, 213, 0.18), rgba(91, 155, 213, 0.85));
    transform-origin: left center;
    transform: scaleX(0);
    animation: po-ex-pay-flow-in 0.42s ease both;
}

.po-ex-pay-flow { top: 104px; width: 34px; }
.po-ex-pay-flow-1 { left: 192px; animation-delay: 0.36s; }
.po-ex-pay-flow-2 { left: 364px; animation-delay: 0.58s; }

.po-explainer-anim--payouts-waiting .po-ex-pay-calendar {
    left: 60px;
    top: 48px;
    width: 116px;
    height: 116px;
    border-radius: 24px;
    display: grid;
    place-items: center;
    color: var(--po-accent, #5B9BD5);
    animation: po-ex-pay-card-in 0.45s ease 0.12s both;
}

.po-explainer-anim--payouts-waiting .po-ex-pay-calendar i { font-size: 24px; }
.po-explainer-anim--payouts-waiting .po-ex-pay-calendar strong { font: 900 34px/1 system-ui, sans-serif; }

.po-explainer-anim--payouts-waiting .po-ex-pay-timeline {
    position: absolute;
    left: 218px;
    right: 96px;
    top: 102px;
    height: 8px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.22);
    overflow: hidden;
}

.po-explainer-anim--payouts-waiting .po-ex-pay-timeline span {
    display: block;
    width: 72%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #f59e0b, #10b981);
    transform-origin: left center;
    animation: po-ex-pay-flow-in 0.82s ease 0.42s both;
}

.po-explainer-anim--payouts-waiting .po-ex-pay-timeline b,
.po-explainer-anim--payouts-waiting .po-ex-pay-timeline em {
    position: absolute;
    top: -4px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid #10b981;
}

.po-explainer-anim--payouts-waiting .po-ex-pay-timeline b { left: 0; border-color: #f59e0b; }
.po-explainer-anim--payouts-waiting .po-ex-pay-timeline em { right: 0; }

.po-explainer-anim--payouts-waiting .po-ex-pay-hold,
.po-explainer-anim--payouts-waiting .po-ex-pay-release,
.po-ex-pay-processing-pill,
.po-ex-pay-status-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 999px;
    padding: 10px 13px;
    font: 800 12px/1 system-ui, sans-serif;
    animation: po-ex-pay-pill-in 0.42s ease both;
}

.po-explainer-anim--payouts-waiting .po-ex-pay-hold { right: 64px; top: 54px; min-width: 128px; color: #b45309; animation-delay: 0.28s; }
.po-explainer-anim--payouts-waiting .po-ex-pay-release { right: 64px; top: 132px; min-width: 128px; color: #047857; animation-delay: 0.74s; }

.po-explainer-anim--payouts-requirements .po-ex-pay-check {
    left: 66px;
    width: 190px;
    height: 46px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    color: #0f172a;
    font: 800 12px/1 system-ui, sans-serif;
    opacity: 0;
    animation: po-ex-pay-card-in 0.42s ease both;
}

.po-explainer-anim--payouts-requirements .po-ex-pay-check i { color: var(--po-accent, #5B9BD5); font-size: 17px; }
.po-explainer-anim--payouts-requirements .po-ex-pay-check-1 { top: 42px; animation-delay: 0.12s; }
.po-explainer-anim--payouts-requirements .po-ex-pay-check-2 { top: 99px; animation-delay: 0.3s; }
.po-explainer-anim--payouts-requirements .po-ex-pay-check-3 { top: 156px; animation-delay: 0.48s; }

.po-ex-pay-ready {
    right: 82px;
    top: 78px;
    width: 118px;
    height: 118px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #10b981;
    font-size: 44px;
    opacity: 0;
    animation: po-ex-pay-ready-in 0.5s ease 0.72s both;
}

.po-explainer-anim--payouts-request .po-ex-pay-request-source { left: 74px; animation-delay: 0.12s; }
.po-explainer-anim--payouts-request .po-ex-pay-request-bank { right: 74px; animation-delay: 0.62s; }

.po-ex-pay-transfer-line {
    left: 218px;
    right: 218px;
    top: 119px;
    animation-duration: 0.6s;
    animation-delay: 0.32s;
}

.po-ex-pay-transfer-dot {
    position: absolute;
    left: 252px;
    top: 112px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--po-accent, #5B9BD5);
    box-shadow: 0 0 0 8px rgba(91, 155, 213, 0.12);
    animation: po-ex-pay-dot-move 1.4s ease 0.36s infinite;
}

.po-ex-pay-processing-pill {
    left: 218px;
    bottom: 24px;
    min-width: 148px;
    color: #0369a1;
    opacity: 0;
    animation-delay: 0.82s;
}

.po-ex-pay-processing-pill i { animation: po-ex-pay-spin 1.1s linear infinite; }

.po-explainer-anim--payouts-history .po-ex-pay-receipt {
    left: 72px;
    top: 54px;
    width: 138px;
    height: 128px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    text-align: center;
    gap: 7px;
    color: #0f172a;
    font: 800 12px/1.2 system-ui, sans-serif;
    animation: po-ex-pay-card-in 0.42s ease 0.1s both;
}

.po-explainer-anim--payouts-history .po-ex-pay-history-list {
    right: 78px;
    top: 58px;
    width: 230px;
    border-radius: 18px;
    padding: 22px;
    animation: po-ex-pay-card-in 0.42s ease 0.34s both;
}

.po-explainer-anim--payouts-history .po-ex-pay-history-list span {
    display: block;
    height: 11px;
    border-radius: 999px;
    background: rgba(91, 155, 213, 0.18);
    margin-bottom: 14px;
}

.po-explainer-anim--payouts-history .po-ex-pay-history-list span:nth-child(2) { width: 78%; }
.po-explainer-anim--payouts-history .po-ex-pay-history-list span:nth-child(3) { width: 58%; margin-bottom: 0; }

.po-ex-pay-status-chip {
    right: 118px;
    bottom: 28px;
    color: #047857;
    animation-delay: 0.7s;
}

@keyframes po-ex-pay-card-in {
    from { opacity: 0; transform: translateY(10px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes po-ex-pay-pill-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes po-ex-pay-flow-in {
    from { transform: scaleX(0); opacity: 0.45; }
    to { transform: scaleX(1); opacity: 1; }
}

@keyframes po-ex-pay-ready-in {
    from { opacity: 0; transform: scale(0.72) rotate(-8deg); }
    to { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes po-ex-pay-dot-move {
    0% { transform: translateX(0); opacity: 0; }
    18% { opacity: 1; }
    82% { opacity: 1; }
    100% { transform: translateX(154px); opacity: 0; }
}

@keyframes po-ex-pay-spin {
    to { transform: rotate(360deg); }
}

/* v2 — Payouts-Explainer: kompakte Szenen ohne Überlappungen */
.po-explainer-anim--payouts-flow .po-ex-pay-safe-scene,
.po-explainer-anim--payouts-waiting .po-ex-pay-safe-scene,
.po-explainer-anim--payouts-requirements .po-ex-pay-safe-scene,
.po-explainer-anim--payouts-request .po-ex-pay-safe-scene,
.po-explainer-anim--payouts-history .po-ex-pay-safe-scene {
    position: absolute;
    inset: 18px;
    display: grid;
    align-items: center;
    justify-items: center;
    overflow: hidden;
}

.po-ex-pay-balance-scene,
.po-ex-pay-request-scene {
    grid-template-columns: minmax(96px, 0.8fr) minmax(120px, 1fr);
    gap: 22px;
    max-width: 420px;
    margin: 0 auto;
}

.po-ex-pay-wallet,
.po-ex-pay-calendar-card,
.po-ex-pay-setup-ready,
.po-ex-pay-receipt-card,
.po-ex-pay-request-card {
    position: relative;
    display: grid;
    place-items: center;
    border: 1px solid rgba(91, 155, 213, 0.18);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.10);
}

.po-ex-pay-wallet {
    width: 104px;
    height: 104px;
    border-radius: 28px;
    color: var(--po-accent, #5B9BD5);
    animation: po-ex-pay-v2-soft-in 0.5s ease both;
}

.po-ex-pay-wallet i {
    font-size: 26px;
}

.po-ex-pay-wallet strong {
    position: absolute;
    right: 18px;
    bottom: 15px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #10b981;
    color: #fff;
    font: 900 16px/1 system-ui, sans-serif;
}

.po-ex-pay-balance-list {
    width: min(230px, 100%);
    display: grid;
    gap: 12px;
}

.po-ex-pay-balance-row {
    display: grid;
    grid-template-columns: 88px 1fr;
    align-items: center;
    gap: 10px;
    min-height: 38px;
    border-radius: 999px;
    padding: 0 12px;
    background: rgba(255, 255, 255, 0.90);
    border: 1px solid rgba(148, 163, 184, 0.18);
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
    animation: po-ex-pay-v2-row-in 0.42s ease both;
}

.po-ex-pay-balance-row:nth-child(2) { animation-delay: 0.1s; }
.po-ex-pay-balance-row:nth-child(3) { animation-delay: 0.2s; }

.po-ex-pay-balance-row b {
    color: #334155;
    font: 800 11px/1.1 system-ui, sans-serif;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.po-ex-pay-balance-row em {
    height: 8px;
    border-radius: 999px;
    background: rgba(91, 155, 213, 0.18);
}

.po-ex-pay-balance-row-ready em {
    background: linear-gradient(90deg, #10b981, #5B9BD5);
}

.po-ex-pay-release-scene {
    grid-template-rows: 78px 28px;
    gap: 12px;
    max-width: 390px;
    margin: 0 auto;
}

.po-ex-pay-release-track {
    position: relative;
    width: min(320px, 86%);
    height: 10px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.20);
}

.po-ex-pay-release-track span {
    display: block;
    width: 74%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #93c5fd, #10b981);
    transform-origin: left center;
    animation: po-ex-pay-v2-fill 0.9s ease both;
}

.po-ex-pay-release-track i {
    position: absolute;
    top: 50%;
    left: 72%;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: #10b981;
    box-shadow: 0 0 0 8px rgba(16, 185, 129, 0.14);
}

.po-ex-pay-release-steps {
    width: min(320px, 86%);
    display: flex;
    justify-content: space-between;
    color: #475569;
    font: 800 12px/1 system-ui, sans-serif;
}

.po-ex-pay-calendar-card {
    position: absolute;
    top: 34px;
    left: 50%;
    width: 78px;
    height: 64px;
    border-radius: 20px;
    transform: translateX(-50%);
    color: var(--po-accent, #5B9BD5);
    animation: po-ex-pay-v2-soft-in 0.5s ease 0.15s both;
}

.po-ex-pay-calendar-card i {
    font-size: 19px;
}

.po-ex-pay-calendar-card strong {
    color: #0f172a;
    font: 900 22px/1 system-ui, sans-serif;
}

.po-ex-pay-setup-scene {
    grid-template-columns: repeat(3, minmax(80px, 1fr));
    gap: 14px;
    max-width: 430px;
    margin: 0 auto;
}

.po-ex-pay-setup-card,
.po-ex-pay-setup-ready {
    width: 100%;
    max-width: 130px;
    min-height: 82px;
    border-radius: 22px;
    display: grid;
    place-items: center;
    gap: 6px;
    border: 1px solid rgba(91, 155, 213, 0.18);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.09);
    color: #334155;
    font: 800 12px/1 system-ui, sans-serif;
    animation: po-ex-pay-v2-soft-in 0.45s ease both;
}

.po-ex-pay-setup-card:nth-child(2) { animation-delay: 0.12s; }
.po-ex-pay-setup-ready { animation-delay: 0.24s; }

.po-ex-pay-setup-card i,
.po-ex-pay-setup-ready i {
    color: var(--po-accent, #5B9BD5);
    font-size: 20px;
}

.po-ex-pay-setup-card b {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #10b981;
    position: relative;
}

.po-ex-pay-setup-card b::after {
    content: "";
    position: absolute;
    left: 7px;
    top: 4px;
    width: 6px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.po-ex-pay-request-scene {
    grid-template-columns: 120px 90px 120px;
    gap: 10px;
}

.po-ex-pay-request-card {
    width: 112px;
    height: 92px;
    border-radius: 24px;
    color: #334155;
    font: 800 12px/1 system-ui, sans-serif;
    animation: po-ex-pay-v2-soft-in 0.45s ease both;
}

.po-ex-pay-request-card i {
    color: var(--po-accent, #5B9BD5);
    font-size: 22px;
}

.po-ex-pay-request-path {
    width: 88px;
    height: 6px;
    border-radius: 999px;
    background: rgba(91, 155, 213, 0.16);
    overflow: hidden;
}

.po-ex-pay-request-path span {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #5B9BD5, #10b981);
    transform-origin: left center;
    animation: po-ex-pay-v2-fill 0.8s ease 0.18s both;
}

.po-ex-pay-request-status {
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: calc(100% - 44px);
    border-radius: 999px;
    padding: 9px 13px;
    background: rgba(236, 253, 245, 0.96);
    color: #047857;
    border: 1px solid rgba(16, 185, 129, 0.18);
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.09);
    font: 800 12px/1 system-ui, sans-serif;
    white-space: nowrap;
    animation: po-ex-pay-v2-row-in 0.45s ease 0.45s both;
}

.po-ex-pay-history-scene {
    grid-template-columns: 120px minmax(150px, 210px);
    gap: 20px;
    max-width: 420px;
    margin: 0 auto;
}

.po-ex-pay-receipt-card {
    width: 110px;
    height: 118px;
    border-radius: 24px;
    color: #334155;
    font: 800 12px/1 system-ui, sans-serif;
    animation: po-ex-pay-v2-soft-in 0.45s ease both;
}

.po-ex-pay-receipt-card i {
    color: var(--po-accent, #5B9BD5);
    font-size: 24px;
}

.po-ex-pay-history-lines {
    width: 100%;
    display: grid;
    gap: 12px;
}

.po-ex-pay-history-lines span {
    display: block;
    height: 14px;
    border-radius: 999px;
    background: rgba(91, 155, 213, 0.16);
    animation: po-ex-pay-v2-fill 0.7s ease both;
}

.po-ex-pay-history-lines span:nth-child(2) { width: 78%; animation-delay: 0.1s; }
.po-ex-pay-history-lines span:nth-child(3) { width: 58%; animation-delay: 0.2s; }

.po-ex-pay-history-badge {
    position: absolute;
    left: 50%;
    bottom: 17px;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border-radius: 999px;
    padding: 8px 13px;
    background: rgba(236, 253, 245, 0.96);
    color: #047857;
    border: 1px solid rgba(16, 185, 129, 0.18);
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.09);
    font: 800 12px/1 system-ui, sans-serif;
    animation: po-ex-pay-v2-row-in 0.45s ease 0.35s both;
}

@keyframes po-ex-pay-v2-soft-in {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes po-ex-pay-v2-row-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes po-ex-pay-v2-fill {
    from { opacity: 0.55; transform: scaleX(0.15); }
    to { opacity: 1; transform: scaleX(1); }
}

@media (max-width: 640px) {
    .po-ex-pay-balance-scene,
    .po-ex-pay-history-scene {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .po-ex-pay-setup-scene {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .po-ex-pay-setup-card,
    .po-ex-pay-setup-ready {
        max-width: 220px;
        min-height: 52px;
        grid-template-columns: 26px 1fr 22px;
        justify-content: start;
        padding: 0 12px;
    }

    .po-ex-pay-request-scene {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .po-ex-pay-request-path {
        width: 6px;
        height: 28px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .po-ex-pay-balance-row,
    .po-ex-pay-wallet,
    .po-ex-pay-calendar-card,
    .po-ex-pay-setup-card,
    .po-ex-pay-setup-ready,
    .po-ex-pay-request-card,
    .po-ex-pay-request-status,
    .po-ex-pay-receipt-card,
    .po-ex-pay-history-badge {
        animation: none !important;
        opacity: 1 !important;
    }

    .po-ex-pay-release-track span,
    .po-ex-pay-request-path span,
    .po-ex-pay-history-lines span {
        animation: none !important;
        transform: scaleX(1) !important;
    }
}

/* v3 — Payouts: sichtbare Premium-Szenen + saubere Textführung */
.po-explainer-slide:has(.po-explainer-anim--payouts-flow),
.po-explainer-slide:has(.po-explainer-anim--payouts-waiting),
.po-explainer-slide:has(.po-explainer-anim--payouts-requirements),
.po-explainer-slide:has(.po-explainer-anim--payouts-request),
.po-explainer-slide:has(.po-explainer-anim--payouts-history) {
    text-align: left;
    align-items: stretch;
}

.po-explainer-slide:has(.po-explainer-anim--payouts-flow) .po-explainer-illustration,
.po-explainer-slide:has(.po-explainer-anim--payouts-waiting) .po-explainer-illustration,
.po-explainer-slide:has(.po-explainer-anim--payouts-requirements) .po-explainer-illustration,
.po-explainer-slide:has(.po-explainer-anim--payouts-request) .po-explainer-illustration,
.po-explainer-slide:has(.po-explainer-anim--payouts-history) .po-explainer-illustration {
    height: 230px;
    max-width: 620px;
    margin: 0 auto 18px;
}

.po-explainer-slide:has(.po-explainer-anim--payouts-flow) .po-explainer-slide-title,
.po-explainer-slide:has(.po-explainer-anim--payouts-waiting) .po-explainer-slide-title,
.po-explainer-slide:has(.po-explainer-anim--payouts-requirements) .po-explainer-slide-title,
.po-explainer-slide:has(.po-explainer-anim--payouts-request) .po-explainer-slide-title,
.po-explainer-slide:has(.po-explainer-anim--payouts-history) .po-explainer-slide-title,
.po-explainer-slide:has(.po-explainer-anim--payouts-flow) .po-explainer-slide-body,
.po-explainer-slide:has(.po-explainer-anim--payouts-waiting) .po-explainer-slide-body,
.po-explainer-slide:has(.po-explainer-anim--payouts-requirements) .po-explainer-slide-body,
.po-explainer-slide:has(.po-explainer-anim--payouts-request) .po-explainer-slide-body,
.po-explainer-slide:has(.po-explainer-anim--payouts-history) .po-explainer-slide-body {
    width: min(620px, 100%);
    margin-left: auto;
    margin-right: auto;
    padding-left: 4px;
    padding-right: 4px;
    text-align: left;
}

.po-explainer-slide:has(.po-explainer-anim--payouts-flow) .po-explainer-slide-body p,
.po-explainer-slide:has(.po-explainer-anim--payouts-waiting) .po-explainer-slide-body p,
.po-explainer-slide:has(.po-explainer-anim--payouts-requirements) .po-explainer-slide-body p,
.po-explainer-slide:has(.po-explainer-anim--payouts-request) .po-explainer-slide-body p,
.po-explainer-slide:has(.po-explainer-anim--payouts-history) .po-explainer-slide-body p {
    margin: 0 0 10px;
}

.po-explainer-slide:has(.po-explainer-anim--payouts-flow) .po-explainer-slide-body ul,
.po-explainer-slide:has(.po-explainer-anim--payouts-waiting) .po-explainer-slide-body ul,
.po-explainer-slide:has(.po-explainer-anim--payouts-requirements) .po-explainer-slide-body ul,
.po-explainer-slide:has(.po-explainer-anim--payouts-request) .po-explainer-slide-body ul,
.po-explainer-slide:has(.po-explainer-anim--payouts-history) .po-explainer-slide-body ul {
    display: grid;
    gap: 7px;
    margin-top: 8px;
    padding-left: 0;
    list-style: none;
}

.po-explainer-slide:has(.po-explainer-anim--payouts-flow) .po-explainer-slide-body li,
.po-explainer-slide:has(.po-explainer-anim--payouts-waiting) .po-explainer-slide-body li,
.po-explainer-slide:has(.po-explainer-anim--payouts-requirements) .po-explainer-slide-body li,
.po-explainer-slide:has(.po-explainer-anim--payouts-request) .po-explainer-slide-body li,
.po-explainer-slide:has(.po-explainer-anim--payouts-history) .po-explainer-slide-body li {
    position: relative;
    margin: 0;
    padding-left: 24px;
}

.po-explainer-slide:has(.po-explainer-anim--payouts-flow) .po-explainer-slide-body li::before,
.po-explainer-slide:has(.po-explainer-anim--payouts-waiting) .po-explainer-slide-body li::before,
.po-explainer-slide:has(.po-explainer-anim--payouts-requirements) .po-explainer-slide-body li::before,
.po-explainer-slide:has(.po-explainer-anim--payouts-request) .po-explainer-slide-body li::before,
.po-explainer-slide:has(.po-explainer-anim--payouts-history) .po-explainer-slide-body li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 0.74em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, #5B9BD5, #10b981);
    box-shadow: 0 0 0 4px rgba(91, 155, 213, 0.11);
}

.po-explainer-anim--payouts-flow,
.po-explainer-anim--payouts-waiting,
.po-explainer-anim--payouts-requirements,
.po-explainer-anim--payouts-request,
.po-explainer-anim--payouts-history {
    position: absolute;
    inset: 0;
    display: block;
}

.po-explainer-anim--payouts-flow .po-ex-pay-safe-scene,
.po-explainer-anim--payouts-waiting .po-ex-pay-safe-scene,
.po-explainer-anim--payouts-requirements .po-ex-pay-safe-scene,
.po-explainer-anim--payouts-request .po-ex-pay-safe-scene,
.po-explainer-anim--payouts-history .po-ex-pay-safe-scene {
    position: absolute;
    inset: 20px;
    display: grid;
    align-items: center;
    justify-items: center;
    overflow: visible;
}

.po-ex-pay-wallet,
.po-ex-pay-balance-row,
.po-ex-pay-calendar-card,
.po-ex-pay-setup-card,
.po-ex-pay-setup-ready,
.po-ex-pay-request-card,
.po-ex-pay-request-status,
.po-ex-pay-receipt-card,
.po-ex-pay-history-badge {
    opacity: 1 !important;
    visibility: visible !important;
}

.po-ex-pay-balance-scene {
    grid-template-columns: 148px minmax(230px, 300px);
    gap: 30px;
}

.po-ex-pay-wallet {
    width: 136px;
    height: 136px;
    border-radius: 34px;
    background:
        radial-gradient(circle at 28% 22%, rgba(255,255,255,0.9), transparent 44%),
        linear-gradient(135deg, rgba(255,255,255,0.96), rgba(239,246,255,0.96));
    border-color: rgba(91, 155, 213, 0.26);
}

.po-ex-pay-wallet i {
    font-size: 38px;
}

.po-ex-pay-wallet strong {
    width: 42px;
    height: 42px;
    right: 15px;
    bottom: 15px;
    font-size: 20px;
}

.po-ex-pay-balance-list {
    width: 100%;
    gap: 14px;
}

.po-ex-pay-balance-row {
    min-height: 48px;
    grid-template-columns: 106px 1fr;
    padding: 0 16px;
    background: rgba(255,255,255,0.96);
    border-color: rgba(91, 155, 213, 0.18);
}

.po-ex-pay-balance-row b {
    font-size: 12px;
}

.po-ex-pay-balance-row em {
    height: 10px;
}

.po-ex-pay-release-scene {
    grid-template-rows: 120px 30px;
    gap: 14px;
}

.po-ex-pay-release-track {
    width: min(420px, 90%);
    height: 14px;
    align-self: end;
}

.po-ex-pay-release-track i {
    width: 28px;
    height: 28px;
}

.po-ex-pay-release-steps {
    width: min(420px, 90%);
    font-size: 13px;
}

.po-ex-pay-calendar-card {
    top: 22px;
    width: 104px;
    height: 84px;
    border-radius: 26px;
}

.po-ex-pay-calendar-card i {
    font-size: 24px;
}

.po-ex-pay-calendar-card strong {
    font-size: 30px;
}

.po-ex-pay-setup-scene {
    grid-template-columns: repeat(3, 142px);
    gap: 18px;
}

.po-ex-pay-setup-card,
.po-ex-pay-setup-ready {
    max-width: none;
    width: 142px;
    min-height: 112px;
    border-radius: 28px;
}

.po-ex-pay-setup-card i,
.po-ex-pay-setup-ready i {
    font-size: 26px;
}

.po-ex-pay-request-scene {
    grid-template-columns: 136px 120px 136px;
    gap: 18px;
}

.po-ex-pay-request-card {
    width: 136px;
    height: 112px;
    border-radius: 28px;
}

.po-ex-pay-request-card i {
    font-size: 28px;
}

.po-ex-pay-request-path {
    width: 116px;
    height: 10px;
}

.po-ex-pay-request-status {
    bottom: 16px;
    padding: 10px 16px;
}

.po-ex-pay-history-scene {
    grid-template-columns: 136px minmax(210px, 280px);
    gap: 28px;
}

.po-ex-pay-receipt-card {
    width: 130px;
    height: 142px;
    border-radius: 30px;
}

.po-ex-pay-receipt-card i {
    font-size: 32px;
}

.po-ex-pay-history-lines {
    gap: 16px;
}

.po-ex-pay-history-lines span {
    height: 16px;
}

@media (max-width: 640px) {
    .po-explainer-slide:has(.po-explainer-anim--payouts-flow) .po-explainer-illustration,
    .po-explainer-slide:has(.po-explainer-anim--payouts-waiting) .po-explainer-illustration,
    .po-explainer-slide:has(.po-explainer-anim--payouts-requirements) .po-explainer-illustration,
    .po-explainer-slide:has(.po-explainer-anim--payouts-request) .po-explainer-illustration,
    .po-explainer-slide:has(.po-explainer-anim--payouts-history) .po-explainer-illustration {
        height: 210px;
    }

    .po-ex-pay-balance-scene,
    .po-ex-pay-request-scene,
    .po-ex-pay-history-scene,
    .po-ex-pay-setup-scene {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .po-ex-pay-wallet,
    .po-ex-pay-request-card,
    .po-ex-pay-receipt-card {
        width: 96px;
        height: 78px;
        border-radius: 22px;
    }

    .po-ex-pay-wallet strong {
        width: 28px;
        height: 28px;
        font-size: 14px;
    }

    .po-ex-pay-balance-list {
        width: min(280px, 100%);
        gap: 8px;
    }

    .po-ex-pay-balance-row {
        min-height: 34px;
        grid-template-columns: 94px 1fr;
    }

    .po-ex-pay-setup-card,
    .po-ex-pay-setup-ready {
        width: min(260px, 100%);
        min-height: 44px;
    }
}

/* Partner-Einladungen: sichtbare Szenen ohne Social-Share-Überladung */
.po-explainer-slide:has(.po-explainer-anim--invite-link),
.po-explainer-slide:has(.po-explainer-anim--invite-customer),
.po-explainer-slide:has(.po-explainer-anim--invite-network),
.po-explainer-slide:has(.po-explainer-anim--invite-status) {
    text-align: left;
    align-items: stretch;
}

.po-explainer-slide:has(.po-explainer-anim--invite-link) .po-explainer-illustration,
.po-explainer-slide:has(.po-explainer-anim--invite-customer) .po-explainer-illustration,
.po-explainer-slide:has(.po-explainer-anim--invite-network) .po-explainer-illustration,
.po-explainer-slide:has(.po-explainer-anim--invite-status) .po-explainer-illustration {
    height: 250px;
    width: min(540px, 100%);
    margin: 0 auto 18px;
}

.po-explainer-slide:has(.po-explainer-anim--invite-link) .po-explainer-slide-title,
.po-explainer-slide:has(.po-explainer-anim--invite-customer) .po-explainer-slide-title,
.po-explainer-slide:has(.po-explainer-anim--invite-network) .po-explainer-slide-title,
.po-explainer-slide:has(.po-explainer-anim--invite-status) .po-explainer-slide-title,
.po-explainer-slide:has(.po-explainer-anim--invite-link) .po-explainer-slide-body,
.po-explainer-slide:has(.po-explainer-anim--invite-customer) .po-explainer-slide-body,
.po-explainer-slide:has(.po-explainer-anim--invite-network) .po-explainer-slide-body,
.po-explainer-slide:has(.po-explainer-anim--invite-status) .po-explainer-slide-body {
    width: min(540px, 100%);
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

.po-explainer-slide:has(.po-explainer-anim--invite-link) .po-explainer-slide-body ul,
.po-explainer-slide:has(.po-explainer-anim--invite-customer) .po-explainer-slide-body ul,
.po-explainer-slide:has(.po-explainer-anim--invite-network) .po-explainer-slide-body ul,
.po-explainer-slide:has(.po-explainer-anim--invite-status) .po-explainer-slide-body ul {
    display: grid;
    gap: 8px;
    padding: 0;
    margin: 10px 0 0;
    list-style: none;
}

.po-explainer-slide:has(.po-explainer-anim--invite-link) .po-explainer-slide-body li,
.po-explainer-slide:has(.po-explainer-anim--invite-customer) .po-explainer-slide-body li,
.po-explainer-slide:has(.po-explainer-anim--invite-network) .po-explainer-slide-body li,
.po-explainer-slide:has(.po-explainer-anim--invite-status) .po-explainer-slide-body li {
    position: relative;
    padding-left: 24px;
}

.po-explainer-slide:has(.po-explainer-anim--invite-link) .po-explainer-slide-body li::before,
.po-explainer-slide:has(.po-explainer-anim--invite-customer) .po-explainer-slide-body li::before,
.po-explainer-slide:has(.po-explainer-anim--invite-network) .po-explainer-slide-body li::before,
.po-explainer-slide:has(.po-explainer-anim--invite-status) .po-explainer-slide-body li::before {
    content: '';
    position: absolute;
    left: 5px;
    top: 0.72em;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--po-accent, #5B9BD5);
    box-shadow: 0 0 0 4px rgba(91, 155, 213, 0.11);
}

.po-explainer-anim--invite-link,
.po-explainer-anim--invite-customer,
.po-explainer-anim--invite-network,
.po-explainer-anim--invite-status {
    position: absolute;
    inset: 0;
    display: block;
}

/* ── Partner-KYC — sichere, ruhige Review-Animationen ── */
.po-explainer-slide:has(.po-explainer-anim--kyc-profile),
.po-explainer-slide:has(.po-explainer-anim--kyc-payout),
.po-explainer-slide:has(.po-explainer-anim--kyc-documents),
.po-explainer-slide:has(.po-explainer-anim--kyc-review) {
    text-align: left;
}

.po-explainer-slide:has(.po-explainer-anim--kyc-profile) .po-explainer-illustration,
.po-explainer-slide:has(.po-explainer-anim--kyc-payout) .po-explainer-illustration,
.po-explainer-slide:has(.po-explainer-anim--kyc-documents) .po-explainer-illustration,
.po-explainer-slide:has(.po-explainer-anim--kyc-review) .po-explainer-illustration {
    height: 240px;
    margin-bottom: 18px;
}

.po-explainer-slide:has(.po-explainer-anim--kyc-profile) .po-explainer-slide-title,
.po-explainer-slide:has(.po-explainer-anim--kyc-payout) .po-explainer-slide-title,
.po-explainer-slide:has(.po-explainer-anim--kyc-documents) .po-explainer-slide-title,
.po-explainer-slide:has(.po-explainer-anim--kyc-review) .po-explainer-slide-title,
.po-explainer-slide:has(.po-explainer-anim--kyc-profile) .po-explainer-slide-body,
.po-explainer-slide:has(.po-explainer-anim--kyc-payout) .po-explainer-slide-body,
.po-explainer-slide:has(.po-explainer-anim--kyc-documents) .po-explainer-slide-body,
.po-explainer-slide:has(.po-explainer-anim--kyc-review) .po-explainer-slide-body {
    width: min(560px, 100%);
}

.po-explainer-anim--kyc-profile,
.po-explainer-anim--kyc-payout,
.po-explainer-anim--kyc-documents,
.po-explainer-anim--kyc-review {
    position: absolute;
    inset: 0;
    display: block;
}

.po-ex-kyc-safe-scene {
    position: absolute;
    inset: 20px;
    display: grid;
    align-items: center;
    justify-items: center;
    overflow: hidden;
}

.po-ex-kyc-profile-card,
.po-ex-kyc-address-card,
.po-ex-kyc-bank-card,
.po-ex-kyc-payout-card,
.po-ex-kyc-doc-card,
.po-ex-kyc-review-card,
.po-ex-kyc-verified-card {
    min-width: 124px;
    min-height: 86px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.90);
    border: 1px solid rgba(91, 155, 213, 0.22);
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.10);
    color: var(--po-accent, #5B9BD5);
    font-weight: 800;
    animation: po-ex-kyc-pop 0.7s ease both;
}

.po-ex-kyc-profile-card i,
.po-ex-kyc-address-card i,
.po-ex-kyc-bank-card i,
.po-ex-kyc-payout-card i,
.po-ex-kyc-doc-card i,
.po-ex-kyc-review-card i,
.po-ex-kyc-verified-card i {
    font-size: 28px;
}

.po-ex-kyc-profile-scene,
.po-ex-kyc-payout-scene,
.po-ex-kyc-review-scene {
    grid-template-columns: 1fr 96px 1fr;
}

.po-ex-kyc-profile-card,
.po-ex-kyc-bank-card,
.po-ex-kyc-review-card {
    grid-column: 1;
}

.po-ex-kyc-address-card,
.po-ex-kyc-payout-card,
.po-ex-kyc-verified-card {
    grid-column: 3;
    animation-delay: 0.18s;
}

.po-ex-kyc-check {
    grid-column: 2;
    width: 54px;
    height: 54px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    color: #10b981;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.25);
    animation: po-ex-kyc-pulse 1.8s ease-in-out infinite;
}

.po-ex-kyc-flow,
.po-ex-kyc-review-track {
    grid-column: 2;
    width: 86px;
    height: 6px;
    border-radius: 999px;
    background: rgba(91, 155, 213, 0.16);
    overflow: hidden;
}

.po-ex-kyc-flow span,
.po-ex-kyc-review-track span {
    display: block;
    width: 55%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--po-accent, #5B9BD5), #10b981);
    animation: po-ex-kyc-flow 1.8s ease-in-out infinite;
}

.po-ex-kyc-doc-scene {
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.po-ex-kyc-doc-id {
    grid-column: 1;
}

.po-ex-kyc-doc-address {
    grid-column: 2;
    animation-delay: 0.14s;
}

.po-ex-kyc-lock {
    grid-column: 3;
    min-width: 118px;
    min-height: 86px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 18px;
    color: #10b981;
    background: rgba(16, 185, 129, 0.10);
    border: 1px solid rgba(16, 185, 129, 0.22);
    font-weight: 800;
    animation: po-ex-kyc-pop 0.7s ease 0.26s both;
}

.po-ex-kyc-lock i {
    font-size: 28px;
}

.po-ex-kyc-verified-card {
    color: #10b981;
    border-color: rgba(16, 185, 129, 0.28);
}

@keyframes po-ex-kyc-pop {
    from { opacity: 0; transform: translateY(10px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes po-ex-kyc-pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.22);
    }
    50% {
        transform: scale(1.06);
        box-shadow: 0 0 0 12px rgba(16, 185, 129, 0);
    }
}

@keyframes po-ex-kyc-flow {
    0% { transform: translateX(-110%); }
    100% { transform: translateX(190%); }
}

.po-explainer-slide:has(.po-explainer-anim--account-record-model) .po-explainer-illustration,
.po-explainer-slide:has(.po-explainer-anim--account-record-match) .po-explainer-illustration,
.po-explainer-slide:has(.po-explainer-anim--account-record-profile) .po-explainer-illustration,
.po-explainer-slide:has(.po-explainer-anim--account-record-transparency) .po-explainer-illustration {
    height: 190px;
    margin-bottom: 18px;
}

.po-ex-aor-scene {
    position: absolute;
    inset: 18px;
    overflow: hidden;
}

.po-ex-aor-model-scene,
.po-ex-aor-match-scene,
.po-ex-aor-profile-scene,
.po-ex-aor-transparency-scene {
    border-radius: 22px;
}

.po-ex-aor-node,
.po-ex-aor-signal,
.po-ex-aor-profile-card,
.po-ex-aor-chip,
.po-ex-aor-table,
.po-ex-aor-share,
.po-ex-aor-target,
.po-ex-aor-badge {
    position: absolute;
    border: 1px solid rgba(91, 155, 213, 0.20);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.10);
}

.po-ex-aor-node {
    top: 50%;
    width: 126px;
    height: 86px;
    display: grid;
    place-items: center;
    gap: 6px;
    border-radius: 20px;
    color: var(--po-accent, #5B9BD5);
    font-weight: 800;
    transform: translateY(-50%) scale(0.92);
    opacity: 0;
    animation: po-ex-aor-pop 0.46s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.po-ex-aor-node i {
    font-size: 26px;
}

.po-ex-aor-node span {
    font-size: 0.78rem;
}

.po-ex-aor-node-manager {
    left: calc(50% - 168px);
}

.po-ex-aor-node-account {
    right: calc(50% - 168px);
    color: #10b981;
    animation-delay: 0.26s;
}

.po-ex-aor-link {
    position: absolute;
    left: calc(50% - 62px);
    top: 50%;
    width: 124px;
    height: 8px;
    border-radius: 999px;
    background: rgba(91, 155, 213, 0.13);
    overflow: hidden;
    transform: translateY(-50%);
}

.po-ex-aor-link span {
    display: block;
    width: 42%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--po-accent, #5B9BD5), #10b981);
    animation: po-ex-aor-flow 1.35s ease-in-out 0.3s infinite;
}

.po-ex-aor-badge {
    left: 50%;
    top: calc(50% + 34px);
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    color: #10b981;
    background: rgba(16, 185, 129, 0.12);
    transform: translate(-50%, -50%) scale(0.7);
    opacity: 0;
    animation: po-ex-aor-pop-center 0.38s ease 0.56s forwards, po-ex-aor-pulse 1.65s ease-in-out 1.0s infinite;
}

.po-ex-aor-signal {
    width: 116px;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 12px;
    border-radius: 999px;
    color: var(--po-accent, #5B9BD5);
    font-size: 0.78rem;
    font-weight: 800;
    opacity: 0;
    animation: po-ex-aor-signal-in 0.42s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.po-ex-aor-signal-1 {
    left: calc(50% - 172px);
    top: 26px;
}

.po-ex-aor-signal-2 {
    right: calc(50% - 172px);
    top: 26px;
    animation-delay: 0.16s;
}

.po-ex-aor-signal-3 {
    left: calc(50% - 58px);
    bottom: 18px;
    animation-delay: 0.32s;
}

.po-ex-aor-target {
    left: 50%;
    top: 50%;
    width: 68px;
    height: 68px;
    display: grid;
    place-items: center;
    border-radius: 22px;
    color: #10b981;
    background: rgba(16, 185, 129, 0.12);
    transform: translate(-50%, -50%) scale(0.86);
    opacity: 0;
    animation: po-ex-aor-pop-center 0.48s cubic-bezier(0.22, 1, 0.36, 1) 0.48s forwards;
}

.po-ex-aor-target i {
    font-size: 28px;
}

.po-ex-aor-orbit {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 132px;
    height: 82px;
    border: 1px solid rgba(91, 155, 213, 0.16);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0.85);
    opacity: 0;
    animation: po-ex-aor-orbit 1.8s ease-in-out 0.68s infinite;
}

.po-ex-aor-orbit-2 {
    width: 190px;
    height: 118px;
    animation-delay: 0.84s;
}

.po-ex-aor-profile-card {
    left: calc(50% - 162px);
    top: 50%;
    width: 144px;
    height: 102px;
    display: grid;
    grid-template-columns: 34px 1fr;
    grid-template-rows: repeat(3, 1fr);
    gap: 8px;
    align-items: center;
    padding: 16px;
    border-radius: 20px;
    color: var(--po-accent, #5B9BD5);
    transform: translateY(-50%) scale(0.95);
    opacity: 0;
    animation: po-ex-aor-pop 0.48s ease forwards;
}

.po-ex-aor-profile-card i {
    grid-row: 1 / span 3;
    font-size: 28px;
}

.po-ex-aor-profile-card span {
    height: 8px;
    border-radius: 999px;
    background: rgba(91, 155, 213, 0.18);
    transform-origin: left;
    animation: po-ex-aor-line-fill 1.15s ease-in-out infinite;
}

.po-ex-aor-profile-card span:nth-child(2) { width: 82%; }
.po-ex-aor-profile-card span:nth-child(3) { width: 66%; animation-delay: 0.12s; }
.po-ex-aor-profile-card span:nth-child(4) { width: 76%; animation-delay: 0.24s; }

.po-ex-aor-chip {
    right: calc(50% - 172px);
    min-width: 138px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 14px;
    color: var(--po-text, #1f2937);
    font-size: 0.78rem;
    font-weight: 800;
    opacity: 0;
    transform: translateY(8px);
    animation: po-ex-aor-chip-in 0.42s ease forwards;
}

.po-ex-aor-chip i {
    color: var(--po-accent, #5B9BD5);
}

.po-ex-aor-chip-1 { top: 30px; animation-delay: 0.22s; }
.po-ex-aor-chip-2 { top: 76px; animation-delay: 0.38s; }
.po-ex-aor-chip-3 { top: 122px; animation-delay: 0.54s; }

.po-ex-aor-table {
    left: 50%;
    top: 50%;
    width: min(390px, calc(100% - 40px));
    padding: 14px;
    border-radius: 20px;
    transform: translate(-50%, -50%) scale(0.96);
    opacity: 0;
    animation: po-ex-aor-pop-center 0.48s ease forwards;
}

.po-ex-aor-row {
    display: grid;
    grid-template-columns: 1.15fr 1fr 0.8fr;
    align-items: center;
    gap: 10px;
    min-height: 34px;
    padding: 8px 10px;
    border-radius: 12px;
    color: var(--po-text, #1f2937);
    font-size: 0.78rem;
}

.po-ex-aor-row-head {
    color: var(--po-muted, #64748b);
    background: rgba(91, 155, 213, 0.08);
}

.po-ex-aor-row-1,
.po-ex-aor-row-2 {
    opacity: 0;
    transform: translateY(8px);
    animation: po-ex-aor-row-in 0.4s ease forwards;
}

.po-ex-aor-row-1 { animation-delay: 0.22s; }
.po-ex-aor-row-2 { animation-delay: 0.40s; }

.po-ex-aor-row i {
    color: #10b981;
}

.po-ex-aor-row small {
    color: var(--po-accent, #5B9BD5);
    font-weight: 800;
}

.po-ex-aor-share {
    right: calc(50% - 206px);
    bottom: 20px;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    color: #10b981;
    background: rgba(16, 185, 129, 0.12);
    transform: scale(0.74);
    opacity: 0;
    animation: po-ex-aor-pop-flat 0.42s ease 0.64s forwards, po-ex-aor-pulse 1.6s ease-in-out 1.0s infinite;
}

@keyframes po-ex-aor-pop {
    to { opacity: 1; transform: translateY(-50%) scale(1); }
}

@keyframes po-ex-aor-pop-center {
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes po-ex-aor-pop-flat {
    to { opacity: 1; transform: scale(1); }
}

@keyframes po-ex-aor-flow {
    0% { transform: translateX(-120%); }
    100% { transform: translateX(240%); }
}

@keyframes po-ex-aor-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.20); }
    50% { box-shadow: 0 0 0 11px rgba(16, 185, 129, 0); }
}

@keyframes po-ex-aor-signal-in {
    from { opacity: 0; transform: translateY(10px) scale(0.94); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes po-ex-aor-orbit {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.82) rotate(0deg); }
    25%, 70% { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.08) rotate(10deg); }
}

@keyframes po-ex-aor-line-fill {
    0%, 100% { transform: scaleX(0.58); opacity: 0.55; }
    45% { transform: scaleX(1); opacity: 1; }
}

@keyframes po-ex-aor-chip-in {
    to { opacity: 1; transform: translateY(0); }
}

@keyframes po-ex-aor-row-in {
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 640px) {
    .po-explainer-slide:has(.po-explainer-anim--kyc-profile) .po-explainer-illustration,
    .po-explainer-slide:has(.po-explainer-anim--kyc-payout) .po-explainer-illustration,
    .po-explainer-slide:has(.po-explainer-anim--kyc-documents) .po-explainer-illustration,
    .po-explainer-slide:has(.po-explainer-anim--kyc-review) .po-explainer-illustration,
    .po-explainer-slide:has(.po-explainer-anim--account-record-model) .po-explainer-illustration,
    .po-explainer-slide:has(.po-explainer-anim--account-record-match) .po-explainer-illustration,
    .po-explainer-slide:has(.po-explainer-anim--account-record-profile) .po-explainer-illustration,
    .po-explainer-slide:has(.po-explainer-anim--account-record-transparency) .po-explainer-illustration {
        height: 220px;
    }

    .po-ex-kyc-safe-scene,
    .po-ex-aor-scene {
        inset: 14px;
    }

    .po-ex-kyc-profile-card,
    .po-ex-kyc-address-card,
    .po-ex-kyc-bank-card,
    .po-ex-kyc-payout-card,
    .po-ex-kyc-doc-card,
    .po-ex-kyc-review-card,
    .po-ex-kyc-verified-card,
    .po-ex-kyc-lock {
        min-width: 92px;
        padding: 12px 10px;
        font-size: 0.78rem;
    }

    .po-ex-aor-node {
        width: 104px;
        height: 78px;
    }

    .po-ex-aor-node-manager { left: calc(50% - 128px); }
    .po-ex-aor-node-account { right: calc(50% - 128px); }
    .po-ex-aor-link {
        left: calc(50% - 44px);
        width: 88px;
    }

    .po-ex-aor-signal {
        min-width: 96px;
        font-size: 0.72rem;
    }

    .po-ex-aor-signal-1 { left: 8px; }
    .po-ex-aor-signal-2 { right: 8px; }
    .po-ex-aor-signal-3 { left: calc(50% - 48px); }

    .po-ex-aor-profile-card {
        left: 8px;
        width: 120px;
    }

    .po-ex-aor-chip {
        right: 8px;
        min-width: 118px;
        font-size: 0.72rem;
    }

    .po-ex-aor-table {
        width: calc(100% - 18px);
        padding: 10px;
    }

    .po-ex-aor-row {
        gap: 6px;
        padding: 7px;
        font-size: 0.70rem;
    }

    .po-ex-aor-share {
        right: 16px;
    }
}

.po-ex-inv-safe-scene {
    position: absolute;
    inset: 20px;
    display: grid;
    align-items: center;
    justify-items: center;
    overflow: hidden;
}

.po-ex-inv-pill,
.po-ex-inv-benefit,
.po-ex-inv-person,
.po-ex-inv-mail,
.po-ex-inv-register,
.po-ex-inv-node,
.po-ex-inv-network-label,
.po-ex-inv-status-card {
    opacity: 1 !important;
    visibility: visible !important;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(91, 155, 213, 0.20);
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.11);
    color: #0f172a;
}

.po-ex-inv-link-scene {
    grid-template-columns: minmax(112px, 1fr) minmax(58px, 88px) minmax(112px, 1fr) minmax(88px, 0.72fr);
    gap: 12px;
}

.po-ex-inv-pill {
    width: min(150px, 100%);
    min-height: 86px;
    border-radius: 24px;
    display: grid;
    gap: 8px;
    place-items: center;
    padding: 14px;
    animation: po-ex-inv-card-in 0.42s ease both;
}

.po-ex-inv-pill i,
.po-ex-inv-person i,
.po-ex-inv-mail i,
.po-ex-inv-register i,
.po-ex-inv-node i {
    color: var(--po-accent, #5B9BD5);
    font-size: 22px;
}

.po-ex-inv-pill span,
.po-ex-inv-person span,
.po-ex-inv-mail span,
.po-ex-inv-register span,
.po-ex-inv-network-label {
    font-size: 12px;
    font-weight: 800;
    color: #475569;
}

.po-ex-inv-pill-ref { animation-delay: 0.06s; }
.po-ex-inv-pill-invite { animation-delay: 0.28s; }

.po-ex-inv-path {
    width: 88px;
    height: 10px;
    border-radius: 999px;
    background: rgba(91, 155, 213, 0.12);
    overflow: hidden;
}

.po-ex-inv-path span {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--po-accent, #5B9BD5), #10b981);
    transform-origin: left center;
    animation: po-ex-inv-fill 0.9s ease 0.25s both;
}

.po-ex-inv-benefit {
    position: static;
    width: min(106px, 100%);
    height: 68px;
    border-radius: 22px;
    display: grid;
    place-items: center;
    padding: 8px;
    animation: po-ex-inv-pop 0.46s ease 0.58s both;
}

.po-ex-inv-benefit strong {
    color: #10b981;
    font-size: 22px;
    line-height: 1;
}

.po-ex-inv-benefit span {
    font-size: 11px;
    color: #475569;
    font-weight: 800;
}

.po-ex-inv-customer-scene {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 14px;
}

.po-ex-inv-person,
.po-ex-inv-mail,
.po-ex-inv-register {
    width: 126px;
    min-height: 96px;
    border-radius: 26px;
    display: grid;
    place-items: center;
    gap: 8px;
    padding: 14px;
    animation: po-ex-inv-card-in 0.42s ease both;
}

.po-ex-inv-person { animation-delay: 0.06s; }
.po-ex-inv-mail { animation-delay: 0.26s; }
.po-ex-inv-register { animation-delay: 0.46s; }

.po-ex-inv-network-scene {
    grid-template-columns: minmax(76px, 1fr) minmax(48px, 0.65fr) minmax(104px, 1.2fr) minmax(48px, 0.65fr) minmax(76px, 1fr);
    grid-template-rows: 1fr auto;
    gap: 12px;
}

.po-ex-inv-node {
    width: 90px;
    height: 90px;
    border-radius: 28px;
    display: grid;
    place-items: center;
    animation: po-ex-inv-card-in 0.42s ease both;
}

.po-ex-inv-node-main {
    width: 116px;
    height: 116px;
    grid-column: 3;
    grid-row: 1;
}

.po-ex-inv-node-a {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    animation-delay: 0.24s;
}

.po-ex-inv-node-b {
    grid-column: 5;
    grid-row: 1;
    align-self: center;
    animation-delay: 0.38s;
}

.po-ex-inv-network-line {
    width: 100%;
    height: 4px;
    align-self: center;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(91, 155, 213, 0.12);
}

.po-ex-inv-network-line-a {
    grid-column: 2;
    grid-row: 1;
}

.po-ex-inv-network-line-b {
    grid-column: 4;
    grid-row: 1;
}

.po-ex-inv-network-line span {
    display: block;
    width: 100%;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(91, 155, 213, 0.18), rgba(16, 185, 129, 0.58));
    transform-origin: left center;
    animation: po-ex-inv-fill 0.7s ease 0.25s both;
}

.po-ex-inv-network-label {
    grid-column: 1 / -1;
    grid-row: 2;
    border-radius: 999px;
    padding: 10px 18px;
    animation: po-ex-inv-pop 0.42s ease 0.62s both;
}

.po-ex-inv-status-scene {
    align-items: stretch;
}

.po-ex-inv-status-card {
    width: min(360px, 100%);
    border-radius: 26px;
    padding: 18px;
    display: grid;
    gap: 10px;
    align-self: center;
    animation: po-ex-inv-card-in 0.42s ease both;
}

.po-ex-inv-status-card b {
    color: #0f172a;
    font-size: 14px;
}

.po-ex-inv-status-card span {
    display: grid;
    grid-template-columns: 26px 1fr;
    align-items: center;
    min-height: 36px;
    border-radius: 14px;
    padding: 0 12px;
    background: rgba(91, 155, 213, 0.08);
    color: #475569;
    font-size: 12px;
    font-weight: 800;
    animation: po-ex-inv-row-in 0.42s ease both;
}

.po-ex-inv-status-card span:nth-child(2) { animation-delay: 0.14s; }
.po-ex-inv-status-card span:nth-child(3) { animation-delay: 0.28s; }
.po-ex-inv-status-card span:nth-child(4) { animation-delay: 0.42s; }

.po-ex-inv-status-card i {
    color: var(--po-accent, #5B9BD5);
}

@keyframes po-ex-inv-card-in {
    from { opacity: 0; transform: translateY(14px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes po-ex-inv-pop {
    from { opacity: 0; transform: translateY(10px) scale(0.88); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes po-ex-inv-fill {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

@keyframes po-ex-inv-row-in {
    from { opacity: 0; transform: translateX(-12px); }
    to { opacity: 1; transform: translateX(0); }
}

@media (max-width: 640px) {
    .po-explainer-slide:has(.po-explainer-anim--invite-link) .po-explainer-illustration,
    .po-explainer-slide:has(.po-explainer-anim--invite-customer) .po-explainer-illustration,
    .po-explainer-slide:has(.po-explainer-anim--invite-network) .po-explainer-illustration,
    .po-explainer-slide:has(.po-explainer-anim--invite-status) .po-explainer-illustration {
        height: 220px;
    }

    .po-ex-inv-link-scene,
    .po-ex-inv-customer-scene {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .po-ex-inv-network-scene {
        grid-template-columns: 1fr 36px 1fr 36px 1fr;
        gap: 8px;
    }

    .po-ex-inv-path {
        width: 10px;
        height: 28px;
    }

    .po-ex-inv-benefit {
        width: min(260px, 100%);
        height: 56px;
    }

    .po-ex-inv-person,
    .po-ex-inv-mail,
    .po-ex-inv-register,
    .po-ex-inv-pill {
        width: min(260px, 100%);
        min-height: 48px;
        grid-template-columns: 28px 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .po-ex-inv-pill,
    .po-ex-inv-benefit,
    .po-ex-inv-person,
    .po-ex-inv-mail,
    .po-ex-inv-register,
    .po-ex-inv-node,
    .po-ex-inv-network-label,
    .po-ex-inv-status-card,
    .po-ex-inv-status-card span,
    .po-ex-inv-path span,
    .po-ex-inv-network-line span {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

body.po-darkmode .po-explainer-anim--tracking-overview .po-ex-tracking-card,
body.po-darkmode .po-explainer-anim--tracking-filters .po-ex-filter-panel,
body.po-darkmode .po-explainer-anim--tracking-filters .po-ex-filter-result,
body.po-darkmode .po-explainer-anim--tracking-log .po-ex-log-table,
body.po-darkmode .po-explainer-anim--tracking-zero .po-ex-zero-card,
body.po-darkmode .po-explainer-anim--tracking-zero .po-ex-zero-badge,
body.po-darkmode .po-explainer-anim--reflink-campaign .po-ex-rl-campaign-card,
body.po-darkmode .po-explainer-anim--reflink-campaign .po-ex-rl-slug-card,
body.po-darkmode .po-explainer-anim--reflink-campaign .po-ex-rl-public-link,
body.po-darkmode .po-explainer-anim--reflink-destination .po-ex-rl-browser,
body.po-darkmode .po-explainer-anim--reflink-destination .po-ex-rl-test,
body.po-darkmode .po-explainer-anim--reflink-destination .po-ex-rl-verified,
body.po-darkmode .po-explainer-anim--reflink-tracking .po-ex-rl-event,
body.po-darkmode .po-explainer-anim--reflink-tracking .po-ex-rl-metric,
body.po-darkmode .po-explainer-anim--reflink-benefit .po-ex-rl-benefit-card,
body.po-darkmode .po-explainer-anim--reflink-benefit .po-ex-rl-quota,
body.po-darkmode .po-explainer-anim--reflink-benefit .po-ex-rl-month,
body.po-darkmode .po-explainer-anim--reflink-best-practice .po-ex-rl-channel,
body.po-darkmode .po-explainer-anim--reflink-best-practice .po-ex-rl-copy,
body.po-darkmode .po-ex-inv-pill,
body.po-darkmode .po-ex-inv-benefit,
body.po-darkmode .po-ex-inv-person,
body.po-darkmode .po-ex-inv-mail,
body.po-darkmode .po-ex-inv-register,
body.po-darkmode .po-ex-inv-node,
body.po-darkmode .po-ex-inv-network-label,
body.po-darkmode .po-ex-inv-status-card,
body.po-darkmode .po-ex-pay-card,
body.po-darkmode .po-ex-pay-check,
body.po-darkmode .po-ex-pay-request-source,
body.po-darkmode .po-ex-pay-request-bank,
body.po-darkmode .po-ex-pay-receipt,
body.po-darkmode .po-ex-pay-history-list,
body.po-darkmode .po-ex-pay-calendar,
body.po-darkmode .po-ex-pay-release,
body.po-darkmode .po-ex-pay-hold,
body.po-darkmode .po-ex-pay-ready,
body.po-darkmode .po-ex-pay-processing-pill,
body.po-darkmode .po-ex-pay-status-chip,
body.dark-mode .po-explainer-anim--tracking-overview .po-ex-tracking-card,
body.dark-mode .po-explainer-anim--tracking-filters .po-ex-filter-panel,
body.dark-mode .po-explainer-anim--tracking-filters .po-ex-filter-result,
body.dark-mode .po-explainer-anim--tracking-log .po-ex-log-table,
body.dark-mode .po-explainer-anim--tracking-zero .po-ex-zero-card,
body.dark-mode .po-explainer-anim--tracking-zero .po-ex-zero-badge,
body.dark-mode .po-explainer-anim--reflink-campaign .po-ex-rl-campaign-card,
body.dark-mode .po-explainer-anim--reflink-campaign .po-ex-rl-slug-card,
body.dark-mode .po-explainer-anim--reflink-campaign .po-ex-rl-public-link,
body.dark-mode .po-explainer-anim--reflink-destination .po-ex-rl-browser,
body.dark-mode .po-explainer-anim--reflink-destination .po-ex-rl-test,
body.dark-mode .po-explainer-anim--reflink-destination .po-ex-rl-verified,
body.dark-mode .po-explainer-anim--reflink-tracking .po-ex-rl-event,
body.dark-mode .po-explainer-anim--reflink-tracking .po-ex-rl-metric,
body.dark-mode .po-explainer-anim--reflink-benefit .po-ex-rl-benefit-card,
body.dark-mode .po-explainer-anim--reflink-benefit .po-ex-rl-quota,
body.dark-mode .po-explainer-anim--reflink-benefit .po-ex-rl-month,
body.dark-mode .po-explainer-anim--reflink-best-practice .po-ex-rl-channel,
body.dark-mode .po-explainer-anim--reflink-best-practice .po-ex-rl-copy,
body.dark-mode .po-ex-inv-pill,
body.dark-mode .po-ex-inv-benefit,
body.dark-mode .po-ex-inv-person,
body.dark-mode .po-ex-inv-mail,
body.dark-mode .po-ex-inv-register,
body.dark-mode .po-ex-inv-node,
body.dark-mode .po-ex-inv-network-label,
body.dark-mode .po-ex-inv-status-card,
body.dark-mode .po-ex-pay-card,
body.dark-mode .po-ex-pay-check,
body.dark-mode .po-ex-pay-request-source,
body.dark-mode .po-ex-pay-request-bank,
body.dark-mode .po-ex-pay-receipt,
body.dark-mode .po-ex-pay-history-list,
body.dark-mode .po-ex-pay-calendar,
body.dark-mode .po-ex-pay-release,
body.dark-mode .po-ex-pay-hold,
body.dark-mode .po-ex-pay-ready,
body.dark-mode .po-ex-pay-processing-pill,
body.dark-mode .po-ex-pay-status-chip,
.dark-side .po-explainer-anim--tracking-overview .po-ex-tracking-card,
.dark-side .po-explainer-anim--tracking-filters .po-ex-filter-panel,
.dark-side .po-explainer-anim--tracking-filters .po-ex-filter-result,
.dark-side .po-explainer-anim--tracking-log .po-ex-log-table,
.dark-side .po-explainer-anim--tracking-zero .po-ex-zero-card,
.dark-side .po-explainer-anim--tracking-zero .po-ex-zero-badge,
.dark-side .po-explainer-anim--reflink-campaign .po-ex-rl-campaign-card,
.dark-side .po-explainer-anim--reflink-campaign .po-ex-rl-slug-card,
.dark-side .po-explainer-anim--reflink-campaign .po-ex-rl-public-link,
.dark-side .po-explainer-anim--reflink-destination .po-ex-rl-browser,
.dark-side .po-explainer-anim--reflink-destination .po-ex-rl-test,
.dark-side .po-explainer-anim--reflink-destination .po-ex-rl-verified,
.dark-side .po-explainer-anim--reflink-tracking .po-ex-rl-event,
.dark-side .po-explainer-anim--reflink-tracking .po-ex-rl-metric,
.dark-side .po-explainer-anim--reflink-benefit .po-ex-rl-benefit-card,
.dark-side .po-explainer-anim--reflink-benefit .po-ex-rl-quota,
.dark-side .po-explainer-anim--reflink-benefit .po-ex-rl-month,
.dark-side .po-explainer-anim--reflink-best-practice .po-ex-rl-channel,
.dark-side .po-explainer-anim--reflink-best-practice .po-ex-rl-copy,
.dark-side .po-ex-inv-pill,
.dark-side .po-ex-inv-benefit,
.dark-side .po-ex-inv-person,
.dark-side .po-ex-inv-mail,
.dark-side .po-ex-inv-register,
.dark-side .po-ex-inv-node,
.dark-side .po-ex-inv-network-label,
.dark-side .po-ex-inv-status-card,
.dark-side .po-ex-pay-card,
.dark-side .po-ex-pay-check,
.dark-side .po-ex-pay-request-source,
.dark-side .po-ex-pay-request-bank,
.dark-side .po-ex-pay-receipt,
.dark-side .po-ex-pay-history-list,
.dark-side .po-ex-pay-calendar,
.dark-side .po-ex-pay-release,
.dark-side .po-ex-pay-hold,
.dark-side .po-ex-pay-ready,
.dark-side .po-ex-pay-processing-pill,
.dark-side .po-ex-pay-status-chip {
    background: #2a2d35;
    color: #f8fafc;
    border-color: rgba(122, 179, 224, 0.38);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.42);
}

body.po-darkmode .po-explainer-anim--reflink-campaign b,
body.po-darkmode .po-explainer-anim--reflink-destination strong,
body.po-darkmode .po-explainer-anim--reflink-tracking strong,
body.dark-mode .po-explainer-anim--reflink-campaign b,
body.dark-mode .po-explainer-anim--reflink-destination strong,
body.dark-mode .po-explainer-anim--reflink-tracking strong,
.dark-side .po-explainer-anim--reflink-campaign b,
.dark-side .po-explainer-anim--reflink-destination strong,
.dark-side .po-explainer-anim--reflink-tracking strong {
    color: #f8fafc;
}

body.po-darkmode .po-explainer-anim--reflink-campaign small,
body.po-darkmode .po-explainer-anim--reflink-destination small,
body.po-darkmode .po-explainer-anim--reflink-tracking .po-ex-rl-metric span,
body.po-darkmode .po-explainer-anim--reflink-benefit .po-ex-rl-quota span,
body.dark-mode .po-explainer-anim--reflink-campaign small,
body.dark-mode .po-explainer-anim--reflink-destination small,
body.dark-mode .po-explainer-anim--reflink-tracking .po-ex-rl-metric span,
body.dark-mode .po-explainer-anim--reflink-benefit .po-ex-rl-quota span,
.dark-side .po-explainer-anim--reflink-campaign small,
.dark-side .po-explainer-anim--reflink-destination small,
.dark-side .po-explainer-anim--reflink-tracking .po-ex-rl-metric span,
.dark-side .po-explainer-anim--reflink-benefit .po-ex-rl-quota span {
    color: #cbd5e1;
}

/* ============================================================================
   BULK METADATA DIALOG (BMD) ANIMATIONEN — 2026-04-30 (v1)
   ----------------------------------------------------------------------------
   Sechs Hollywood-Style-Slides fuer den Page-Explainer des
   Bulk-Metadaten-Dialogs:
     .po-explainer-anim--bmd-flow      → Massenbearbeitung in einem Schritt
     .po-explainer-anim--bmd-active    → Felder gezielt aktivieren
     .po-explainer-anim--bmd-modes     → Vier Bearbeitungsmodi
     .po-explainer-anim--bmd-conflict  → Konflikte sofort erkennen
     .po-explainer-anim--bmd-billing   → Faires Billing
     .po-explainer-anim--bmd-templates → Vorlagen speichern
   Pattern: position:absolute; inset:0; sichtbare Kinder mit Width/Height/Opacity.
   Cubic-bezier(0.22, 1, 0.36, 1) für "Apple-style" Easing.
   Staggered animation-delays für sequenzielles Reveal.
   ============================================================================ */

/* ── 1. BMD-FLOW — Stack Dokumente + Tag-Sweep ─────────────────────────── */
.po-explainer-anim--bmd-flow { position: absolute; inset: 0; }
.po-explainer-anim--bmd-flow .po-ex-bmd-doc {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 64px;
    height: 84px;
    background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
    border: 1px solid rgba(91, 155, 213, 0.34);
    border-radius: 8px;
    box-shadow: 0 8px 18px rgba(91, 155, 213, 0.22);
    transform: translate(-50%, -50%);
    opacity: 0;
    animation: po-ex-bmd-doc-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.po-explainer-anim--bmd-flow .po-ex-bmd-doc::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0;
    height: 18px;
    background: linear-gradient(90deg, #5B9BD5 0%, #4178BE 100%);
    border-radius: 7px 7px 0 0;
}
.po-explainer-anim--bmd-flow .po-ex-bmd-doc::after {
    content: '';
    position: absolute;
    left: 10px; right: 10px;
    top: 30px;
    height: 4px;
    border-radius: 2px;
    background: #cbd5e1;
    box-shadow: 0 12px 0 #e2e8f0, 0 24px 0 #e2e8f0, 0 36px 0 #e2e8f0;
}
.po-explainer-anim--bmd-flow .po-ex-bmd-doc-1 { animation-delay: 0.10s; --po-bmd-doc-x: -110px; --po-bmd-doc-rot: -6deg; }
.po-explainer-anim--bmd-flow .po-ex-bmd-doc-2 { animation-delay: 0.18s; --po-bmd-doc-x:  -36px; --po-bmd-doc-rot: -2deg; }
.po-explainer-anim--bmd-flow .po-ex-bmd-doc-3 { animation-delay: 0.26s; --po-bmd-doc-x:   38px; --po-bmd-doc-rot:  2deg; }
.po-explainer-anim--bmd-flow .po-ex-bmd-doc-4 { animation-delay: 0.34s; --po-bmd-doc-x:  112px; --po-bmd-doc-rot:  6deg; }
@keyframes po-ex-bmd-doc-in {
    0%   { opacity: 0; transform: translate(calc(-50% + var(--po-bmd-doc-x) * 0.5), calc(-50% + 60px)) rotate(0deg) scale(0.6); }
    60%  { opacity: 1; transform: translate(calc(-50% + var(--po-bmd-doc-x)), calc(-50% - 8px)) rotate(var(--po-bmd-doc-rot)) scale(1.06); }
    100% { opacity: 1; transform: translate(calc(-50% + var(--po-bmd-doc-x)), -50%) rotate(var(--po-bmd-doc-rot)) scale(1); }
}
/* Der Tag fliegt rein und "klickt" auf alle Dokumente */
.po-explainer-anim--bmd-flow .po-ex-bmd-tag {
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 6px 14px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #fff;
    border-radius: 999px;
    font: 700 11px/1 system-ui, sans-serif;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    box-shadow: 0 8px 22px rgba(16, 185, 129, 0.42);
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    animation: po-ex-bmd-tag-fly 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.55s both;
    white-space: nowrap;
}
@keyframes po-ex-bmd-tag-fly {
    0%   { opacity: 0; transform: translate(-50%, calc(-50% - 80px)) scale(0.4); }
    35%  { opacity: 1; transform: translate(-50%, -50%) scale(1.18); }
    60%  { opacity: 1; transform: translate(-50%, -50%) scale(0.95); }
    100% { opacity: 1; transform: translate(-50%, calc(-50% - 70px)) scale(1); }
}
/* Sweep-Wave die ueber alle Dokumente laeuft */
.po-explainer-anim--bmd-flow .po-ex-bmd-sweep {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 320px;
    height: 110px;
    border-radius: 16px;
    background: radial-gradient(ellipse, rgba(16, 185, 129, 0.32) 0%, rgba(16, 185, 129, 0) 70%);
    transform: translate(-50%, -50%) scale(0.2);
    opacity: 0;
    animation: po-ex-bmd-sweep-pulse 1.2s ease-out 0.85s both;
    pointer-events: none;
}
@keyframes po-ex-bmd-sweep-pulse {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.2); }
    35%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.4); }
}

/* ── 2. BMD-ACTIVE — Checkbox-Reihe wird sequenziell aktiviert ─────────── */
.po-explainer-anim--bmd-active { position: absolute; inset: 0; }
.po-explainer-anim--bmd-active .po-ex-bmd-row {
    position: absolute;
    left: 50%;
    width: 280px;
    height: 36px;
    background: var(--po-bg-elevated, #ffffff);
    border: 1px solid rgba(91, 155, 213, 0.18);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 12px;
    transform: translate(-50%, 0) translateX(-30px);
    opacity: 0;
    animation: po-ex-bmd-row-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.po-explainer-anim--bmd-active .po-ex-bmd-row::after {
    content: '';
    flex: 1;
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(90deg, #e2e8f0 0%, #f1f5f9 100%);
}
/* row-2 + row-4 verwenden die Basis-Animation (po-ex-bmd-row-in) aus .po-ex-bmd-row.
   row-1 + row-3 ueberschreiben mit DUAL-Animation (in + check) — siehe unten,
   eine Regel pro row-1/3 mit voller animation-shorthand fuer Robustheit. */
.po-explainer-anim--bmd-active .po-ex-bmd-row-2 { top: calc(50% - 38px); animation-delay: 0.20s; }
.po-explainer-anim--bmd-active .po-ex-bmd-row-4 { top: calc(50% + 42px); animation-delay: 0.40s; }
.po-explainer-anim--bmd-active .po-ex-bmd-cb {
    position: relative;
    width: 18px;
    height: 18px;
    border: 2px solid #cbd5e1;
    border-radius: 4px;
    background: #fff;
    flex-shrink: 0;
    transition: all 0.25s ease;
}
.po-explainer-anim--bmd-active .po-ex-bmd-row.is-checked .po-ex-bmd-cb {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-color: #059669;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.18);
}
.po-explainer-anim--bmd-active .po-ex-bmd-row.is-checked .po-ex-bmd-cb::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 1px;
    width: 4px;
    height: 9px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(45deg) scale(0);
    animation: po-ex-bmd-check-pop 0.3s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
/* row-1 + row-3: dual-Animation (slide-in + check-glow). Eine konsolidierte
   Regel mit `animation`-Shorthand statt separater individuelle Properties.
   Stabiler ueber Browser-Cascade-Edge-Cases (Property-Inheritance bei
   gemischtem shorthand vs. longhand). */
.po-explainer-anim--bmd-active .po-ex-bmd-row-1 {
    top: calc(50% - 78px);
    animation:
        po-ex-bmd-row-in    0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.10s both,
        po-ex-bmd-row-check 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.85s forwards;
}
.po-explainer-anim--bmd-active .po-ex-bmd-row-3 {
    top: calc(50% + 2px);
    animation:
        po-ex-bmd-row-in    0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.30s both,
        po-ex-bmd-row-check 0.4s cubic-bezier(0.22, 1, 0.36, 1) 1.10s forwards;
}
@keyframes po-ex-bmd-row-in {
    0%   { opacity: 0; transform: translate(-50%, 0) translateX(-30px); }
    100% { opacity: 1; transform: translate(-50%, 0) translateX(0); }
}
@keyframes po-ex-bmd-row-check {
    0%   { background: var(--po-bg-elevated, #ffffff); border-color: rgba(91, 155, 213, 0.18); }
    50%  { background: rgba(16, 185, 129, 0.10); border-color: rgba(16, 185, 129, 0.5); box-shadow: 0 6px 18px rgba(16, 185, 129, 0.22); }
    100% { background: rgba(16, 185, 129, 0.06); border-color: rgba(16, 185, 129, 0.4); box-shadow: 0 4px 14px rgba(16, 185, 129, 0.16); }
}
@keyframes po-ex-bmd-check-pop {
    0%   { transform: rotate(45deg) scale(0); }
    100% { transform: rotate(45deg) scale(1); }
}

/* ── 3. BMD-MODES — 4 Bearbeitungsmodi (replace/append/remove/clear) ───── */
.po-explainer-anim--bmd-modes { position: absolute; inset: 0; }
.po-explainer-anim--bmd-modes .po-ex-bmd-mode {
    position: absolute;
    top: 50%;
    width: 110px;
    height: 100px;
    border-radius: 12px;
    background: var(--po-bg-elevated, #ffffff);
    border: 1px solid rgba(91, 155, 213, 0.22);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.10);
    transform: translateY(-50%) scale(0.4);
    opacity: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px;
    animation: po-ex-bmd-mode-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.po-explainer-anim--bmd-modes .po-ex-bmd-mode i {
    font-size: 22px;
    line-height: 1;
}
.po-explainer-anim--bmd-modes .po-ex-bmd-mode span {
    font: 700 10px/1 system-ui, sans-serif;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: center;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.po-explainer-anim--bmd-modes .po-ex-bmd-mode-1 { left: calc(50% - 230px); animation-delay: 0.10s; }
.po-explainer-anim--bmd-modes .po-ex-bmd-mode-2 { left: calc(50% - 116px); animation-delay: 0.22s; }
.po-explainer-anim--bmd-modes .po-ex-bmd-mode-3 { left: calc(50% +   4px); animation-delay: 0.34s; }
.po-explainer-anim--bmd-modes .po-ex-bmd-mode-4 { left: calc(50% + 122px); animation-delay: 0.46s; }
.po-explainer-anim--bmd-modes .po-ex-bmd-mode-1 { background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%); }
.po-explainer-anim--bmd-modes .po-ex-bmd-mode-1 i { color: #1e40af; }
.po-explainer-anim--bmd-modes .po-ex-bmd-mode-2 { background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%); }
.po-explainer-anim--bmd-modes .po-ex-bmd-mode-2 i { color: #166534; }
.po-explainer-anim--bmd-modes .po-ex-bmd-mode-3 { background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%); }
.po-explainer-anim--bmd-modes .po-ex-bmd-mode-3 i { color: #991b1b; }
.po-explainer-anim--bmd-modes .po-ex-bmd-mode-4 { background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%); }
.po-explainer-anim--bmd-modes .po-ex-bmd-mode-4 i { color: #374151; }
@keyframes po-ex-bmd-mode-in {
    0%   { opacity: 0; transform: translateY(-50%) translateY(20px) scale(0.4); }
    60%  { opacity: 1; transform: translateY(-50%) translateY(-4px) scale(1.05); }
    100% { opacity: 1; transform: translateY(-50%) translateY(0) scale(1); }
}

/* ── 4. BMD-CONFLICT — 3 Dokumente mit unterschiedlichen Werten + Warning  */
.po-explainer-anim--bmd-conflict { position: absolute; inset: 0; }
.po-explainer-anim--bmd-conflict .po-ex-bmd-conf-doc {
    position: absolute;
    top: 50%;
    width: 90px;
    height: 76px;
    background: var(--po-bg-elevated, #ffffff);
    border: 1px solid rgba(91, 155, 213, 0.28);
    border-radius: 8px;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.10);
    transform: translateY(-50%) scale(0.6);
    opacity: 0;
    display: flex;
    flex-direction: column;
    padding: 10px;
    gap: 6px;
    animation: po-ex-bmd-conf-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.po-explainer-anim--bmd-conflict .po-ex-bmd-conf-doc::before {
    content: '';
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: rgba(91, 155, 213, 0.42);
}
.po-explainer-anim--bmd-conflict .po-ex-bmd-conf-val {
    margin-top: auto;
    padding: 4px 8px;
    border-radius: 4px;
    font: 700 10px/1.1 system-ui, sans-serif;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Positionen + Wert-Farben pro Conf-Doc (left/value-color).
   Die Animation (in + pulse) wird unten konsolidiert pro Doc als
   shorthand gesetzt — robuster als Multi-Selector-Override mit
   separaten animation-delay-Properties. */
.po-explainer-anim--bmd-conflict .po-ex-bmd-conf-doc-1 { left: calc(50% - 168px); }
.po-explainer-anim--bmd-conflict .po-ex-bmd-conf-doc-2 { left: calc(50% -  46px); }
.po-explainer-anim--bmd-conflict .po-ex-bmd-conf-doc-3 { left: calc(50% +  76px); }
.po-explainer-anim--bmd-conflict .po-ex-bmd-conf-doc-1 .po-ex-bmd-conf-val { background: rgba(59, 130, 246, 0.16); color: #1e40af; }
.po-explainer-anim--bmd-conflict .po-ex-bmd-conf-doc-2 .po-ex-bmd-conf-val { background: rgba(16, 185, 129, 0.16); color: #166534; }
.po-explainer-anim--bmd-conflict .po-ex-bmd-conf-doc-3 .po-ex-bmd-conf-val { background: rgba(244, 114, 182, 0.16); color: #9d174d; }
@keyframes po-ex-bmd-conf-in {
    0%   { opacity: 0; transform: translateY(-50%) scale(0.6); }
    60%  { opacity: 1; transform: translateY(-50%) scale(1.06); }
    100% { opacity: 1; transform: translateY(-50%) scale(1); }
}
.po-explainer-anim--bmd-conflict .po-ex-bmd-conf-warn {
    position: absolute;
    top: calc(50% - 70px);
    left: 50%;
    padding: 6px 12px 6px 30px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 1px solid #fcd34d;
    border-radius: 999px;
    color: #92400e;
    font: 700 11px/1 system-ui, sans-serif;
    letter-spacing: 0.03em;
    box-shadow: 0 8px 22px rgba(245, 158, 11, 0.34);
    transform: translate(-50%, 0) scale(0);
    opacity: 0;
    animation: po-ex-bmd-conf-warn-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.95s both;
    white-space: nowrap;
}
.po-explainer-anim--bmd-conflict .po-ex-bmd-conf-warn::before {
    content: '\f071';
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free', 'FontAwesome';
    font-weight: 900;
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    color: #d97706;
}
@keyframes po-ex-bmd-conf-warn-in {
    0%   { opacity: 0; transform: translate(-50%, 18px) scale(0.4); }
    60%  { opacity: 1; transform: translate(-50%, -4px) scale(1.08); }
    100% { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
/* Konsolidierte Animationen pro Doc: staggered slide-in (delay 0.10/0.22/0.34s)
   + Warning-Pulse bei 1.45s der 2x laeuft. Alle Animations explizit per
   shorthand — keine Cascade-Kollision mit den earlier .po-ex-bmd-conf-doc
   Basis-Regel-Animations. */
.po-explainer-anim--bmd-conflict .po-ex-bmd-conf-doc-1 {
    animation:
        po-ex-bmd-conf-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.10s both,
        po-ex-bmd-conf-pulse 1.6s ease 1.45s 2;
}
.po-explainer-anim--bmd-conflict .po-ex-bmd-conf-doc-2 {
    animation:
        po-ex-bmd-conf-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.22s both,
        po-ex-bmd-conf-pulse 1.6s ease 1.45s 2;
}
.po-explainer-anim--bmd-conflict .po-ex-bmd-conf-doc-3 {
    animation:
        po-ex-bmd-conf-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.34s both,
        po-ex-bmd-conf-pulse 1.6s ease 1.45s 2;
}
@keyframes po-ex-bmd-conf-pulse {
    0%   { box-shadow: 0 8px 18px rgba(15, 23, 42, 0.10); }
    50%  { box-shadow: 0 8px 18px rgba(245, 158, 11, 0.45); }
    100% { box-shadow: 0 8px 18px rgba(15, 23, 42, 0.10); }
}

/* ── 5. BMD-BILLING — Counter + Coin-Drop ─────────────────────────────── */
.po-explainer-anim--bmd-billing { position: absolute; inset: 0; }
.po-explainer-anim--bmd-billing .po-ex-bmd-bill-card {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 240px;
    padding: 18px 20px;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid rgba(91, 155, 213, 0.28);
    border-radius: 12px;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.14);
    transform: translate(-50%, -50%) scale(0.6);
    opacity: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    animation: po-ex-bmd-bill-card-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.10s both;
}
.po-explainer-anim--bmd-billing .po-ex-bmd-bill-num {
    font: 800 38px/1 system-ui, sans-serif;
    letter-spacing: -0.02em;
    color: var(--po-accent, #5B9BD5);
    background: linear-gradient(135deg, #5B9BD5 0%, #4178BE 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.po-explainer-anim--bmd-billing .po-ex-bmd-bill-label {
    font: 600 11px/1 system-ui, sans-serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--po-text-muted, #6b7280);
}
.po-explainer-anim--bmd-billing .po-ex-bmd-bill-coin {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 30px;
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 60%, #d97706 100%);
    border-radius: 50%;
    box-shadow: 0 6px 14px rgba(217, 119, 6, 0.5), inset 0 -3px 6px rgba(120, 53, 15, 0.4);
    transform: translate(-50%, -50%) translateY(-180px) scale(0.4);
    opacity: 0;
    animation: po-ex-bmd-bill-coin-drop 0.85s cubic-bezier(0.5, 0, 0.5, 1.6) both;
}
.po-explainer-anim--bmd-billing .po-ex-bmd-bill-coin::before {
    content: '€';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font: 800 13px/1 system-ui, sans-serif;
    color: #78350f;
}
.po-explainer-anim--bmd-billing .po-ex-bmd-bill-coin-1 { animation-delay: 0.85s; --po-bmd-coin-x: -90px; }
.po-explainer-anim--bmd-billing .po-ex-bmd-bill-coin-2 { animation-delay: 1.05s; --po-bmd-coin-x: -30px; }
.po-explainer-anim--bmd-billing .po-ex-bmd-bill-coin-3 { animation-delay: 1.25s; --po-bmd-coin-x:  30px; }
.po-explainer-anim--bmd-billing .po-ex-bmd-bill-coin-4 { animation-delay: 1.45s; --po-bmd-coin-x:  90px; }
@keyframes po-ex-bmd-bill-coin-drop {
    0%   { opacity: 0; transform: translate(-50%, -50%) translate(var(--po-bmd-coin-x), -180px) scale(0.4) rotate(0deg); }
    25%  { opacity: 1; transform: translate(-50%, -50%) translate(var(--po-bmd-coin-x), -180px) scale(0.7) rotate(120deg); }
    65%  { opacity: 1; transform: translate(-50%, -50%) translate(var(--po-bmd-coin-x), 50px) scale(1.05) rotate(720deg); }
    100% { opacity: 0; transform: translate(-50%, -50%) translate(var(--po-bmd-coin-x), 60px) scale(0.85) rotate(820deg); }
}
@keyframes po-ex-bmd-bill-card-in {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
    60%  { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* ── 5b. BMD-AUDIT — Shield + Audit-Log (Trust statt Billing) ────────────
   FIX 01.05.2026: Ersetzt bmd-billing (Coins) durch trust-orientiertes
   Shield + Audit-Log. User-Vorgabe: keine Billing-Infos im UI. */
.po-explainer-anim--bmd-audit { position: absolute; inset: 0; }
.po-explainer-anim--bmd-audit .po-ex-bmd-audit-shield {
    position: absolute;
    top: 50%;
    left: calc(50% - 110px);
    width: 100px;
    height: 110px;
    transform: translateY(-50%) scale(0.6);
    opacity: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #047857;
    animation: po-ex-bmd-audit-shield-in 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.10s both,
               po-ex-bmd-audit-shield-pulse 1.6s ease-in-out 0.85s infinite;
}
.po-explainer-anim--bmd-audit .po-ex-bmd-audit-shield i {
    font-size: 56px;
    filter: drop-shadow(0 6px 14px rgba(4, 120, 87, 0.30));
}
.po-explainer-anim--bmd-audit .po-ex-bmd-audit-shield-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #047857;
}
.po-explainer-anim--bmd-audit .po-ex-bmd-audit-log {
    position: absolute;
    top: 50%;
    left: calc(50% + 20px);
    width: 180px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid rgba(91, 155, 213, 0.32);
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
    padding: 12px 14px;
    transform: translateY(-50%) translateX(20px);
    opacity: 0;
    animation: po-ex-bmd-audit-log-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.40s both;
}
.po-explainer-anim--bmd-audit .po-ex-bmd-audit-log-title {
    font-size: 12px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.po-explainer-anim--bmd-audit .po-ex-bmd-audit-log-title i { color: #5b9bd5; font-size: 11px; }
.po-explainer-anim--bmd-audit .po-ex-bmd-audit-log-line {
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(90deg, #e0f2fe 0%, #bae6fd 100%);
    margin-bottom: 6px;
    transform-origin: left center;
    transform: scaleX(0);
    opacity: 0;
}
.po-explainer-anim--bmd-audit .po-ex-bmd-audit-log-line-1 {
    width: 70%;
    animation: po-ex-bmd-audit-line-in 0.35s ease-out 0.95s both;
}
.po-explainer-anim--bmd-audit .po-ex-bmd-audit-log-line-2 {
    width: 90%;
    animation: po-ex-bmd-audit-line-in 0.35s ease-out 1.20s both;
}
.po-explainer-anim--bmd-audit .po-ex-bmd-audit-log-line-3 {
    width: 60%;
    animation: po-ex-bmd-audit-line-in 0.35s ease-out 1.45s both;
}
@keyframes po-ex-bmd-audit-shield-in {
    0%   { opacity: 0; transform: translateY(-50%) scale(0.5) rotate(-12deg); }
    60%  { opacity: 1; transform: translateY(-50%) scale(1.10) rotate(4deg); }
    100% { opacity: 1; transform: translateY(-50%) scale(1) rotate(0deg); }
}
@keyframes po-ex-bmd-audit-shield-pulse {
    0%, 100% { filter: drop-shadow(0 0 0 rgba(4, 120, 87, 0)); }
    50%      { filter: drop-shadow(0 0 18px rgba(4, 120, 87, 0.45)); }
}
@keyframes po-ex-bmd-audit-log-in {
    0%   { opacity: 0; transform: translateY(-50%) translateX(20px); }
    100% { opacity: 1; transform: translateY(-50%) translateX(0); }
}
@keyframes po-ex-bmd-audit-line-in {
    0%   { opacity: 0; transform: scaleX(0); }
    100% { opacity: 1; transform: scaleX(1); }
}

/* Dark-Mode fuer bmd-audit */
body.po-darkmode .po-explainer-anim--bmd-audit .po-ex-bmd-audit-log,
body.dark-mode  .po-explainer-anim--bmd-audit .po-ex-bmd-audit-log,
.dark-side      .po-explainer-anim--bmd-audit .po-ex-bmd-audit-log {
    background: linear-gradient(180deg, #1f2937 0%, #111827 100%);
    border-color: rgba(91, 155, 213, 0.45);
}
body.po-darkmode .po-explainer-anim--bmd-audit .po-ex-bmd-audit-log-title,
body.dark-mode  .po-explainer-anim--bmd-audit .po-ex-bmd-audit-log-title,
.dark-side      .po-explainer-anim--bmd-audit .po-ex-bmd-audit-log-title { color: #f3f4f6; }
body.po-darkmode .po-explainer-anim--bmd-audit .po-ex-bmd-audit-log-line,
body.dark-mode  .po-explainer-anim--bmd-audit .po-ex-bmd-audit-log-line,
.dark-side      .po-explainer-anim--bmd-audit .po-ex-bmd-audit-log-line {
    background: linear-gradient(90deg, #1e3a5f 0%, #2563eb 100%);
}
body.po-darkmode .po-explainer-anim--bmd-audit .po-ex-bmd-audit-shield,
body.dark-mode  .po-explainer-anim--bmd-audit .po-ex-bmd-audit-shield,
.dark-side      .po-explainer-anim--bmd-audit .po-ex-bmd-audit-shield { color: #34d399; }
body.po-darkmode .po-explainer-anim--bmd-audit .po-ex-bmd-audit-shield-label,
body.dark-mode  .po-explainer-anim--bmd-audit .po-ex-bmd-audit-shield-label,
.dark-side      .po-explainer-anim--bmd-audit .po-ex-bmd-audit-shield-label { color: #34d399; }

/* ── 6. BMD-TEMPLATES — Snapshot speichern und wiederladen ─────────────── */
.po-explainer-anim--bmd-templates { position: absolute; inset: 0; }
.po-explainer-anim--bmd-templates .po-ex-bmd-tpl-source {
    position: absolute;
    top: 50%;
    left: calc(50% - 130px);
    width: 110px;
    height: 90px;
    background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
    border: 1px solid rgba(91, 155, 213, 0.32);
    border-radius: 10px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.10);
    transform: translateY(-50%) scale(0.6);
    opacity: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 10px;
    animation: po-ex-bmd-tpl-source-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.10s both;
}
.po-explainer-anim--bmd-templates .po-ex-bmd-tpl-source::before {
    content: '';
    width: 60%;
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(90deg, #5B9BD5 0%, #4178BE 100%);
}
.po-explainer-anim--bmd-templates .po-ex-bmd-tpl-source::after {
    content: '';
    height: 4px;
    border-radius: 2px;
    background: #cbd5e1;
    box-shadow: 0 8px 0 #e2e8f0, 0 16px 0 #e2e8f0, 0 24px 0 #e2e8f0;
}
@keyframes po-ex-bmd-tpl-source-in {
    0%   { opacity: 0; transform: translateY(-50%) scale(0.6); }
    100% { opacity: 1; transform: translateY(-50%) scale(1); }
}
.po-explainer-anim--bmd-templates .po-ex-bmd-tpl-arrow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 64px;
    height: 22px;
    transform: translate(-50%, -50%);
    opacity: 0;
    animation: po-ex-bmd-tpl-arrow-in 0.5s ease 0.85s both;
}
.po-explainer-anim--bmd-templates .po-ex-bmd-tpl-arrow::before {
    content: '';
    position: absolute;
    inset: 9px 0;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent 0%, #10b981 100%);
}
.po-explainer-anim--bmd-templates .po-ex-bmd-tpl-arrow::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 0;
    height: 0;
    border-left: 14px solid #10b981;
    border-top: 11px solid transparent;
    border-bottom: 11px solid transparent;
}
@keyframes po-ex-bmd-tpl-arrow-in {
    0%   { opacity: 0; transform: translate(-50%, -50%) scaleX(0.2); }
    100% { opacity: 1; transform: translate(-50%, -50%) scaleX(1); }
}
.po-explainer-anim--bmd-templates .po-ex-bmd-tpl-saved {
    position: absolute;
    top: 50%;
    left: calc(50% + 36px);
    width: 110px;
    height: 90px;
    background: linear-gradient(180deg, rgba(220, 252, 231, 1) 0%, rgba(187, 247, 208, 1) 100%);
    border: 1px solid #34d399;
    border-radius: 10px;
    box-shadow: 0 10px 24px rgba(16, 185, 129, 0.36);
    transform: translateY(-50%) translateX(-12px) scale(0.4);
    opacity: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    animation: po-ex-bmd-tpl-saved-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) 1.25s both;
}
.po-explainer-anim--bmd-templates .po-ex-bmd-tpl-saved i {
    font-size: 28px;
    color: #166534;
}
.po-explainer-anim--bmd-templates .po-ex-bmd-tpl-saved span {
    font: 700 10px/1 system-ui, sans-serif;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #166534;
    max-width: 96px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@keyframes po-ex-bmd-tpl-saved-in {
    0%   { opacity: 0; transform: translateY(-50%) translateX(-30px) scale(0.4); }
    60%  { opacity: 1; transform: translateY(-50%) translateX(0) scale(1.1); }
    100% { opacity: 1; transform: translateY(-50%) translateX(0) scale(1); }
}

/* ── BMD Dark-Mode-Unterstuetzung ──────────────────────────────────────── */
body.po-darkmode .po-explainer-anim--bmd-flow .po-ex-bmd-doc,
body.dark-mode  .po-explainer-anim--bmd-flow .po-ex-bmd-doc,
.dark-side      .po-explainer-anim--bmd-flow .po-ex-bmd-doc,
body.po-darkmode .po-explainer-anim--bmd-active .po-ex-bmd-row,
body.dark-mode  .po-explainer-anim--bmd-active .po-ex-bmd-row,
.dark-side      .po-explainer-anim--bmd-active .po-ex-bmd-row,
body.po-darkmode .po-explainer-anim--bmd-conflict .po-ex-bmd-conf-doc,
body.dark-mode  .po-explainer-anim--bmd-conflict .po-ex-bmd-conf-doc,
.dark-side      .po-explainer-anim--bmd-conflict .po-ex-bmd-conf-doc,
body.po-darkmode .po-explainer-anim--bmd-billing .po-ex-bmd-bill-card,
body.dark-mode  .po-explainer-anim--bmd-billing .po-ex-bmd-bill-card,
.dark-side      .po-explainer-anim--bmd-billing .po-ex-bmd-bill-card,
body.po-darkmode .po-explainer-anim--bmd-templates .po-ex-bmd-tpl-source,
body.dark-mode  .po-explainer-anim--bmd-templates .po-ex-bmd-tpl-source,
.dark-side      .po-explainer-anim--bmd-templates .po-ex-bmd-tpl-source {
    background: linear-gradient(180deg, #2a2d35 0%, #1f2937 100%);
    border-color: rgba(122, 179, 224, 0.42);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.42);
}
body.po-darkmode .po-explainer-anim--bmd-active .po-ex-bmd-row::after,
body.dark-mode  .po-explainer-anim--bmd-active .po-ex-bmd-row::after,
.dark-side      .po-explainer-anim--bmd-active .po-ex-bmd-row::after,
body.po-darkmode .po-explainer-anim--bmd-flow .po-ex-bmd-doc::after,
body.dark-mode  .po-explainer-anim--bmd-flow .po-ex-bmd-doc::after,
.dark-side      .po-explainer-anim--bmd-flow .po-ex-bmd-doc::after,
body.po-darkmode .po-explainer-anim--bmd-templates .po-ex-bmd-tpl-source::after,
body.dark-mode  .po-explainer-anim--bmd-templates .po-ex-bmd-tpl-source::after,
.dark-side      .po-explainer-anim--bmd-templates .po-ex-bmd-tpl-source::after {
    background: #475569;
    box-shadow: 0 8px 0 #475569, 0 16px 0 #475569, 0 24px 0 #475569;
}

/* Checkbox-Background im Dark — sonst weiss auf dunkel = clash */
body.po-darkmode .po-explainer-anim--bmd-active .po-ex-bmd-cb,
body.dark-mode  .po-explainer-anim--bmd-active .po-ex-bmd-cb,
.dark-side      .po-explainer-anim--bmd-active .po-ex-bmd-cb {
    background: #1e293b;
    border-color: #475569;
}

/* Conf-Val Text-Farben im Dark — die Light-Mode-Tints sind auf dunklem Card
   schlecht lesbar, daher hellere Varianten der gleichen Hue. */
body.po-darkmode .po-explainer-anim--bmd-conflict .po-ex-bmd-conf-doc-1 .po-ex-bmd-conf-val,
body.dark-mode  .po-explainer-anim--bmd-conflict .po-ex-bmd-conf-doc-1 .po-ex-bmd-conf-val,
.dark-side      .po-explainer-anim--bmd-conflict .po-ex-bmd-conf-doc-1 .po-ex-bmd-conf-val {
    background: rgba(59, 130, 246, 0.28); color: #93c5fd;
}
body.po-darkmode .po-explainer-anim--bmd-conflict .po-ex-bmd-conf-doc-2 .po-ex-bmd-conf-val,
body.dark-mode  .po-explainer-anim--bmd-conflict .po-ex-bmd-conf-doc-2 .po-ex-bmd-conf-val,
.dark-side      .po-explainer-anim--bmd-conflict .po-ex-bmd-conf-doc-2 .po-ex-bmd-conf-val {
    background: rgba(16, 185, 129, 0.28); color: #6ee7b7;
}
body.po-darkmode .po-explainer-anim--bmd-conflict .po-ex-bmd-conf-doc-3 .po-ex-bmd-conf-val,
body.dark-mode  .po-explainer-anim--bmd-conflict .po-ex-bmd-conf-doc-3 .po-ex-bmd-conf-val,
.dark-side      .po-explainer-anim--bmd-conflict .po-ex-bmd-conf-doc-3 .po-ex-bmd-conf-val {
    background: rgba(244, 114, 182, 0.28); color: #fbcfe8;
}

/* Conf-Doc-Header (::before) — heller im Dark fuer Sichtbarkeit */
body.po-darkmode .po-explainer-anim--bmd-conflict .po-ex-bmd-conf-doc::before,
body.dark-mode  .po-explainer-anim--bmd-conflict .po-ex-bmd-conf-doc::before,
.dark-side      .po-explainer-anim--bmd-conflict .po-ex-bmd-conf-doc::before {
    background: rgba(122, 179, 224, 0.55);
}

/* ── BILLING / COCKPIT — Guthaben, Credits, Aufladung ─────────────────── */
.po-explainer-anim--billing-overview,
.po-explainer-anim--billing-wallet,
.po-explainer-anim--billing-credits,
.po-explainer-anim--billing-cycle,
.po-explainer-anim--billing-topup,
.po-explainer-anim--billing-payment-methods,
.po-explainer-anim--billing-automation,
.po-explainer-anim--billing-manual,
.po-explainer-anim--billing-safety {
    position: absolute;
    inset: 0;
}

.po-ex-bill-scene {
    position: absolute;
    inset: 0;
    overflow: hidden;
}
.po-ex-bill-scene i { line-height: 1; }
.po-ex-bill-card,
.po-ex-bill-target,
.po-ex-bill-credit-node,
.po-ex-bill-cycle-card,
.po-ex-bill-step,
.po-ex-bill-method,
.po-ex-bill-choice,
.po-ex-bill-safe-card {
    position: absolute;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid rgba(91, 155, 213, 0.30);
    border-radius: 14px;
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.10);
    color: var(--po-accent-dark, #4178BE);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font: 700 12px/1.1 system-ui, sans-serif;
    white-space: nowrap;
    opacity: 0;
    transform: scale(0.72);
    animation: po-ex-bill-pop 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.po-ex-bill-card i,
.po-ex-bill-target i,
.po-ex-bill-credit-node i,
.po-ex-bill-cycle-card i,
.po-ex-bill-step i,
.po-ex-bill-method i,
.po-ex-bill-choice i,
.po-ex-bill-safe-card i {
    font-size: 15px;
}
@keyframes po-ex-bill-pop {
    0%   { opacity: 0; transform: scale(0.72) translateY(10px); }
    70%  { opacity: 1; transform: scale(1.05) translateY(0); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* Übersicht */
.po-ex-bill-hub {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 78px;
    height: 78px;
    margin: -39px 0 0 -39px;
    border-radius: 24px;
    background: linear-gradient(135deg, var(--po-accent, #5B9BD5), var(--po-accent-dark, #4178BE));
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    box-shadow: 0 18px 36px rgba(65, 120, 190, 0.30);
    transform: scale(0.6);
    opacity: 0;
    animation: po-ex-bill-pop 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both,
               po-ex-bill-pulse 1.8s ease-in-out 0.8s infinite;
}
.po-ex-bill-card {
    width: 118px;
    height: 42px;
}
.po-ex-bill-card-usage { left: calc(50% - 210px); top: 40px; animation-delay: 0.28s; }
.po-ex-bill-card-plan { right: calc(50% - 210px); top: 40px; animation-delay: 0.42s; }
.po-ex-bill-card-balance { left: calc(50% - 210px); bottom: 40px; animation-delay: 0.56s; }
.po-ex-bill-card-credits { right: calc(50% - 210px); bottom: 40px; animation-delay: 0.70s; }
@keyframes po-ex-bill-pulse {
    0%, 100% { box-shadow: 0 18px 36px rgba(65, 120, 190, 0.30); }
    50%      { box-shadow: 0 18px 46px rgba(65, 120, 190, 0.48); }
}

/* Wallet */
.po-ex-bill-wallet {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 126px;
    height: 92px;
    margin: -46px 0 0 -63px;
    border-radius: 24px;
    background: linear-gradient(135deg, #5B9BD5, #2563eb);
    color: #ffffff;
    box-shadow: 0 18px 38px rgba(37, 99, 235, 0.28);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    opacity: 0;
    animation: po-ex-bill-pop 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
    z-index: 2;
}
.po-ex-bill-wallet i { font-size: 24px; }
.po-ex-bill-wallet strong { font-size: 28px; line-height: 1; }
.po-ex-bill-wallet span { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.po-ex-bill-target {
    width: 132px;
    height: 46px;
}
.po-ex-bill-target-plan { top: 54px; right: 74px; animation-delay: 0.55s; }
.po-ex-bill-target-addons { bottom: 54px; right: 74px; animation-delay: 0.75s; }
.po-ex-bill-flow {
    position: absolute;
    left: 50%;
    width: 120px;
    height: 2px;
    background: linear-gradient(90deg, rgba(91, 155, 213, 0.0), rgba(91, 155, 213, 0.8));
    transform-origin: left center;
    opacity: 0;
    animation: po-ex-bill-flow 0.8s ease-out both;
}
.po-ex-bill-flow::after,
.po-ex-bill-step-line::after,
.po-ex-bill-arrow::after,
.po-ex-bill-safe-line::after,
.po-ex-bill-cycle-line::after {
    content: '';
    position: absolute;
    right: -4px;
    top: -3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--po-accent, #5B9BD5);
    box-shadow: 0 0 12px rgba(91, 155, 213, 0.55);
}
.po-ex-bill-flow-1 { top: 82px; transform: rotate(-18deg); animation-delay: 0.55s; }
.po-ex-bill-flow-2 { top: 138px; transform: rotate(18deg); animation-delay: 0.75s; }
@keyframes po-ex-bill-flow {
    0%   { opacity: 0; width: 0; }
    100% { opacity: 1; width: 120px; }
}

/* Credits und Reihenfolge */
.po-ex-bill-credit-node,
.po-ex-bill-step {
    width: 128px;
    height: 54px;
}
.po-ex-bill-credit-balance,
.po-ex-bill-step-payment { left: 70px; top: 82px; animation-delay: 0.15s; }
.po-ex-bill-credit-credits,
.po-ex-bill-step-balance { left: 216px; top: 82px; animation-delay: 0.45s; }
.po-ex-bill-credit-usage,
.po-ex-bill-step-credits { left: 362px; top: 82px; animation-delay: 0.75s; }
.po-ex-bill-arrow,
.po-ex-bill-step-line {
    position: absolute;
    top: 108px;
    height: 2px;
    width: 0;
    background: linear-gradient(90deg, rgba(91, 155, 213, 0.25), rgba(91, 155, 213, 0.85));
    animation: po-ex-bill-line-draw 0.5s ease-out both;
}
.po-ex-bill-arrow-1,
.po-ex-bill-step-line-1 { left: 190px; animation-delay: 0.36s; }
.po-ex-bill-arrow-2,
.po-ex-bill-step-line-2 { left: 336px; animation-delay: 0.66s; }
@keyframes po-ex-bill-line-draw {
    0%   { width: 0; opacity: 0; }
    100% { width: 46px; opacity: 1; }
}

/* Abrechnungszyklus */
.po-ex-bill-calendar {
    position: absolute;
    top: 50%;
    left: 74px;
    width: 118px;
    height: 118px;
    margin-top: -59px;
    border-radius: 24px;
    background: linear-gradient(135deg, #5B9BD5, #2563eb);
    color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 16px 34px rgba(37, 99, 235, 0.28);
    opacity: 0;
    animation: po-ex-bill-pop 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.12s both;
}
.po-ex-bill-calendar i { font-size: 34px; }
.po-ex-bill-calendar span { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; }
.po-ex-bill-cycle-card {
    width: 142px;
    height: 50px;
    right: 96px;
}
.po-ex-bill-cycle-plan { top: 58px; animation-delay: 0.48s; }
.po-ex-bill-cycle-preview { bottom: 58px; animation-delay: 0.72s; }
.po-ex-bill-cycle-line {
    position: absolute;
    top: 109px;
    left: 205px;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, rgba(91, 155, 213, 0.25), rgba(91, 155, 213, 0.85));
    animation: po-ex-bill-cycle-line 0.7s ease-out 0.35s both;
}
@keyframes po-ex-bill-cycle-line {
    0%   { width: 0; opacity: 0; }
    100% { width: 210px; opacity: 1; }
}

/* Aufladewege */
.po-ex-bill-method {
    top: 44px;
    width: 128px;
    height: 54px;
}
.po-ex-bill-method-card { left: 70px; animation-delay: 0.16s; }
.po-ex-bill-method-transfer { left: 216px; animation-delay: 0.34s; }
.po-ex-bill-method-code { left: 362px; animation-delay: 0.52s; }
.po-ex-bill-method-wallet {
    position: absolute;
    left: 50%;
    bottom: 42px;
    width: 88px;
    height: 68px;
    margin-left: -44px;
    border-radius: 22px;
    background: linear-gradient(135deg, #10b981, #059669);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    box-shadow: 0 16px 34px rgba(16, 185, 129, 0.28);
    opacity: 0;
    animation: po-ex-bill-pop 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.88s both;
}
.po-ex-bill-method::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -42px;
    width: 2px;
    height: 36px;
    background: linear-gradient(180deg, rgba(91, 155, 213, 0.65), rgba(16, 185, 129, 0.0));
    transform-origin: top center;
    animation: po-ex-bill-method-drop 1.1s ease-in-out 0.7s infinite;
}
@keyframes po-ex-bill-method-drop {
    0%, 100% { opacity: 0.2; transform: scaleY(0.55); }
    50%      { opacity: 1; transform: scaleY(1); }
}

/* Automatik */
.po-ex-bill-meter {
    position: absolute;
    left: 78px;
    top: 80px;
    width: 170px;
    height: 54px;
    border-radius: 18px;
    background: #ffffff;
    border: 1px solid rgba(91, 155, 213, 0.30);
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.10);
    overflow: hidden;
    opacity: 0;
    animation: po-ex-bill-pop 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.12s both;
}
.po-ex-bill-meter-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 72%;
    background: linear-gradient(90deg, rgba(91, 155, 213, 0.16), rgba(91, 155, 213, 0.42));
    animation: po-ex-bill-meter-fall 2.1s ease-in-out 0.8s infinite;
}
.po-ex-bill-meter b {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1f2937;
    font-size: 12px;
    z-index: 2;
}
.po-ex-bill-auto-bolt {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 62px;
    height: 62px;
    margin: -31px 0 0 -31px;
    border-radius: 22px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    opacity: 0;
    animation: po-ex-bill-bolt 1.4s ease-in-out 0.75s infinite;
}
.po-ex-bill-auto-target {
    position: absolute;
    right: 78px;
    top: 70px;
    width: 140px;
    height: 76px;
    border-radius: 20px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid rgba(16, 185, 129, 0.34);
    color: #047857;
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.10);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    opacity: 0;
    animation: po-ex-bill-pop 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.92s both;
}
.po-ex-bill-auto-target em { font-style: normal; font-size: 10px; opacity: 0.75; }
@keyframes po-ex-bill-meter-fall {
    0%, 100% { width: 72%; }
    50%      { width: 28%; }
}
@keyframes po-ex-bill-bolt {
    0%, 100% { opacity: 0.72; transform: scale(0.92); }
    50%      { opacity: 1; transform: scale(1.08); }
}

/* Manuell vs. automatisch */
.po-ex-bill-choice {
    top: 64px;
    width: 150px;
    height: 64px;
}
.po-ex-bill-choice-manual { left: 110px; animation-delay: 0.16s; }
.po-ex-bill-choice-auto { right: 110px; color: #047857; border-color: rgba(16, 185, 129, 0.34); animation-delay: 0.36s; }
.po-ex-bill-warning {
    position: absolute;
    left: 50%;
    bottom: 38px;
    width: 220px;
    height: 42px;
    margin-left: -110px;
    border-radius: 999px;
    background: rgba(245, 158, 11, 0.10);
    border: 1px solid rgba(245, 158, 11, 0.28);
    color: #92400e;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font: 700 12px/1 system-ui, sans-serif;
    opacity: 0;
    animation: po-ex-bill-pop 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.72s both;
}

/* Sicherheit */
.po-ex-bill-safe-card {
    top: 80px;
    width: 132px;
    height: 60px;
}
.po-ex-bill-safe-tax { left: 78px; animation-delay: 0.16s; }
.po-ex-bill-safe-invoice { left: 214px; animation-delay: 0.40s; }
.po-ex-bill-safe-audit { left: 350px; color: #047857; border-color: rgba(16, 185, 129, 0.34); animation-delay: 0.64s; }
.po-ex-bill-safe-line {
    position: absolute;
    top: 110px;
    height: 2px;
    width: 0;
    background: linear-gradient(90deg, rgba(91, 155, 213, 0.25), rgba(16, 185, 129, 0.80));
    animation: po-ex-bill-line-draw 0.48s ease-out both;
}
.po-ex-bill-safe-line-1 { left: 204px; animation-delay: 0.32s; }
.po-ex-bill-safe-line-2 { left: 340px; animation-delay: 0.56s; }

/* Dark-Mode fuer Cockpit-Billing-Animationen */
body.po-darkmode .po-ex-bill-card,
body.po-darkmode .po-ex-bill-target,
body.po-darkmode .po-ex-bill-credit-node,
body.po-darkmode .po-ex-bill-cycle-card,
body.po-darkmode .po-ex-bill-step,
body.po-darkmode .po-ex-bill-method,
body.po-darkmode .po-ex-bill-choice,
body.po-darkmode .po-ex-bill-safe-card,
body.po-darkmode .po-ex-bill-meter,
body.po-darkmode .po-ex-bill-auto-target,
body.dark-mode .po-ex-bill-card,
body.dark-mode .po-ex-bill-target,
body.dark-mode .po-ex-bill-credit-node,
body.dark-mode .po-ex-bill-cycle-card,
body.dark-mode .po-ex-bill-step,
body.dark-mode .po-ex-bill-method,
body.dark-mode .po-ex-bill-choice,
body.dark-mode .po-ex-bill-safe-card,
body.dark-mode .po-ex-bill-meter,
body.dark-mode .po-ex-bill-auto-target,
.dark-side .po-ex-bill-card,
.dark-side .po-ex-bill-target,
.dark-side .po-ex-bill-credit-node,
.dark-side .po-ex-bill-cycle-card,
.dark-side .po-ex-bill-step,
.dark-side .po-ex-bill-method,
.dark-side .po-ex-bill-choice,
.dark-side .po-ex-bill-safe-card,
.dark-side .po-ex-bill-meter,
.dark-side .po-ex-bill-auto-target {
    background: linear-gradient(180deg, #1f2937 0%, #111827 100%);
    border-color: rgba(91, 155, 213, 0.45);
    color: #93c5fd;
}
body.po-darkmode .po-ex-bill-meter b,
body.dark-mode .po-ex-bill-meter b,
.dark-side .po-ex-bill-meter b {
    color: #e5e7eb;
}

/* ============================================================================
   API-USAGE EXPLAINER-ANIMATIONEN
   Zentrale Animationen für das Live-Dashboard, Credits, Filter und Audit-Log.
   ============================================================================ */
.po-explainer-anim--api-usage-live,
.po-explainer-anim--api-usage-credits,
.po-explainer-anim--api-usage-filter,
.po-explainer-anim--api-usage-audit {
    position: absolute;
    inset: 0;
}
.po-ex-api-live-card,
.po-ex-api-credit-node,
.po-ex-api-filter-select,
.po-ex-api-filter-token,
.po-ex-api-audit-table,
.po-ex-api-credit-total {
    position: absolute;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid rgba(91, 155, 213, 0.26);
    border-radius: 16px;
    box-shadow: 0 16px 34px rgba(91, 155, 213, 0.14);
    color: #1e293b;
}
.po-ex-api-live-card {
    top: 22px;
    width: 142px;
    height: 70px;
    display: grid;
    grid-template-columns: 34px 1fr;
    grid-template-rows: 1fr 1fr;
    align-items: center;
    column-gap: 10px;
    padding: 12px;
    opacity: 0;
    animation: po-ex-api-card-in 0.52s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.po-ex-api-live-card i {
    grid-row: 1 / 3;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(91, 155, 213, 0.12);
    color: #4178be;
}
.po-ex-api-live-card strong { font-size: 18px; line-height: 1; }
.po-ex-api-live-card span { font-size: 11px; color: #64748b; }
.po-ex-api-live-card--requests { left: 64px; animation-delay: 0.12s; }
.po-ex-api-live-card--credits { right: 64px; animation-delay: 0.24s; }
.po-ex-api-live-chart {
    position: absolute;
    left: 74px;
    right: 74px;
    bottom: 30px;
    height: 84px;
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(91, 155, 213, 0.08) 0%, rgba(91, 155, 213, 0.02) 100%),
        repeating-linear-gradient(0deg, rgba(148, 163, 184, 0.18) 0 1px, transparent 1px 22px);
    overflow: hidden;
    opacity: 0;
    animation: po-ex-api-fade-up 0.48s ease-out 0.34s forwards;
}
.po-ex-api-live-line {
    position: absolute;
    left: 18px;
    right: 18px;
    height: 48px;
    border-radius: 50%;
    border-top: 3px solid #4178be;
    transform: skewX(-18deg);
}
.po-ex-api-live-line-1 { top: 28px; border-color: #4178be; }
.po-ex-api-live-line-2 { top: 44px; border-color: #f59e0b; opacity: 0.75; }
.po-ex-api-live-dot {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.34);
    animation: po-ex-api-dot-run 2.2s ease-in-out infinite, po-ex-api-dot-pulse 1.4s ease-in-out infinite;
}
.po-ex-api-live-dot-1 { left: 22%; top: 42px; animation-delay: 0.70s, 0.70s; }
.po-ex-api-live-dot-2 { left: 52%; top: 24px; animation-delay: 0.92s, 0.92s; }
.po-ex-api-live-dot-3 { left: 78%; top: 34px; animation-delay: 1.14s, 1.14s; }
.po-ex-api-live-badge {
    position: absolute;
    right: 82px;
    bottom: 126px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(16, 185, 129, 0.10);
    color: #047857;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0;
    animation: po-ex-api-card-in 0.45s ease 0.78s forwards;
}
.po-ex-api-live-badge i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.14);
}
.po-ex-api-credit-node {
    top: 74px;
    width: 112px;
    height: 76px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    opacity: 0;
    animation: po-ex-api-card-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.po-ex-api-credit-node i {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(91, 155, 213, 0.12);
    color: #4178be;
}
.po-ex-api-credit-node--request { left: 88px; animation-delay: 0.12s; }
.po-ex-api-credit-node--meter { left: 224px; animation-delay: 0.34s; }
.po-ex-api-credit-node--cost { left: 360px; animation-delay: 0.56s; }
.po-ex-api-credit-flow {
    position: absolute;
    top: 111px;
    width: 0;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(91, 155, 213, 0.20), rgba(91, 155, 213, 0.90));
    animation: po-ex-api-flow-draw 0.44s ease-out forwards;
}
.po-ex-api-credit-flow-1 { left: 200px; animation-delay: 0.28s; }
.po-ex-api-credit-flow-2 { left: 336px; animation-delay: 0.50s; }
.po-ex-api-credit-total {
    left: 210px;
    bottom: 24px;
    width: 142px;
    height: 54px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    animation: po-ex-api-fade-up 0.42s ease 0.78s forwards;
}
.po-ex-api-credit-total strong { color: #4178be; font-size: 20px; line-height: 1; }
.po-ex-api-credit-total small { color: #64748b; font-size: 11px; margin-top: 4px; }
.po-ex-api-filter-select {
    top: 28px;
    left: 82px;
    right: 82px;
    height: 52px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 18px;
    opacity: 0;
    animation: po-ex-api-fade-up 0.42s ease-out 0.12s forwards;
}
.po-ex-api-filter-select i { color: #4178be; }
.po-ex-api-filter-select span { font-size: 13px; font-weight: 700; }
.po-ex-api-filter-select b {
    margin-left: auto;
    width: 9px;
    height: 9px;
    border-right: 2px solid #64748b;
    border-bottom: 2px solid #64748b;
    transform: rotate(45deg) translateY(-3px);
}
.po-ex-api-filter-token {
    left: 112px;
    width: 336px;
    height: 34px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 13px;
    font-size: 12px;
    font-weight: 700;
    opacity: 0;
    transform: translateY(-8px);
    animation: po-ex-api-filter-row 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.po-ex-api-filter-token i { color: #4178be; width: 16px; text-align: center; }
.po-ex-api-filter-token-1 { top: 96px; animation-delay: 0.35s; }
.po-ex-api-filter-token-2 { top: 138px; animation-delay: 0.52s; }
.po-ex-api-filter-token-3 { top: 180px; animation-delay: 0.69s; }
.po-ex-api-filter-sort {
    position: absolute;
    right: 86px;
    bottom: 24px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(91, 155, 213, 0.10);
    color: #4178be;
    font-size: 12px;
    font-weight: 800;
    opacity: 0;
    animation: po-ex-api-card-in 0.38s ease 0.9s forwards;
}
.po-ex-api-audit-table {
    left: 64px;
    right: 64px;
    top: 30px;
    bottom: 34px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    overflow: hidden;
    opacity: 0;
    animation: po-ex-api-fade-up 0.45s ease-out 0.12s forwards;
}
.po-ex-api-audit-row {
    display: grid;
    grid-template-columns: 74px 1fr 70px;
    align-items: center;
    gap: 10px;
    min-height: 32px;
    padding: 0 12px;
    border-radius: 10px;
    background: rgba(91, 155, 213, 0.06);
    color: #334155;
    font-size: 11px;
    opacity: 0;
    transform: translateX(-16px);
    animation: po-ex-api-audit-row-in 0.42s ease-out forwards;
}
.po-ex-api-audit-head {
    background: rgba(15, 23, 42, 0.06);
    color: #64748b;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 1;
    transform: none;
    animation: none;
}
.po-ex-api-audit-row i { color: #4178be; }
.po-ex-api-audit-row em { font-style: normal; font-weight: 700; }
.po-ex-api-audit-row small { justify-self: end; color: #047857; font-weight: 800; }
.po-ex-api-audit-row-1 { animation-delay: 0.38s; }
.po-ex-api-audit-row-2 { animation-delay: 0.58s; }
.po-ex-api-audit-row-3 { animation-delay: 0.78s; }
.po-ex-api-audit-pulse {
    position: absolute;
    right: 78px;
    top: 45px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #10b981;
    animation: po-ex-api-dot-pulse 1.5s ease-in-out 0.9s infinite;
}
body.po-darkmode .po-ex-api-live-card,
body.po-darkmode .po-ex-api-credit-node,
body.po-darkmode .po-ex-api-filter-select,
body.po-darkmode .po-ex-api-filter-token,
body.po-darkmode .po-ex-api-audit-table,
body.po-darkmode .po-ex-api-credit-total,
body.dark-mode .po-ex-api-live-card,
body.dark-mode .po-ex-api-credit-node,
body.dark-mode .po-ex-api-filter-select,
body.dark-mode .po-ex-api-filter-token,
body.dark-mode .po-ex-api-audit-table,
body.dark-mode .po-ex-api-credit-total,
.dark-side .po-ex-api-live-card,
.dark-side .po-ex-api-credit-node,
.dark-side .po-ex-api-filter-select,
.dark-side .po-ex-api-filter-token,
.dark-side .po-ex-api-audit-table,
.dark-side .po-ex-api-credit-total {
    background: linear-gradient(180deg, #1f2937 0%, #111827 100%);
    border-color: rgba(91, 155, 213, 0.45);
    color: #e5e7eb;
}
body.po-darkmode .po-ex-api-audit-row,
body.dark-mode .po-ex-api-audit-row,
.dark-side .po-ex-api-audit-row {
    background: rgba(91, 155, 213, 0.14);
    color: #dbeafe;
}
@keyframes po-ex-api-card-in {
    0% { opacity: 0; transform: translateY(12px) scale(0.94); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes po-ex-api-fade-up {
    0% { opacity: 0; transform: translateY(14px); }
    100% { opacity: 1; transform: translateY(0); }
}
@keyframes po-ex-api-dot-run {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-7px); }
}
@keyframes po-ex-api-dot-pulse {
    0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.35); }
    70% { box-shadow: 0 0 0 12px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}
@keyframes po-ex-api-flow-draw {
    0% { width: 0; opacity: 0; }
    100% { width: 48px; opacity: 1; }
}
@keyframes po-ex-api-filter-row {
    0% { opacity: 0; transform: translateY(-8px); }
    100% { opacity: 1; transform: translateY(0); }
}
@keyframes po-ex-api-audit-row-in {
    0% { opacity: 0; transform: translateX(-16px); }
    100% { opacity: 1; transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
    .po-explainer-anim--api-usage-live *,
    .po-explainer-anim--api-usage-credits *,
    .po-explainer-anim--api-usage-filter *,
    .po-explainer-anim--api-usage-audit * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* ============================================================================
   API-QUEUE EXPLAINER-ANIMATIONEN
   Zentrale Animationen für Queue-Fluss, Status-Signale, Filter und Details.
   ============================================================================ */
.po-explainer-anim--api-queue-flow,
.po-explainer-anim--api-queue-signals,
.po-explainer-anim--api-queue-filters,
.po-explainer-anim--api-queue-details {
    position: absolute;
    inset: 0;
}
.po-ex-queue-node,
.po-ex-queue-signal,
.po-ex-queue-filterbar,
.po-ex-queue-filter-results,
.po-ex-queue-detail-card {
    position: absolute;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid rgba(91, 155, 213, 0.28);
    border-radius: 16px;
    box-shadow: 0 16px 34px rgba(91, 155, 213, 0.14);
    color: #1e293b;
}
.po-ex-queue-node {
    top: 78px;
    width: 118px;
    height: 82px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 800;
    opacity: 0;
    animation: po-ex-queue-card-in 0.48s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.po-ex-queue-node i {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(91, 155, 213, 0.12);
    color: #4178be;
}
.po-ex-queue-node--queued { left: 74px; animation-delay: 0.10s; }
.po-ex-queue-node--worker { left: 222px; animation-delay: 0.30s; }
.po-ex-queue-node--done { left: 370px; animation-delay: 0.50s; }
.po-ex-queue-flow-line {
    position: absolute;
    top: 118px;
    width: 0;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(91, 155, 213, 0.18), rgba(91, 155, 213, 0.92));
    animation: po-ex-queue-flow-draw 0.46s ease-out forwards;
}
.po-ex-queue-flow-line-1 { left: 192px; animation-delay: 0.24s; }
.po-ex-queue-flow-line-2 { left: 340px; animation-delay: 0.44s; }
.po-ex-queue-packet {
    position: absolute;
    top: 111px;
    width: 16px;
    height: 16px;
    border-radius: 6px;
    background: linear-gradient(135deg, #5b9bd5, #10b981);
    box-shadow: 0 0 0 0 rgba(91, 155, 213, 0.28);
    animation: po-ex-queue-packet-run 2.2s ease-in-out infinite, po-ex-queue-pulse 1.8s ease-in-out infinite;
}
.po-ex-queue-packet-1 { left: 188px; animation-delay: 0.74s, 0.74s; }
.po-ex-queue-packet-2 { left: 336px; animation-delay: 1.08s, 1.08s; }
.po-ex-queue-signal {
    width: 205px;
    height: 58px;
    display: grid;
    grid-template-columns: 34px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    opacity: 0;
    animation: po-ex-queue-row-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.po-ex-queue-signal i {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}
.po-ex-queue-signal span { font-size: 12px; font-weight: 800; }
.po-ex-queue-signal b { font-size: 18px; }
.po-ex-queue-signal--queued { left: 62px; top: 42px; animation-delay: 0.10s; }
.po-ex-queue-signal--processing { right: 62px; top: 42px; animation-delay: 0.24s; }
.po-ex-queue-signal--failed { left: 62px; top: 126px; animation-delay: 0.38s; }
.po-ex-queue-signal--orphaned { right: 62px; top: 126px; animation-delay: 0.52s; }
.po-ex-queue-signal--queued i { background: rgba(245, 158, 11, 0.12); color: #b45309; }
.po-ex-queue-signal--processing i { background: rgba(91, 155, 213, 0.13); color: #4178be; }
.po-ex-queue-signal--failed i { background: rgba(239, 68, 68, 0.12); color: #dc2626; }
.po-ex-queue-signal--orphaned i { background: rgba(147, 51, 234, 0.12); color: #7e22ce; }
.po-ex-queue-filterbar {
    top: 28px;
    left: 66px;
    right: 66px;
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 12px;
    opacity: 0;
    animation: po-ex-queue-card-in 0.44s ease-out 0.10s forwards;
}
.po-ex-queue-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(91, 155, 213, 0.10);
    color: #4178be;
    font-size: 12px;
    font-weight: 800;
    opacity: 0;
    animation: po-ex-queue-chip-pop 0.38s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.po-ex-queue-filter-chip-1 { animation-delay: 0.30s; }
.po-ex-queue-filter-chip-2 { animation-delay: 0.44s; }
.po-ex-queue-filter-chip-3 { animation-delay: 0.58s; }
.po-ex-queue-filter-results {
    left: 94px;
    right: 94px;
    bottom: 34px;
    min-height: 108px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    opacity: 0;
    animation: po-ex-queue-card-in 0.42s ease-out 0.72s forwards;
}
.po-ex-queue-filter-results span {
    height: 20px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(91, 155, 213, 0.18), rgba(91, 155, 213, 0.06));
}
.po-ex-queue-filter-results span:nth-child(2) { width: 82%; }
.po-ex-queue-filter-results span:nth-child(3) { width: 64%; }
.po-ex-queue-filter-focus {
    position: absolute;
    right: 108px;
    bottom: 52px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #10b981;
    animation: po-ex-queue-pulse 1.5s ease-in-out 1.0s infinite;
}
.po-ex-queue-detail-card {
    left: 82px;
    right: 82px;
    top: 32px;
    bottom: 34px;
    display: flex;
    flex-direction: column;
    gap: 11px;
    padding: 18px;
    overflow: hidden;
    opacity: 0;
    animation: po-ex-queue-card-in 0.46s ease-out 0.10s forwards;
}
.po-ex-queue-detail-head {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #4178be;
    font-weight: 900;
    margin-bottom: 2px;
}
.po-ex-queue-detail-card span {
    display: grid;
    grid-template-columns: 86px 1fr;
    align-items: center;
    gap: 12px;
    min-height: 32px;
    padding: 0 12px;
    border-radius: 10px;
    background: rgba(91, 155, 213, 0.07);
    opacity: 0;
    transform: translateX(-14px);
    animation: po-ex-queue-detail-line 0.42s ease-out forwards;
}
.po-ex-queue-detail-card span:nth-child(2) { animation-delay: 0.34s; }
.po-ex-queue-detail-card span:nth-child(3) { animation-delay: 0.50s; }
.po-ex-queue-detail-card span:nth-child(4) { animation-delay: 0.66s; }
.po-ex-queue-detail-card b {
    color: #64748b;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.po-ex-queue-detail-card em {
    color: #1e293b;
    font-style: normal;
    font-size: 12px;
    font-weight: 800;
}
.po-ex-queue-detail-glow {
    position: absolute;
    right: 78px;
    top: 44px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #10b981;
    animation: po-ex-queue-pulse 1.5s ease-in-out 0.82s infinite;
}
body.po-darkmode .po-ex-queue-node,
body.po-darkmode .po-ex-queue-signal,
body.po-darkmode .po-ex-queue-filterbar,
body.po-darkmode .po-ex-queue-filter-results,
body.po-darkmode .po-ex-queue-detail-card,
body.dark-mode .po-ex-queue-node,
body.dark-mode .po-ex-queue-signal,
body.dark-mode .po-ex-queue-filterbar,
body.dark-mode .po-ex-queue-filter-results,
body.dark-mode .po-ex-queue-detail-card,
.dark-side .po-ex-queue-node,
.dark-side .po-ex-queue-signal,
.dark-side .po-ex-queue-filterbar,
.dark-side .po-ex-queue-filter-results,
.dark-side .po-ex-queue-detail-card {
    background: linear-gradient(180deg, #1f2937 0%, #111827 100%);
    border-color: rgba(91, 155, 213, 0.45);
    color: #e5e7eb;
}
body.po-darkmode .po-ex-queue-detail-card em,
body.dark-mode .po-ex-queue-detail-card em,
.dark-side .po-ex-queue-detail-card em {
    color: #e5e7eb;
}
body.po-darkmode .po-ex-queue-detail-card span,
body.dark-mode .po-ex-queue-detail-card span,
.dark-side .po-ex-queue-detail-card span {
    background: rgba(91, 155, 213, 0.14);
}
@keyframes po-ex-queue-card-in {
    0% { opacity: 0; transform: translateY(14px) scale(0.95); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes po-ex-queue-row-in {
    0% { opacity: 0; transform: translateY(16px); }
    100% { opacity: 1; transform: translateY(0); }
}
@keyframes po-ex-queue-flow-draw {
    0% { width: 0; opacity: 0; }
    100% { width: 30px; opacity: 1; }
}
@keyframes po-ex-queue-packet-run {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(34px); }
}
@keyframes po-ex-queue-pulse {
    0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.35); }
    70% { box-shadow: 0 0 0 12px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}
@keyframes po-ex-queue-chip-pop {
    0% { opacity: 0; transform: translateY(-8px) scale(0.94); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes po-ex-queue-detail-line {
    0% { opacity: 0; transform: translateX(-14px); }
    100% { opacity: 1; transform: translateX(0); }
}
@media (max-width: 640px) {
    .po-ex-queue-node--queued { left: 42px; }
    .po-ex-queue-node--worker { left: calc(50% - 59px); }
    .po-ex-queue-node--done { left: auto; right: 42px; }
    .po-ex-queue-flow-line-1 { left: 154px; }
    .po-ex-queue-flow-line-2 { left: auto; right: 154px; }
    .po-ex-queue-signal { width: calc(50% - 56px); }
    .po-ex-queue-signal--queued,
    .po-ex-queue-signal--failed { left: 38px; }
    .po-ex-queue-signal--processing,
    .po-ex-queue-signal--orphaned { right: 38px; }
}
@media (prefers-reduced-motion: reduce) {
    .po-explainer-anim--api-queue-flow *,
    .po-explainer-anim--api-queue-signals *,
    .po-explainer-anim--api-queue-filters *,
    .po-explainer-anim--api-queue-details * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   EXPORT-DIALOG ANIMATIONEN — 2026-05-01
   ═══════════════════════════════════════════════════════════════════════
   4 thematische Hollywood-Animationen fuer den Documents-Export-Onboarding-
   Explainer. Alle haben sichtbaren End-State (kein dauerhaftes opacity:0),
   nutzen Design-Tokens fuer Dark-Mode, und respektieren prefers-reduced-motion.

   .po-explainer-anim--export-flow     -> 4 Docs fanen aus, Bundle materialisiert
   .po-explainer-anim--export-modes    -> 4 farbige Mode-Cards stagger-in
   .po-explainer-anim--export-fields   -> Verfuegbar -> Ausgewaehlt mit Pills
   .po-explainer-anim--export-package  -> ZIP + 3 Asset-Tags fliegen rein
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. EXPORT-FLOW — Docs werden zu einem Bundle ──────────────────────── */
.po-explainer-anim--export-flow { position: absolute; inset: 0; }
.po-explainer-anim--export-flow .po-ex-exp-doc {
    position: absolute;
    /* FIX 01.05.2026 (DC7): left: 50% war hier vergessen — die @keyframes-
       Translation berechnet `calc(-50% + var(--po-doc-x))` ausgehend von
       50% Container-Mitte. Ohne left:50% startet die Box bei left:auto
       (==left:0) und alle 4 Docs landeten ausserhalb des linken
       Container-Rands (Live-Test bestaetigt: x = -202px). */
    top: 50%;
    left: 50%;
    width: 38px;
    height: 50px;
    background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
    border: 1px solid rgba(91, 155, 213, 0.42);
    border-radius: 5px;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.10);
    transform: translate(-50%, -50%) scale(0.4);
    opacity: 0;
    animation: po-ex-exp-doc-fan 1.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.po-explainer-anim--export-flow .po-ex-exp-doc::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 6px;
    right: 6px;
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(90deg, #5B9BD5 0%, #4178BE 100%);
}
.po-explainer-anim--export-flow .po-ex-exp-doc::after {
    content: '';
    position: absolute;
    top: 18px;
    left: 6px;
    right: 6px;
    height: 3px;
    border-radius: 2px;
    background: #cbd5e1;
    box-shadow: 0 6px 0 #e2e8f0, 0 12px 0 #e2e8f0, 0 18px 0 #e2e8f0;
}
.po-explainer-anim--export-flow .po-ex-exp-doc-1 { animation-delay: 0.05s; --po-doc-x: -180px; --po-doc-y: -30px; --po-doc-rot: -8deg; }
.po-explainer-anim--export-flow .po-ex-exp-doc-2 { animation-delay: 0.18s; --po-doc-x: -120px; --po-doc-y:  35px; --po-doc-rot: -3deg; }
.po-explainer-anim--export-flow .po-ex-exp-doc-3 { animation-delay: 0.31s; --po-doc-x: -180px; --po-doc-y:  35px; --po-doc-rot:  4deg; }
.po-explainer-anim--export-flow .po-ex-exp-doc-4 { animation-delay: 0.44s; --po-doc-x: -120px; --po-doc-y: -30px; --po-doc-rot:  9deg; }
@keyframes po-ex-exp-doc-fan {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.4) rotate(0);
    }
    55% {
        opacity: 1;
        transform: translate(calc(-50% + var(--po-doc-x)), calc(-50% + var(--po-doc-y))) scale(1.05) rotate(var(--po-doc-rot));
    }
    100% {
        opacity: 1;
        transform: translate(calc(-50% + var(--po-doc-x)), calc(-50% + var(--po-doc-y))) scale(1) rotate(var(--po-doc-rot));
    }
}
.po-explainer-anim--export-flow .po-ex-exp-bundle {
    position: absolute;
    top: 50%;
    left: calc(50% + 80px);
    width: 130px;
    height: 110px;
    background: linear-gradient(135deg, #5B9BD5 0%, #4178BE 100%);
    border-radius: 14px;
    box-shadow: 0 14px 32px rgba(91, 155, 213, 0.42);
    transform: translateY(-50%) scale(0.4);
    opacity: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #ffffff;
    animation: po-ex-exp-bundle-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.7s both;
}
.po-explainer-anim--export-flow .po-ex-exp-bundle i {
    font-size: 38px;
    line-height: 1;
}
.po-explainer-anim--export-flow .po-ex-exp-bundle span {
    font: 700 11px/1 system-ui, sans-serif;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    text-align: center;
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@keyframes po-ex-exp-bundle-in {
    0%   { opacity: 0; transform: translateY(-50%) scale(0.4) rotate(-6deg); }
    60%  { opacity: 1; transform: translateY(-50%) scale(1.08) rotate(2deg); }
    100% { opacity: 1; transform: translateY(-50%) scale(1) rotate(0); }
}
.po-explainer-anim--export-flow .po-ex-exp-flow-pulse {
    position: absolute;
    top: 50%;
    left: calc(50% + 145px);
    width: 130px;
    height: 110px;
    border-radius: 14px;
    transform: translateY(-50%) scale(0.4);
    opacity: 0;
    border: 2px solid rgba(91, 155, 213, 0.55);
    animation: po-ex-exp-flow-pulse 1.6s ease-out 1.4s infinite both;
    pointer-events: none;
}
@keyframes po-ex-exp-flow-pulse {
    0%   { opacity: 0.6; transform: translateY(-50%) scale(0.85); }
    100% { opacity: 0;   transform: translateY(-50%) scale(1.45); }
}

/* ── 2. EXPORT-MODES — 4 farbige Mode-Cards ────────────────────────────── */
.po-explainer-anim--export-modes { position: absolute; inset: 0; }
.po-explainer-anim--export-modes .po-ex-exp-mode {
    position: absolute;
    top: 50%;
    width: 110px;
    height: 100px;
    border-radius: 12px;
    background: var(--po-bg-elevated, #ffffff);
    border: 1px solid rgba(91, 155, 213, 0.22);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.10);
    transform: translateY(-50%) scale(0.4);
    opacity: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px;
    animation: po-ex-exp-mode-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.po-explainer-anim--export-modes .po-ex-exp-mode i {
    font-size: 22px;
    line-height: 1;
}
.po-explainer-anim--export-modes .po-ex-exp-mode span {
    font: 700 10px/1.2 system-ui, sans-serif;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: center;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.po-explainer-anim--export-modes .po-ex-exp-mode-1 { left: calc(50% - 230px); animation-delay: 0.10s; background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%); }
.po-explainer-anim--export-modes .po-ex-exp-mode-1 i { color: #1e40af; }
.po-explainer-anim--export-modes .po-ex-exp-mode-2 { left: calc(50% - 116px); animation-delay: 0.22s; background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); }
.po-explainer-anim--export-modes .po-ex-exp-mode-2 i { color: #92400e; }
.po-explainer-anim--export-modes .po-ex-exp-mode-3 { left: calc(50% +   4px); animation-delay: 0.34s; background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%); }
.po-explainer-anim--export-modes .po-ex-exp-mode-3 i { color: #166534; }
.po-explainer-anim--export-modes .po-ex-exp-mode-4 { left: calc(50% + 122px); animation-delay: 0.46s; background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%); }
.po-explainer-anim--export-modes .po-ex-exp-mode-4 i { color: #5b21b6; }
@keyframes po-ex-exp-mode-in {
    0%   { opacity: 0; transform: translateY(-50%) translateY(20px) scale(0.4); }
    60%  { opacity: 1; transform: translateY(-50%) translateY(-4px) scale(1.05); }
    100% { opacity: 1; transform: translateY(-50%) translateY(0) scale(1); }
}

/* ── 3. EXPORT-FIELDS — Verfuegbar -> Ausgewaehlt mit fliegenden Pills ── */
.po-explainer-anim--export-fields { position: absolute; inset: 0; }
.po-explainer-anim--export-fields .po-ex-exp-list {
    position: absolute;
    top: 50%;
    width: 130px;
    height: 130px;
    background: var(--po-bg-elevated, #ffffff);
    border: 1px solid rgba(91, 155, 213, 0.32);
    border-radius: 10px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.10);
    padding: 30px 10px 12px 10px;
    transform: translateY(-50%) scale(0.6);
    opacity: 0;
    animation: po-ex-exp-list-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.po-explainer-anim--export-fields .po-ex-exp-list-left  { left: calc(50% - 200px); animation-delay: 0.10s; }
.po-explainer-anim--export-fields .po-ex-exp-list-right { left: calc(50% +  70px); animation-delay: 0.22s; }
.po-explainer-anim--export-fields .po-ex-exp-list-title {
    position: absolute;
    top: 8px;
    left: 10px;
    right: 10px;
    font: 700 10px/1 system-ui, sans-serif;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--po-text-muted, #64748b);
    display: flex;
    align-items: center;
    gap: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.po-explainer-anim--export-fields .po-ex-exp-list-title i {
    font-size: 11px;
    color: #5B9BD5;
}
.po-explainer-anim--export-fields .po-ex-exp-list-right .po-ex-exp-list-title i { color: #10b981; }
.po-explainer-anim--export-fields .po-ex-exp-list-row {
    height: 12px;
    margin-bottom: 6px;
    border-radius: 3px;
    background: linear-gradient(90deg, #e2e8f0 0%, #f1f5f9 100%);
}
.po-explainer-anim--export-fields .po-ex-exp-list-row.is-active {
    background: linear-gradient(90deg, #d1fae5 0%, #a7f3d0 100%);
}
@keyframes po-ex-exp-list-in {
    0%   { opacity: 0; transform: translateY(-50%) scale(0.6); }
    100% { opacity: 1; transform: translateY(-50%) scale(1); }
}
.po-explainer-anim--export-fields .po-ex-exp-arrow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60px;
    height: 22px;
    transform: translate(-50%, -50%);
    opacity: 0;
    animation: po-ex-exp-arrow-in 0.5s ease 0.85s both;
}
.po-explainer-anim--export-fields .po-ex-exp-arrow::before {
    content: '';
    position: absolute;
    inset: 9px 0;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent 0%, #10b981 100%);
}
.po-explainer-anim--export-fields .po-ex-exp-arrow::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 0;
    height: 0;
    border-left: 14px solid #10b981;
    border-top: 11px solid transparent;
    border-bottom: 11px solid transparent;
}
@keyframes po-ex-exp-arrow-in {
    0%   { opacity: 0; transform: translate(-50%, -50%) scaleX(0.2); }
    100% { opacity: 1; transform: translate(-50%, -50%) scaleX(1); }
}
.po-explainer-anim--export-fields .po-ex-exp-pill {
    position: absolute;
    top: 50%;
    left: calc(50% - 135px);
    padding: 5px 11px 5px 9px;
    background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%);
    border: 1px solid rgba(16, 185, 129, 0.55);
    border-radius: 999px;
    font: 700 10px/1 system-ui, sans-serif;
    color: #166534;
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.12);
    transform: translate(0, -50%);
    opacity: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    animation: po-ex-exp-pill-fly 1.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.po-explainer-anim--export-fields .po-ex-exp-pill i { font-size: 9px; color: #10b981; }
.po-explainer-anim--export-fields .po-ex-exp-pill-1 { animation-delay: 1.10s; --po-pill-y: -28px; }
.po-explainer-anim--export-fields .po-ex-exp-pill-2 { animation-delay: 1.40s; --po-pill-y:   2px; }
.po-explainer-anim--export-fields .po-ex-exp-pill-3 { animation-delay: 1.70s; --po-pill-y:  32px; }
@keyframes po-ex-exp-pill-fly {
    0%   { opacity: 0; transform: translate(0, calc(-50% + var(--po-pill-y, 0))) scale(0.6); }
    20%  { opacity: 1; transform: translate(0, calc(-50% + var(--po-pill-y, 0))) scale(1); }
    65%  { opacity: 1; transform: translate(270px, calc(-50% + var(--po-pill-y, 0))) scale(1); }
    100% { opacity: 1; transform: translate(270px, calc(-50% + var(--po-pill-y, 0))) scale(1); }
}

/* ── 4. EXPORT-PACKAGE — ZIP-Box mit fliegenden Asset-Tags ─────────────── */
.po-explainer-anim--export-package { position: absolute; inset: 0; }
.po-explainer-anim--export-package .po-ex-exp-pkg-box {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 130px;
    height: 130px;
    background: linear-gradient(135deg, #5B9BD5 0%, #4178BE 100%);
    border-radius: 16px;
    box-shadow: 0 16px 36px rgba(91, 155, 213, 0.42);
    transform: translate(-50%, -50%) scale(0.4) rotate(-4deg);
    opacity: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #ffffff;
    animation: po-ex-exp-pkg-box-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.10s both;
}
.po-explainer-anim--export-package .po-ex-exp-pkg-box i {
    font-size: 44px;
    line-height: 1;
}
.po-explainer-anim--export-package .po-ex-exp-pkg-label {
    font: 700 11px/1 system-ui, sans-serif;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    text-align: center;
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@keyframes po-ex-exp-pkg-box-in {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.4) rotate(-8deg); }
    60%  { opacity: 1; transform: translate(-50%, -50%) scale(1.08) rotate(2deg); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0); }
}
.po-explainer-anim--export-package .po-ex-exp-pkg-asset {
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 6px 12px;
    background: var(--po-bg-elevated, #ffffff);
    border: 1px solid rgba(91, 155, 213, 0.45);
    border-radius: 999px;
    font: 700 10px/1 system-ui, sans-serif;
    color: var(--po-text, #1f2937);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12);
    transform: translate(-50%, -50%) scale(0.6);
    opacity: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    animation: po-ex-exp-pkg-asset-fly 1.0s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.po-explainer-anim--export-package .po-ex-exp-pkg-asset i { font-size: 12px; }
.po-explainer-anim--export-package .po-ex-exp-pkg-asset-1 { animation-delay: 0.85s; --po-asset-x: -150px; --po-asset-y: -110px; }
.po-explainer-anim--export-package .po-ex-exp-pkg-asset-1 i { color: #ef4444; }
.po-explainer-anim--export-package .po-ex-exp-pkg-asset-2 { animation-delay: 1.10s; --po-asset-x:  150px; --po-asset-y: -100px; }
.po-explainer-anim--export-package .po-ex-exp-pkg-asset-2 i { color: #5B9BD5; }
.po-explainer-anim--export-package .po-ex-exp-pkg-asset-3 { animation-delay: 1.35s; --po-asset-x: -160px; --po-asset-y:  100px; }
.po-explainer-anim--export-package .po-ex-exp-pkg-asset-3 i { color: #10b981; }
@keyframes po-ex-exp-pkg-asset-fly {
    0% {
        opacity: 0;
        transform: translate(calc(-50% + var(--po-asset-x)), calc(-50% + var(--po-asset-y))) scale(0.6) rotate(-12deg);
    }
    60% {
        opacity: 1;
        transform: translate(calc(-50% + (var(--po-asset-x) * 0.35)), calc(-50% + (var(--po-asset-y) * 0.35))) scale(1.05) rotate(0);
    }
    100% {
        opacity: 1;
        transform: translate(calc(-50% + (var(--po-asset-x) * 0.55)), calc(-50% + (var(--po-asset-y) * 0.55))) scale(0.95) rotate(0);
    }
}
.po-explainer-anim--export-package .po-ex-exp-pkg-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 130px;
    height: 130px;
    border-radius: 16px;
    transform: translate(-50%, -50%) scale(0.85);
    opacity: 0;
    border: 3px solid rgba(91, 155, 213, 0.55);
    pointer-events: none;
    animation: po-ex-exp-pkg-glow 1.6s ease-out 1.6s infinite both;
}
@keyframes po-ex-exp-pkg-glow {
    0%   { opacity: 0.55; transform: translate(-50%, -50%) scale(0.85); }
    100% { opacity: 0;    transform: translate(-50%, -50%) scale(1.45); }
}

/* ═══════════════════════════════════════════════════════════════════════
   PROCESSING-DASHBOARD HOLLYWOOD-ANIMATIONEN — 2026-05-01
   Zentral fuer `processing-dashboard`, nicht lokal in der Fachseite.
   ═══════════════════════════════════════════════════════════════════════ */
.po-explainer-anim--processing-flow,
.po-explainer-anim--processing-signals,
.po-explainer-anim--processing-throughput,
.po-explainer-anim--processing-tiers,
.po-explainer-anim--processing-controls {
    position: absolute;
    inset: 0;
}

.po-ex-proc-node,
.po-ex-proc-signal,
.po-ex-proc-tier,
.po-ex-proc-control,
.po-ex-proc-worker-ring,
.po-ex-proc-chart,
.po-ex-proc-live-badge {
    position: absolute;
    background: linear-gradient(180deg, var(--po-bg-elevated, #ffffff) 0%, var(--po-bg-secondary, #f8fafc) 100%);
    border: 1px solid rgba(91, 155, 213, 0.28);
    box-shadow: 0 16px 34px rgba(91, 155, 213, 0.14);
    color: var(--po-text-primary, #1e293b);
}

/* Flow */
.po-ex-proc-node {
    top: 78px;
    width: 104px;
    height: 86px;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    opacity: 0;
    transform: translateY(18px) scale(0.86);
    animation: po-ex-proc-pop 0.58s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    z-index: 3;
}
.po-ex-proc-node i { font-size: 25px; color: #4178be; }
.po-ex-proc-node span {
    max-width: 92px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font: 800 10px/1.2 system-ui, sans-serif;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}
.po-ex-proc-node-upload { left: 38px; animation-delay: 0.06s; }
.po-ex-proc-node-queue { left: 166px; animation-delay: 0.20s; }
.po-ex-proc-node-worker { left: 294px; animation-delay: 0.34s; }
.po-ex-proc-node-worker i { animation: po-ex-proc-spin 1.8s linear infinite; }
.po-ex-proc-node-done { left: 422px; animation-delay: 0.48s; }
.po-ex-proc-node-done i { color: #10b981; }
.po-ex-proc-flow-line {
    position: absolute;
    top: 121px;
    width: 52px;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(91, 155, 213, 0.20), rgba(91, 155, 213, 0.85));
    opacity: 0;
    animation: po-ex-proc-line 0.42s ease-out forwards;
}
.po-ex-proc-flow-line-1 { left: 142px; animation-delay: 0.38s; }
.po-ex-proc-flow-line-2 { left: 270px; animation-delay: 0.54s; }
.po-ex-proc-flow-line-3 { left: 398px; animation-delay: 0.70s; }
.po-ex-proc-packet {
    position: absolute;
    top: 115px;
    left: 44px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #5B9BD5;
    box-shadow: 0 0 0 0 rgba(91, 155, 213, 0.32);
    opacity: 0;
    animation: po-ex-proc-packet 2.4s ease-in-out infinite, po-ex-proc-pulse 1.4s ease-in-out infinite;
    z-index: 4;
}
.po-ex-proc-packet-2 { animation-delay: 0.75s, 0.75s; }

/* Signals */
.po-ex-proc-signal {
    width: 118px;
    height: 82px;
    border-radius: 16px;
    display: grid;
    grid-template-columns: 34px 1fr;
    grid-template-rows: 1fr 1fr;
    align-items: center;
    column-gap: 9px;
    padding: 12px;
    opacity: 0;
    transform: translateY(18px) scale(0.88);
    animation: po-ex-proc-pop 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.po-ex-proc-signal i {
    grid-row: 1 / 3;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(91, 155, 213, 0.12);
    color: #4178be;
}
.po-ex-proc-signal span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font: 800 10px/1 system-ui, sans-serif;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--po-text-muted, #64748b);
}
.po-ex-proc-signal b { font-size: 22px; line-height: 1; color: var(--po-text-primary, #0f172a); }
.po-ex-proc-signal-queued { left: 68px; top: 38px; animation-delay: 0.08s; }
.po-ex-proc-signal-processing { right: 68px; top: 38px; animation-delay: 0.22s; }
.po-ex-proc-signal-processing i { color: #7c3aed; animation: po-ex-proc-spin 1.8s linear infinite; }
.po-ex-proc-signal-completed { left: 68px; bottom: 34px; animation-delay: 0.36s; }
.po-ex-proc-signal-completed i { color: #10b981; background: rgba(16, 185, 129, 0.12); }
.po-ex-proc-signal-failed { right: 68px; bottom: 34px; animation-delay: 0.50s; }
.po-ex-proc-signal-failed i { color: #ef4444; background: rgba(239, 68, 68, 0.12); }

/* Throughput */
.po-ex-proc-chart {
    left: 56px;
    right: 168px;
    top: 44px;
    height: 140px;
    border-radius: 18px;
    overflow: hidden;
    opacity: 0;
    animation: po-ex-proc-fade-up 0.5s ease-out 0.08s forwards;
}
.po-ex-proc-chart::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(0deg, rgba(148, 163, 184, 0.17) 0 1px, transparent 1px 28px),
        linear-gradient(180deg, rgba(16, 185, 129, 0.06), transparent);
}
.po-ex-proc-chart-bar {
    position: absolute;
    bottom: 18px;
    width: 28px;
    border-radius: 999px 999px 4px 4px;
    background: linear-gradient(180deg, #51cf66 0%, #10b981 100%);
    transform-origin: bottom;
    transform: scaleY(0);
    animation: po-ex-proc-bar-grow 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.po-ex-proc-chart-bar-1 { left: 34px; height: 44px; animation-delay: 0.30s; }
.po-ex-proc-chart-bar-2 { left: 92px; height: 72px; animation-delay: 0.42s; }
.po-ex-proc-chart-bar-3 { left: 150px; height: 56px; animation-delay: 0.54s; }
.po-ex-proc-chart-bar-4 { left: 208px; height: 94px; animation-delay: 0.66s; }
.po-ex-proc-chart-bar-5 { left: 266px; height: 68px; animation-delay: 0.78s; }
.po-ex-proc-chart-line {
    position: absolute;
    left: 32px;
    right: 38px;
    top: 56px;
    height: 42px;
    border-top: 3px solid #4178be;
    border-right: 3px solid #4178be;
    border-radius: 0 18px 0 0;
    transform: scaleX(0);
    transform-origin: left center;
    opacity: 0;
    animation: po-ex-proc-line-chart 0.8s ease-out 0.86s forwards;
}
.po-ex-proc-live-badge {
    right: 64px;
    top: 44px;
    height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font: 900 10px/1 system-ui, sans-serif;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    opacity: 0;
    animation: po-ex-proc-pop 0.45s ease-out 1.05s forwards;
}
.po-ex-proc-live-badge i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.34);
    animation: po-ex-proc-pulse 1.5s ease-in-out infinite;
}
.po-ex-proc-worker-ring {
    right: 62px;
    bottom: 32px;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    opacity: 0;
    animation: po-ex-proc-pop 0.5s ease-out 0.78s forwards;
}
.po-ex-proc-worker-ring::before {
    content: '';
    position: absolute;
    inset: -9px;
    border-radius: 50%;
    border: 2px solid rgba(91, 155, 213, 0.24);
    animation: po-ex-proc-ring 1.8s ease-out infinite;
}
.po-ex-proc-worker-ring i { color: #4178be; font-size: 24px; }
.po-ex-proc-worker-ring span {
    max-width: 78px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font: 800 9px/1.1 system-ui, sans-serif;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

/* Tiers */
.po-ex-proc-tier {
    left: 92px;
    width: 376px;
    height: 48px;
    border-radius: 14px;
    display: grid;
    grid-template-columns: 86px 1fr 42px;
    align-items: center;
    gap: 12px;
    padding: 0 14px;
    opacity: 0;
    transform: translateX(-20px);
    animation: po-ex-proc-tier-in 0.55s ease-out forwards;
}
.po-ex-proc-tier-basic { top: 38px; animation-delay: 0.10s; }
.po-ex-proc-tier-premium { top: 96px; animation-delay: 0.26s; }
.po-ex-proc-tier-ultra { top: 154px; animation-delay: 0.42s; }
.po-ex-proc-tier span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font: 900 11px/1 system-ui, sans-serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.po-ex-proc-tier b {
    height: 12px;
    border-radius: 999px;
    background: linear-gradient(90deg, #5B9BD5 0%, #51cf66 100%);
    transform-origin: left center;
    transform: scaleX(0);
    animation: po-ex-proc-tier-bar 0.75s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.po-ex-proc-tier-basic b { --po-tier-scale: 0.42; animation-delay: 0.46s; }
.po-ex-proc-tier-premium b { --po-tier-scale: 0.78; animation-delay: 0.62s; }
.po-ex-proc-tier-ultra b { --po-tier-scale: 0.56; animation-delay: 0.78s; }
.po-ex-proc-tier em { justify-self: end; font-style: normal; font-weight: 900; color: #4178be; }
.po-ex-proc-tier-pulse {
    position: absolute;
    right: 78px;
    top: 108px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid rgba(91, 155, 213, 0.40);
    opacity: 0;
    animation: po-ex-proc-ring 1.8s ease-out 1.0s infinite;
}

/* Controls */
.po-ex-proc-control {
    top: 66px;
    width: 154px;
    height: 112px;
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    opacity: 0;
    transform: translateY(20px) scale(0.86);
    animation: po-ex-proc-pop 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    z-index: 3;
}
.po-ex-proc-control i {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}
.po-ex-proc-control span {
    max-width: 126px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font: 900 10px/1.2 system-ui, sans-serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.po-ex-proc-control-handbrake { left: 94px; animation-delay: 0.12s; }
.po-ex-proc-control-handbrake i { color: #f59e0b; background: rgba(245, 158, 11, 0.14); }
.po-ex-proc-control-cancel { right: 94px; animation-delay: 0.30s; }
.po-ex-proc-control-cancel i { color: #ef4444; background: rgba(239, 68, 68, 0.14); }
.po-ex-proc-control-gate {
    position: absolute;
    left: 50%;
    top: 46px;
    width: 76px;
    height: 152px;
    transform: translateX(-50%) scaleY(0);
    transform-origin: center;
    border-radius: 999px;
    border: 2px dashed rgba(91, 155, 213, 0.42);
    opacity: 0;
    animation: po-ex-proc-gate 0.62s ease-out 0.55s forwards;
}
.po-ex-proc-control-flow {
    position: absolute;
    top: 120px;
    width: 90px;
    height: 4px;
    border-radius: 999px;
    opacity: 0;
    animation: po-ex-proc-line 0.45s ease-out forwards;
}
.po-ex-proc-control-flow-safe { left: 244px; background: linear-gradient(90deg, #f59e0b, #5B9BD5); animation-delay: 0.86s; }
.po-ex-proc-control-flow-stop { right: 244px; background: linear-gradient(90deg, #5B9BD5, #ef4444); animation-delay: 1.02s; }

html.dark-side .po-ex-proc-node,
html.dark-side .po-ex-proc-signal,
html.dark-side .po-ex-proc-tier,
html.dark-side .po-ex-proc-control,
html.dark-side .po-ex-proc-worker-ring,
html.dark-side .po-ex-proc-chart,
html.dark-side .po-ex-proc-live-badge,
.dark-mode .po-ex-proc-node,
.dark-mode .po-ex-proc-signal,
.dark-mode .po-ex-proc-tier,
.dark-mode .po-ex-proc-control,
.dark-mode .po-ex-proc-worker-ring,
.dark-mode .po-ex-proc-chart,
.dark-mode .po-ex-proc-live-badge {
    background: linear-gradient(180deg, #1f2937 0%, #111827 100%);
    border-color: rgba(91, 155, 213, 0.45);
    color: #e5e7eb;
}
html.dark-side .po-ex-proc-signal b,
.dark-mode .po-ex-proc-signal b {
    color: #f8fafc;
}

@keyframes po-ex-proc-pop {
    0% { opacity: 0; transform: translateY(18px) scale(0.86); }
    70% { opacity: 1; transform: translateY(-3px) scale(1.04); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes po-ex-proc-line {
    0% { opacity: 0; transform: scaleX(0); transform-origin: left center; }
    100% { opacity: 1; transform: scaleX(1); transform-origin: left center; }
}
@keyframes po-ex-proc-packet {
    0% { opacity: 0; transform: translateX(0) scale(0.55); }
    10% { opacity: 1; transform: translateX(0) scale(1); }
    90% { opacity: 1; transform: translateX(430px) scale(1); }
    100% { opacity: 0; transform: translateX(430px) scale(0.55); }
}
@keyframes po-ex-proc-pulse {
    0% { box-shadow: 0 0 0 0 rgba(91, 155, 213, 0.34); }
    70% { box-shadow: 0 0 0 12px rgba(91, 155, 213, 0); }
    100% { box-shadow: 0 0 0 0 rgba(91, 155, 213, 0); }
}
@keyframes po-ex-proc-spin {
    to { transform: rotate(360deg); }
}
@keyframes po-ex-proc-fade-up {
    0% { opacity: 0; transform: translateY(16px); }
    100% { opacity: 1; transform: translateY(0); }
}
@keyframes po-ex-proc-bar-grow {
    0% { transform: scaleY(0); }
    100% { transform: scaleY(1); }
}
@keyframes po-ex-proc-line-chart {
    0% { opacity: 0; transform: scaleX(0); }
    100% { opacity: 1; transform: scaleX(1); }
}
@keyframes po-ex-proc-ring {
    0% { opacity: 0.75; transform: scale(0.78); }
    100% { opacity: 0; transform: scale(1.28); }
}
@keyframes po-ex-proc-tier-in {
    0% { opacity: 0; transform: translateX(-20px); }
    100% { opacity: 1; transform: translateX(0); }
}
@keyframes po-ex-proc-tier-bar {
    0% { transform: scaleX(0); }
    100% { transform: scaleX(var(--po-tier-scale, 1)); }
}
@keyframes po-ex-proc-gate {
    0% { opacity: 0; transform: translateX(-50%) scaleY(0); }
    100% { opacity: 1; transform: translateX(-50%) scaleY(1); }
}

/* Dark-Mode-Tweaks (Kontrast fuer hellere Card-Backgrounds in den
   Mode-Cards bleibt absichtlich erhalten — die Pastell-Hintergruende
   sind als Akzent gedacht und funktionieren in beiden Themes). */
html.dark-side .po-explainer-anim--export-fields .po-ex-exp-list,
.dark-mode      .po-explainer-anim--export-fields .po-ex-exp-list {
    background: var(--po-bg-elevated, #1f2937);
    border-color: rgba(91, 155, 213, 0.55);
}
html.dark-side .po-explainer-anim--export-fields .po-ex-exp-list-row,
.dark-mode      .po-explainer-anim--export-fields .po-ex-exp-list-row {
    background: linear-gradient(90deg, #334155 0%, #475569 100%);
}
html.dark-side .po-explainer-anim--export-package .po-ex-exp-pkg-asset,
.dark-mode      .po-explainer-anim--export-package .po-ex-exp-pkg-asset {
    background: var(--po-bg-elevated, #1f2937);
    color: var(--po-text, #f3f4f6);
    border-color: rgba(91, 155, 213, 0.65);
}

/* prefers-reduced-motion: Animationen instant abschalten, End-State bleibt
   wie definiert sichtbar (alle Animationen haben opacity:1 + scale:1 als
   100%-Frame, daher korrektes End-Bild). */
@media (prefers-reduced-motion: reduce) {
    .po-explainer-anim--export-flow *,
    .po-explainer-anim--export-modes *,
    .po-explainer-anim--export-fields *,
    .po-explainer-anim--export-package *,
    .po-explainer-anim--processing-flow *,
    .po-explainer-anim--processing-signals *,
    .po-explainer-anim--processing-throughput *,
    .po-explainer-anim--processing-tiers *,
    .po-explainer-anim--processing-controls * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* ============================================================================
   VOICE-GENERATOR-EXPLAINER — Studioartige Audio-Szenen
   ============================================================================ */
.po-explainer-slide:has(.po-explainer-anim--voice-waveform) .po-explainer-illustration,
.po-explainer-slide:has(.po-explainer-anim--voice-usecases) .po-explainer-illustration,
.po-explainer-slide:has(.po-explainer-anim--voice-tiers) .po-explainer-illustration,
.po-explainer-slide:has(.po-explainer-anim--voice-clone) .po-explainer-illustration,
.po-explainer-slide:has(.po-explainer-anim--voice-multi-speaker) .po-explainer-illustration {
    max-width: var(--po-ex-copy-column-max, 800px);
    height: 250px;
    background:
        radial-gradient(circle at 18% 22%, rgba(91, 155, 213, 0.24), transparent 34%),
        radial-gradient(circle at 82% 76%, rgba(14, 165, 233, 0.18), transparent 38%),
        linear-gradient(135deg, rgba(15, 23, 42, 0.04) 0%, rgba(91, 155, 213, 0.10) 100%);
}
.po-explainer-anim--voice-waveform,
.po-explainer-anim--voice-usecases,
.po-explainer-anim--voice-tiers,
.po-explainer-anim--voice-clone,
.po-explainer-anim--voice-multi-speaker {
    position: absolute;
    inset: 0;
}
.po-ex-voice-stage {
    position: absolute;
    inset: 0;
    overflow: hidden;
}
.po-ex-voice-stage::before {
    content: "";
    position: absolute;
    inset: 18px;
    border-radius: 24px;
    border: 1px solid rgba(91, 155, 213, 0.18);
    background-image:
        linear-gradient(rgba(91, 155, 213, 0.10) 1px, transparent 1px),
        linear-gradient(90deg, rgba(91, 155, 213, 0.10) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: radial-gradient(circle at center, #000 0%, transparent 76%);
    -webkit-mask-image: radial-gradient(circle at center, #000 0%, transparent 76%);
}
.po-ex-voice-mic,
.po-ex-voice-hub,
.po-ex-voice-usecase,
.po-ex-voice-tier,
.po-ex-voice-record-card,
.po-ex-voice-ai-core,
.po-ex-voice-clone-avatar,
.po-ex-voice-speaker,
.po-ex-voice-dialog-bubble {
    position: absolute;
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid rgba(91, 155, 213, 0.24);
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.12);
    color: #0f172a;
}
html.dark-side .po-ex-voice-mic,
html.dark-side .po-ex-voice-hub,
html.dark-side .po-ex-voice-usecase,
html.dark-side .po-ex-voice-tier,
html.dark-side .po-ex-voice-record-card,
html.dark-side .po-ex-voice-ai-core,
html.dark-side .po-ex-voice-clone-avatar,
html.dark-side .po-ex-voice-speaker,
html.dark-side .po-ex-voice-dialog-bubble,
.dark-mode .po-ex-voice-mic,
.dark-mode .po-ex-voice-hub,
.dark-mode .po-ex-voice-usecase,
.dark-mode .po-ex-voice-tier,
.dark-mode .po-ex-voice-record-card,
.dark-mode .po-ex-voice-ai-core,
.dark-mode .po-ex-voice-clone-avatar,
.dark-mode .po-ex-voice-speaker,
.dark-mode .po-ex-voice-dialog-bubble {
    background: rgba(15, 23, 42, 0.88);
    border-color: rgba(91, 155, 213, 0.46);
    color: #e5e7eb;
}

/* Text-zu-Sprache: Script-Zeilen werden hörbar. */
.po-ex-voice-script {
    position: absolute;
    left: 70px;
    top: 54px;
    width: 150px;
    padding: 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(91, 155, 213, 0.18);
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.10);
    animation: po-ex-voice-fade-up 0.55s ease-out both;
}
.po-ex-voice-script span {
    display: block;
    height: 8px;
    margin: 9px 0;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(91, 155, 213, 0.66), rgba(14, 165, 233, 0.28));
}
.po-ex-voice-script span:nth-child(2) { width: 76%; }
.po-ex-voice-script span:nth-child(3) { width: 58%; }
.po-ex-voice-wave-bars {
    position: absolute;
    left: 250px;
    right: 94px;
    top: 96px;
    height: 86px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}
.po-ex-voice-wave-bars i,
.po-ex-voice-dialog-mix i,
.po-ex-voice-clone-wave i {
    display: block;
    width: 7px;
    height: 54px;
    border-radius: 999px;
    background: linear-gradient(180deg, #38bdf8 0%, #5B9BD5 46%, #4178BE 100%);
    box-shadow: 0 0 18px rgba(91, 155, 213, 0.34);
    transform-origin: center;
    animation: po-ex-voice-wave 1.05s ease-in-out infinite;
}
.po-ex-voice-wave-bars i:nth-child(3n+1),
.po-ex-voice-dialog-mix i:nth-child(3n+1),
.po-ex-voice-clone-wave i:nth-child(3n+1) { animation-delay: -0.18s; }
.po-ex-voice-wave-bars i:nth-child(3n+2),
.po-ex-voice-dialog-mix i:nth-child(3n+2),
.po-ex-voice-clone-wave i:nth-child(3n+2) { animation-delay: -0.36s; }
.po-ex-voice-lang {
    position: absolute;
    min-width: 42px;
    padding: 6px 9px;
    border-radius: 999px;
    text-align: center;
    font-size: 12px;
    font-weight: 800;
    color: #4178BE;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(91, 155, 213, 0.24);
    opacity: 0;
    animation: po-ex-voice-pop 0.46s ease-out forwards;
}
.po-ex-voice-lang-1 { left: 286px; top: 44px; animation-delay: 0.22s; }
.po-ex-voice-lang-2 { right: 112px; top: 52px; animation-delay: 0.42s; }
.po-ex-voice-lang-3 { left: 318px; bottom: 38px; animation-delay: 0.62s; }
.po-ex-voice-lang-4 { right: 84px; bottom: 48px; animation-delay: 0.82s; }
.po-ex-voice-mic {
    right: 248px;
    top: 28px;
    width: 54px;
    height: 54px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    color: #5B9BD5;
    font-size: 23px;
    animation: po-ex-voice-pop 0.55s ease-out 0.12s both, po-ex-voice-pulse 2.4s ease-in-out 0.8s infinite;
}

/* Use-Cases: Anwendungen umkreisen den Audio-Hub. */
.po-ex-voice-orbit {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 360px;
    height: 170px;
    border: 2px dashed rgba(91, 155, 213, 0.24);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: po-ex-voice-orbit 14s linear infinite;
}
.po-ex-voice-hub {
    left: 50%;
    top: 50%;
    width: 110px;
    height: 86px;
    border-radius: 24px;
    transform: translate(-50%, -50%);
    display: grid;
    place-items: center;
    color: #5B9BD5;
}
.po-ex-voice-hub i { font-size: 26px; }
.po-ex-voice-hub span {
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.po-ex-voice-usecase {
    width: 98px;
    height: 66px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    gap: 2px;
    opacity: 0;
    animation: po-ex-voice-pop 0.5s ease-out forwards;
}
.po-ex-voice-usecase i { color: #5B9BD5; font-size: 19px; }
.po-ex-voice-usecase span { font-size: 11px; font-weight: 700; }
.po-ex-voice-usecase-1 { left: 74px; top: 48px; animation-delay: 0.12s; }
.po-ex-voice-usecase-2 { right: 78px; top: 46px; animation-delay: 0.28s; }
.po-ex-voice-usecase-3 { left: 112px; bottom: 36px; animation-delay: 0.44s; }
.po-ex-voice-usecase-4 { right: 114px; bottom: 34px; animation-delay: 0.60s; }

/* Qualitätsstufen: Studioregler wachsen nacheinander. */
.po-ex-voice-tier {
    bottom: 44px;
    width: 132px;
    height: 158px;
    border-radius: 22px;
    padding: 16px 14px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    opacity: 0;
    animation: po-ex-voice-fade-up 0.52s ease-out forwards;
}
.po-ex-voice-tier strong {
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.po-ex-voice-tier span {
    display: flex;
    gap: 7px;
    color: #5B9BD5;
}
.po-ex-voice-tier em {
    display: block;
    height: 8px;
    border-radius: 999px;
    background: linear-gradient(90deg, #5B9BD5, #38bdf8);
    transform-origin: left center;
    animation: po-ex-voice-meter 0.7s ease-out 0.55s both;
}
.po-ex-voice-tier-basic { left: 86px; animation-delay: 0.10s; }
.po-ex-voice-tier-basic em { width: 45%; }
.po-ex-voice-tier-premium { left: calc(50% - 66px); height: 178px; animation-delay: 0.24s; }
.po-ex-voice-tier-premium em { width: 72%; }
.po-ex-voice-tier-ultra { right: 86px; height: 198px; animation-delay: 0.38s; }
.po-ex-voice-tier-ultra em { width: 96%; }
.po-ex-voice-tier-glow {
    position: absolute;
    left: 50%;
    bottom: 30px;
    width: 440px;
    height: 24px;
    border-radius: 50%;
    transform: translateX(-50%);
    background: radial-gradient(circle, rgba(91, 155, 213, 0.28), transparent 72%);
    animation: po-ex-voice-pulse 2.6s ease-in-out infinite;
}

/* Voice Cloning: Sample, Analyse und eigene Stimme. */
.po-ex-voice-record-card,
.po-ex-voice-ai-core,
.po-ex-voice-clone-avatar {
    top: 74px;
    width: 108px;
    height: 96px;
    border-radius: 24px;
    display: grid;
    place-items: center;
    opacity: 0;
    animation: po-ex-voice-pop 0.5s ease-out forwards;
}
.po-ex-voice-record-card { left: 78px; animation-delay: 0.10s; }
.po-ex-voice-ai-core { left: calc(50% - 54px); animation-delay: 0.34s; }
.po-ex-voice-clone-avatar { right: 78px; animation-delay: 0.58s; }
.po-ex-voice-record-card i,
.po-ex-voice-ai-core i,
.po-ex-voice-clone-avatar i {
    color: #5B9BD5;
    font-size: 24px;
}
.po-ex-voice-record-card span,
.po-ex-voice-ai-core span,
.po-ex-voice-clone-avatar span {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}
.po-ex-voice-clone-wave {
    position: absolute;
    left: 202px;
    top: 108px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.po-ex-voice-clone-wave i {
    width: 6px;
    height: 42px;
}
.po-ex-voice-clone-line {
    position: absolute;
    top: 122px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(91, 155, 213, 0), rgba(91, 155, 213, 0.72), rgba(56, 189, 248, 0));
    transform-origin: left center;
    opacity: 0;
    animation: po-ex-voice-line 0.62s ease-out forwards;
}
.po-ex-voice-clone-line-1 { left: 184px; width: 140px; animation-delay: 0.30s; }
.po-ex-voice-clone-line-2 { right: 184px; width: 140px; animation-delay: 0.56s; }

/* Multi-Speaker: Tags steuern den Sprecherwechsel. */
.po-ex-voice-speaker {
    top: 42px;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #5B9BD5;
    animation: po-ex-voice-pop 0.5s ease-out both;
}
.po-ex-voice-speaker i { font-size: 24px; }
.po-ex-voice-speaker span {
    position: absolute;
    bottom: -10px;
    padding: 3px 9px;
    border-radius: 999px;
    background: #5B9BD5;
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
}
.po-ex-voice-speaker-left { left: 96px; animation-delay: 0.10s; }
.po-ex-voice-speaker-right { right: 96px; animation-delay: 0.30s; }
.po-ex-voice-dialog-bubble {
    width: 188px;
    height: 56px;
    border-radius: 18px;
    padding: 10px 12px;
    opacity: 0;
    animation: po-ex-voice-fade-up 0.52s ease-out forwards;
}
.po-ex-voice-dialog-bubble code {
    color: #4178BE;
    font-weight: 800;
    font-size: 12px;
}
.po-ex-voice-dialog-bubble span {
    display: block;
    width: 78%;
    height: 7px;
    margin-top: 8px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(91, 155, 213, 0.6), rgba(14, 165, 233, 0.22));
}
.po-ex-voice-dialog-bubble-1 { left: 174px; top: 78px; animation-delay: 0.34s; }
.po-ex-voice-dialog-bubble-2 { right: 174px; top: 126px; animation-delay: 0.64s; }
.po-ex-voice-dialog-mix {
    position: absolute;
    left: 50%;
    bottom: 34px;
    display: flex;
    align-items: center;
    gap: 6px;
    transform: translateX(-50%);
}
.po-ex-voice-dialog-mix i {
    width: 7px;
    height: 40px;
}

@keyframes po-ex-voice-wave {
    0%, 100% { transform: scaleY(0.38); }
    45% { transform: scaleY(1.18); }
    72% { transform: scaleY(0.66); }
}
@keyframes po-ex-voice-pop {
    0% { opacity: 0; transform: translateY(14px) scale(0.86); }
    72% { opacity: 1; transform: translateY(-3px) scale(1.04); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes po-ex-voice-fade-up {
    0% { opacity: 0; transform: translateY(18px); }
    100% { opacity: 1; transform: translateY(0); }
}
@keyframes po-ex-voice-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(91, 155, 213, 0.24); opacity: 0.82; }
    50% { box-shadow: 0 0 0 14px rgba(91, 155, 213, 0); opacity: 1; }
}
@keyframes po-ex-voice-orbit {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes po-ex-voice-meter {
    0% { transform: scaleX(0); }
    100% { transform: scaleX(1); }
}
@keyframes po-ex-voice-line {
    0% { opacity: 0; transform: scaleX(0); }
    100% { opacity: 1; transform: scaleX(1); }
}

@media (max-width: 640px) {
    .po-explainer-slide:has(.po-explainer-anim--voice-waveform) .po-explainer-illustration,
    .po-explainer-slide:has(.po-explainer-anim--voice-usecases) .po-explainer-illustration,
    .po-explainer-slide:has(.po-explainer-anim--voice-tiers) .po-explainer-illustration,
    .po-explainer-slide:has(.po-explainer-anim--voice-clone) .po-explainer-illustration,
    .po-explainer-slide:has(.po-explainer-anim--voice-multi-speaker) .po-explainer-illustration {
        height: 210px;
    }
    .po-ex-voice-usecase,
    .po-ex-voice-tier,
    .po-ex-voice-dialog-bubble {
        transform: scale(0.86);
    }
}

@media (prefers-reduced-motion: reduce) {
    .po-explainer-anim--voice-waveform *,
    .po-explainer-anim--voice-usecases *,
    .po-explainer-anim--voice-tiers *,
    .po-explainer-anim--voice-clone *,
    .po-explainer-anim--voice-multi-speaker * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* ── IDP AGENT CREATE GUIDE — Vorlage -> Neu-Menue -> Agent ─────────────── */
.po-explainer-anim--idp-agent-template,
.po-explainer-anim--idp-agent-new-menu,
.po-explainer-anim--idp-agent-result {
    position: absolute;
    inset: 0;
}
.po-ex-idp-create-stage {
    position: absolute;
    inset: 0;
}
.po-ex-idp-create-stage::before {
    content: "";
    position: absolute;
    inset: 18px 28px;
    border-radius: 22px;
    background:
        linear-gradient(90deg, rgba(91, 155, 213, 0.08) 1px, transparent 1px),
        linear-gradient(0deg, rgba(91, 155, 213, 0.08) 1px, transparent 1px);
    background-size: 28px 28px;
    opacity: 0.55;
    mask-image: radial-gradient(circle at center, #000 0%, transparent 74%);
}
.po-ex-idp-template-doc,
.po-ex-idp-result-doc {
    position: absolute;
    left: 86px;
    top: 42px;
    width: 124px;
    height: 152px;
    border-radius: 16px;
    background: rgba(255,255,255,0.96);
    border: 1px solid rgba(91,155,213,0.25);
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.12);
    overflow: hidden;
    opacity: 0;
    transform: translateY(18px) rotate(-2deg) scale(0.9);
    animation: po-ex-idp-pop 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.08s forwards;
}
.po-ex-idp-template-doc i,
.po-ex-idp-result-doc i {
    position: absolute;
    left: 18px;
    top: 16px;
    color: var(--po-accent, #5B9BD5);
    font-size: 20px;
}
.po-ex-idp-template-line,
.po-ex-idp-result-doc span {
    position: absolute;
    left: 18px;
    right: 18px;
    height: 7px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.28);
}
.po-ex-idp-template-line-1 { top: 56px; width: 74%; }
.po-ex-idp-template-line-2 { top: 78px; width: 58%; }
.po-ex-idp-template-line-3 { top: 108px; width: 66%; }
.po-ex-idp-template-scan {
    position: absolute;
    left: 0;
    right: 0;
    top: -18px;
    height: 18px;
    background: linear-gradient(180deg, transparent, rgba(91,155,213,0.42), transparent);
    box-shadow: 0 0 24px rgba(91,155,213,0.38);
    animation: po-ex-idp-scan 2.4s ease-in-out 0.8s infinite;
}
.po-ex-idp-template-lens {
    position: absolute;
    left: 232px;
    top: 76px;
    width: 82px;
    height: 82px;
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: linear-gradient(135deg, #5B9BD5, #0ea5e9);
    box-shadow: 0 18px 42px rgba(91,155,213,0.32);
    opacity: 0;
    transform: scale(0.72);
    animation: po-ex-idp-lens 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.55s forwards, po-ex-idp-pulse 2.2s ease-in-out 1.5s infinite;
}
.po-ex-idp-template-lens i { font-size: 30px; }
.po-ex-idp-template-chip,
.po-ex-idp-result-card {
    position: absolute;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,0.94);
    border: 1px solid rgba(91,155,213,0.22);
    box-shadow: 0 10px 24px rgba(15,23,42,0.1);
    color: #334155;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(14px);
    animation: po-ex-idp-chip 0.56s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.po-ex-idp-template-chip-1 { right: 116px; top: 48px; animation-delay: 1.05s; }
.po-ex-idp-template-chip-2 { right: 78px; top: 98px; animation-delay: 1.28s; }
.po-ex-idp-template-chip-3 { right: 132px; top: 148px; animation-delay: 1.51s; }

.po-ex-idp-toolbar {
    position: absolute;
    left: 76px;
    right: 76px;
    top: 50px;
    height: 58px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
    background: rgba(255,255,255,0.96);
    border: 1px solid rgba(91,155,213,0.22);
    box-shadow: 0 18px 38px rgba(15,23,42,0.1);
    opacity: 0;
    transform: translateY(16px);
    animation: po-ex-idp-pop-flat 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards;
}
.po-ex-idp-search,
.po-ex-idp-new-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 800;
}
.po-ex-idp-search {
    flex: 1;
    padding: 0 12px;
    color: #64748b;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}
.po-ex-idp-new-btn {
    padding: 0 16px;
    color: #ffffff;
    background: linear-gradient(135deg, #5B9BD5, #4178BE);
    box-shadow: 0 8px 20px rgba(91,155,213,0.28);
    animation: po-ex-idp-button-pulse 2.2s ease-in-out 0.9s infinite;
}
.po-ex-idp-menu-panel {
    position: absolute;
    right: 88px;
    top: 116px;
    width: 218px;
    padding: 10px;
    border-radius: 16px;
    background: rgba(255,255,255,0.98);
    border: 1px solid rgba(91,155,213,0.24);
    box-shadow: 0 22px 44px rgba(15,23,42,0.16);
    opacity: 0;
    transform: translateY(-10px) scale(0.94);
    transform-origin: top right;
    animation: po-ex-idp-menu-open 0.68s cubic-bezier(0.22, 1, 0.36, 1) 0.8s forwards;
}
.po-ex-idp-menu-panel span {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 11px;
    color: #475569;
    font-size: 12px;
    font-weight: 800;
}
.po-ex-idp-menu-panel span i {
    width: 18px;
    color: var(--po-accent, #5B9BD5);
}
.po-ex-idp-menu-panel .is-highlighted {
    color: #1e3a8a;
    background: rgba(91,155,213,0.12);
    box-shadow: inset 0 0 0 1px rgba(91,155,213,0.18);
}
.po-ex-idp-menu-pointer {
    position: absolute;
    right: 148px;
    top: 160px;
    color: #0f172a;
    font-size: 24px;
    opacity: 0;
    transform: translate(-30px, -28px) rotate(-12deg);
    animation: po-ex-idp-pointer 1.2s cubic-bezier(0.22, 1, 0.36, 1) 1.24s forwards;
}

.po-ex-idp-result-doc { left: 70px; top: 52px; width: 102px; height: 132px; }
.po-ex-idp-result-doc span:nth-child(2) { top: 54px; }
.po-ex-idp-result-doc span:nth-child(3) { top: 76px; width: 62%; }
.po-ex-idp-result-doc span:nth-child(4) { top: 104px; width: 72%; }
.po-ex-idp-result-flow {
    position: absolute;
    left: 196px;
    top: 108px;
    width: 142px;
    height: 4px;
    border-radius: 999px;
    background: rgba(91,155,213,0.18);
    opacity: 0;
    animation: po-ex-idp-flow-show 0.45s ease 0.82s forwards;
}
.po-ex-idp-result-flow i {
    position: absolute;
    top: -5px;
    width: 14px;
    height: 14px;
    border-radius: 999px;
    background: #5B9BD5;
    box-shadow: 0 0 16px rgba(91,155,213,0.42);
    animation: po-ex-idp-flow-dot 1.5s ease-in-out 1s infinite;
}
.po-ex-idp-result-flow i:nth-child(1) { left: 0; }
.po-ex-idp-result-flow i:nth-child(2) { left: 58px; animation-delay: 1.18s; }
.po-ex-idp-result-flow i:nth-child(3) { right: 0; animation-delay: 1.36s; }
.po-ex-idp-result-agent {
    position: absolute;
    right: 74px;
    top: 58px;
    width: 150px;
    height: 124px;
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #ffffff;
    background: linear-gradient(135deg, #5B9BD5, #0ea5e9);
    box-shadow: 0 24px 48px rgba(91,155,213,0.32);
    opacity: 0;
    transform: translateY(18px) scale(0.86);
    animation: po-ex-idp-agent-in 0.72s cubic-bezier(0.22, 1, 0.36, 1) 1.15s forwards;
}
.po-ex-idp-result-agent i { font-size: 32px; }
.po-ex-idp-result-agent strong { font-size: 14px; letter-spacing: 0.04em; }
.po-ex-idp-result-card-1 { left: 230px; top: 44px; animation-delay: 1.75s; }
.po-ex-idp-result-card-2 { left: 242px; bottom: 42px; animation-delay: 1.95s; }
.po-ex-idp-result-card-3 { right: 64px; bottom: 28px; animation-delay: 2.15s; }

@keyframes po-ex-idp-pop {
    0% { opacity: 0; transform: translateY(18px) rotate(-2deg) scale(0.9); }
    70% { opacity: 1; transform: translateY(-2px) rotate(1deg) scale(1.03); }
    100% { opacity: 1; transform: translateY(0) rotate(0) scale(1); }
}
@keyframes po-ex-idp-pop-flat {
    0% { opacity: 0; transform: translateY(16px); }
    100% { opacity: 1; transform: translateY(0); }
}
@keyframes po-ex-idp-scan {
    0% { transform: translateY(0); opacity: 0; }
    18% { opacity: 1; }
    72% { opacity: 1; }
    100% { transform: translateY(184px); opacity: 0; }
}
@keyframes po-ex-idp-lens {
    0% { opacity: 0; transform: scale(0.72); }
    70% { opacity: 1; transform: scale(1.06); }
    100% { opacity: 1; transform: scale(1); }
}
@keyframes po-ex-idp-pulse {
    0%, 100% { box-shadow: 0 18px 42px rgba(91,155,213,0.32), 0 0 0 0 rgba(91,155,213,0.22); }
    50% { box-shadow: 0 18px 42px rgba(91,155,213,0.32), 0 0 0 14px rgba(91,155,213,0); }
}
@keyframes po-ex-idp-chip {
    0% { opacity: 0; transform: translateY(14px) scale(0.92); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes po-ex-idp-button-pulse {
    0%, 100% { transform: translateY(0); box-shadow: 0 8px 20px rgba(91,155,213,0.28); }
    50% { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(91,155,213,0.42); }
}
@keyframes po-ex-idp-menu-open {
    0% { opacity: 0; transform: translateY(-10px) scale(0.94); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes po-ex-idp-pointer {
    0% { opacity: 0; transform: translate(-30px, -28px) rotate(-12deg); }
    55% { opacity: 1; transform: translate(0, 0) rotate(-8deg); }
    100% { opacity: 1; transform: translate(0, 0) rotate(-8deg) scale(0.92); }
}
@keyframes po-ex-idp-flow-show {
    from { opacity: 0; transform: scaleX(0); }
    to { opacity: 1; transform: scaleX(1); }
}
@keyframes po-ex-idp-flow-dot {
    0%, 100% { opacity: 0.35; transform: scale(0.72); }
    50% { opacity: 1; transform: scale(1.12); }
}
@keyframes po-ex-idp-agent-in {
    0% { opacity: 0; transform: translateY(18px) scale(0.86); }
    70% { opacity: 1; transform: translateY(-3px) scale(1.04); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .po-explainer-anim--idp-agent-template *,
    .po-explainer-anim--idp-agent-new-menu *,
    .po-explainer-anim--idp-agent-result * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* ── Support Center Explainer Animation ───────────────────────────────────── */
.po-explainer-anim--support-center {
    position: absolute;
    inset: 0;
}

.po-explainer-anim--support-center .po-ex-support-hub {
    position: absolute;
    left: 50%;
    top: 52%;
    width: 88px;
    height: 88px;
    margin: -44px 0 0 -44px;
    border-radius: 22px;
    background: linear-gradient(145deg, #5b9bd5 0%, #4178be 100%);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    box-shadow: 0 16px 36px rgba(91, 155, 213, 0.35);
    z-index: 4;
    animation: po-ex-support-hub-in 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.55s forwards;
    opacity: 0;
    transform: scale(0.7);
}

.po-explainer-anim--support-center .po-ex-support-hub i {
    font-size: 1.6rem;
}

.po-explainer-anim--support-center .po-ex-support-hub em {
    font-style: normal;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.92;
}

.po-explainer-anim--support-center .po-ex-support-ring {
    position: absolute;
    inset: -10px;
    border-radius: 28px;
    border: 2px solid rgba(91, 155, 213, 0.35);
    animation: po-ex-support-ring-pulse 2.4s ease-in-out 1.2s infinite;
}

.po-explainer-anim--support-center .po-ex-support-msg {
    position: absolute;
    left: 8%;
    top: 18%;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 16px 16px 16px 4px;
    background: #fff;
    border: 1px solid rgba(91, 155, 213, 0.25);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
    color: #334155;
    font-size: 0.72rem;
    font-weight: 500;
    animation: po-ex-support-msg-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards;
    opacity: 0;
    transform: translateY(12px);
}

.po-explainer-anim--support-center .po-ex-support-msg i {
    color: #5b9bd5;
}

.po-explainer-anim--support-center .po-ex-support-card {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 92px;
    height: 78px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.1);
    color: #475569;
    font-size: 0.68rem;
    font-weight: 600;
    opacity: 0;
}

.po-explainer-anim--support-center .po-ex-support-card i {
    font-size: 1.2rem;
}

.po-explainer-anim--support-center .po-ex-support-card-ticket {
    left: 10%;
    bottom: 16%;
    color: #16a34a;
    animation: po-ex-support-card-left 0.55s cubic-bezier(0.22, 1, 0.36, 1) 1.35s forwards;
}

.po-explainer-anim--support-center .po-ex-support-card-ticket i {
    color: #22c55e;
}

.po-explainer-anim--support-center .po-ex-support-card-calendar {
    right: 10%;
    bottom: 16%;
    color: #2563eb;
    animation: po-ex-support-card-right 0.55s cubic-bezier(0.22, 1, 0.36, 1) 1.55s forwards;
}

.po-explainer-anim--support-center .po-ex-support-card-calendar i {
    color: #3b82f6;
}

.po-explainer-anim--support-center .po-ex-support-beam {
    position: absolute;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(91, 155, 213, 0.7), transparent);
    opacity: 0;
    z-index: 2;
}

.po-explainer-anim--support-center .po-ex-support-beam-left {
    left: 22%;
    top: 42%;
    width: 26%;
    transform: rotate(18deg);
    animation: po-ex-support-beam-left 0.45s ease 0.85s forwards;
}

.po-explainer-anim--support-center .po-ex-support-beam-right {
    right: 22%;
    top: 42%;
    width: 26%;
    transform: rotate(-18deg);
    animation: po-ex-support-beam-right 0.45s ease 1.05s forwards;
}

@keyframes po-ex-support-msg-in {
    to { opacity: 1; transform: translateY(0); }
}

@keyframes po-ex-support-hub-in {
    to { opacity: 1; transform: scale(1); }
}

@keyframes po-ex-support-ring-pulse {
    0%, 100% { transform: scale(1); opacity: 0.55; }
    50% { transform: scale(1.08); opacity: 1; }
}

@keyframes po-ex-support-beam-left {
    to { opacity: 1; }
}

@keyframes po-ex-support-beam-right {
    to { opacity: 1; }
}

@keyframes po-ex-support-card-left {
    from { opacity: 0; transform: translate(18px, 12px) scale(0.9); }
    to { opacity: 1; transform: translate(0, 0) scale(1); }
}

@keyframes po-ex-support-card-right {
    from { opacity: 0; transform: translate(-18px, 12px) scale(0.9); }
    to { opacity: 1; transform: translate(0, 0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .po-explainer-anim--support-center * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ============================================================================
   Globaler Seiten-Explainer (#topmenu_page_explainer, Avatar-Zone)
   ============================================================================ */
#topmenu_avatar_zone {
    gap: 10px;
}

.po-page-explainer-topmenu-slot {
    display: inline-flex;
    align-items: center;
    margin-right: 6px;
    flex-shrink: 0;
}

.po-page-explainer-topmenu-slot.d-none,
.po-page-explainer-topmenu-slot[aria-hidden="true"] {
    display: none !important;
}

.po-global-explainer-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    /* Lang genug für „Was ist die Dokumentenübersicht?“ / lange FR-Übersetzungen */
    max-width: min(380px, 46vw);
    height: 40px;
    margin-right: 4px;
    padding: 0 12px 0 10px;
    gap: 7px;
    color: #6366f1;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(139, 92, 246, 0.12));
    border: 1px solid rgba(99, 102, 241, 0.32);
    border-radius: 12px;
    cursor: pointer;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.14);
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.po-global-explainer-trigger i {
    font-size: 17px;
    animation: po-global-explainer-pulse 4.8s ease-in-out infinite;
}

.po-global-explainer-trigger:hover {
    color: #4f46e5;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.2));
    border-color: rgba(99, 102, 241, 0.55);
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(99, 102, 241, 0.22);
}

.po-global-explainer-trigger:focus-visible {
    outline: 2px solid rgba(99, 102, 241, 0.65);
    outline-offset: 2px;
}

.po-global-explainer-trigger-label {
    display: inline-block;
    min-width: 0;
    max-width: min(320px, 100%);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.2;
    color: inherit;
}

@media (max-width: 1100px) {
    .po-global-explainer-trigger-label {
        display: none;
    }
    .po-global-explainer-trigger {
        width: 40px;
        max-width: 40px;
        padding: 0;
    }
}

@keyframes po-global-explainer-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.75; transform: scale(0.94); }
}

/* Lokale Seiten-Header-Explainer ausblenden — globaler Slot übernimmt */
.po-explainer-trigger--page-hidden {
    display: none !important;
    pointer-events: none !important;
}

/* IDP Agent Editor: globaler Topmenu-Trigger = lokales Erscheinungsbild */
#topmenu_page_explainer.po-global-explainer-trigger--idp-agent-edit {
    min-height: 44px;
    max-width: min(320px, 36vw);
    height: auto;
    margin-right: 4px;
    padding: 0 14px;
    gap: 0.45rem;
    border-radius: 14px;
    color: var(--po-accent, #5B9BD5);
    background: rgba(91, 155, 213, 0.08);
    border: 1px solid rgba(91, 155, 213, 0.28);
    box-shadow: none;
    font-size: 0.78rem;
    font-weight: 600;
}

#topmenu_page_explainer.po-global-explainer-trigger--idp-agent-edit i {
    font-size: 0.82rem;
    animation: none;
    opacity: 1;
}

#topmenu_page_explainer.po-global-explainer-trigger--idp-agent-edit:hover {
    color: var(--po-accent, #5B9BD5);
    background: rgba(91, 155, 213, 0.14);
    border-color: var(--po-accent, #5B9BD5);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(91, 155, 213, 0.18);
}

#topmenu_page_explainer.po-global-explainer-trigger--idp-agent-edit .po-global-explainer-trigger-label {
    max-width: 220px;
    font-size: 0.78rem;
    font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Programm-Intro Tour — dichte Visuals (volle Breite, 300px Slot) v21
   ═══════════════════════════════════════════════════════════════════════════ */
.po-explainer-overlay[data-po-explainer-layout="standard"] .po-explainer-slide:has(.po-explainer-anim--paperoffice-arch-stack),
.po-explainer-overlay[data-po-explainer-layout="standard"] .po-explainer-slide:has(.po-explainer-anim--ai-dms),
.po-explainer-overlay[data-po-explainer-layout="standard"] .po-explainer-slide:has(.po-explainer-anim--api-queue-flow),
.po-explainer-overlay[data-po-explainer-layout="standard"] .po-explainer-slide:has(.po-explainer-anim--billing-credits),
.po-explainer-overlay[data-po-explainer-layout="standard"] .po-explainer-slide:has(.po-explainer-anim--paperoffice-mount),
.po-explainer-overlay[data-po-explainer-layout="standard"] .po-explainer-slide:has(.po-explainer-anim--processing-flow),
.po-explainer-overlay[data-po-explainer-layout="standard"] .po-explainer-slide:has(.po-explainer-anim--paperoffice-superbrain),
.po-explainer-slide.po-explainer-slide--layout-standard:has(.po-explainer-anim--paperoffice-arch-stack),
.po-explainer-slide.po-explainer-slide--layout-standard:has(.po-explainer-anim--ai-dms),
.po-explainer-slide.po-explainer-slide--layout-standard:has(.po-explainer-anim--api-queue-flow),
.po-explainer-slide.po-explainer-slide--layout-standard:has(.po-explainer-anim--billing-credits),
.po-explainer-slide.po-explainer-slide--layout-standard:has(.po-explainer-anim--paperoffice-mount),
.po-explainer-slide.po-explainer-slide--layout-standard:has(.po-explainer-anim--processing-flow),
.po-explainer-slide.po-explainer-slide--layout-standard:has(.po-explainer-anim--paperoffice-superbrain) {
    --po-ex-ill-slot-h: 300px;
}
.po-ex-focus-hero {
    min-height: 228px;
}
.po-ex-focus-hero-detail .po-ex-arch-pill,
.po-ex-focus-hero-detail .po-ex-arch-chip,
.po-ex-focus-hero-detail .po-ex-arch-attr {
    font-size: 11px;
    padding: 6px 12px;
}
.po-ex-focus-hero-detail--security {
    margin-top: 2px;
}
.po-ex-focus-hero-detail--security .po-ex-arch-attr i {
    font-size: 11px;
}

/* AI-DMS Tour */
.po-ex-aidms-tour-stage {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr) minmax(0, 1.35fr);
    grid-template-rows: 1fr auto;
    gap: 8px 10px;
    padding: 10px 12px 8px;
    box-sizing: border-box;
}
.po-ex-aidms-tour-tiers {
    grid-row: 1 / 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    align-items: stretch;
}
.po-ex-aidms-tour-stage .po-ex-tier-pill {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    opacity: 1;
    animation: po-ex-tier-pill-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
    min-width: 0;
    max-width: none;
    width: 100%;
    font-size: 11px;
    padding: 7px 10px;
}
.po-ex-aidms-tour-core {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}
.po-ex-aidms-tour-core .po-ex-doc {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: 56px;
    height: 72px;
    opacity: 1;
    animation: po-ex-doc-in 0.55s ease-out forwards;
}
.po-ex-aidms-tour-core .po-ex-brain {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: 64px;
    height: 64px;
    font-size: 26px;
    opacity: 1;
    animation: po-ex-brain-in 0.55s ease-out 0.2s forwards;
}
.po-ex-aidms-tour-caps {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    gap: 5px 6px;
    align-self: center;
}
.po-ex-aidms-cap {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 999px;
    background: #fff;
    border: 1.5px solid rgba(91, 155, 213, 0.45);
    font: 700 10px/1.1 system-ui, sans-serif;
    letter-spacing: 0.04em;
    white-space: nowrap;
    box-shadow: 0 3px 8px rgba(15, 23, 42, 0.08);
    opacity: 0;
    animation: po-ex-tag-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.po-ex-aidms-cap i { font-size: 9px; opacity: 0.9; }
.po-ex-aidms-cap--basic { color: #4178be; border-color: rgba(91, 155, 213, 0.5); animation-delay: 0.5s; }
.po-ex-aidms-cap--premium { color: #7c3aed; border-color: rgba(139, 92, 246, 0.5); animation-delay: 0.65s; }
.po-ex-aidms-cap--ultra { color: #db2777; border-color: rgba(236, 72, 153, 0.5); animation-delay: 0.8s; }
.po-ex-aidms-cap:nth-child(odd) { animation-delay: calc(0.45s + var(--po-ex-chip-i, 0) * 0.06s); }
.po-ex-aidms-tour-kicker {
    grid-column: 2 / 4;
    text-align: center;
    font: 800 10px/1.2 system-ui, sans-serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #4178be;
}

/* API-first Tour */
.po-ex-api-tour-stage {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 12px 14px 10px;
    box-sizing: border-box;
    gap: 8px;
}
.po-ex-api-tour-pipeline {
    position: relative;
    flex: 1;
    min-height: 100px;
}
.po-ex-api-tour-stage .po-ex-queue-node {
    top: 50%;
    transform: translateY(-50%);
    width: 132px;
    height: 92px;
    font-size: 13px;
}
.po-ex-api-tour-stage .po-ex-queue-node--queued { left: 4%; }
.po-ex-api-tour-stage .po-ex-queue-node--worker { left: 50%; margin-left: -66px; }
.po-ex-api-tour-stage .po-ex-queue-node--done { left: auto; right: 4%; }
.po-ex-api-tour-stage .po-ex-queue-flow-line {
    top: 50%;
    width: 0;
    max-width: 22%;
}
.po-ex-api-tour-stage .po-ex-queue-flow-line-1 { left: 18%; }
.po-ex-api-tour-stage .po-ex-queue-flow-line-2 { left: 56%; }
.po-ex-api-tour-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
}
.po-ex-api-tour-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(91, 155, 213, 0.35);
    font: 700 11px/1 system-ui, sans-serif;
    color: #334155;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.06);
}
.po-ex-api-tour-chip i { color: #4178be; font-size: 11px; }
.po-ex-api-tour-strip {
    text-align: center;
    font: 800 10px/1.2 system-ui, sans-serif;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #64748b;
}

/* Billing usage Tour */
.po-ex-bill-tour-stage {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: 1fr auto 1.6fr;
    grid-template-rows: 1fr auto auto;
    gap: 8px 10px;
    padding: 12px 14px 10px;
    box-sizing: border-box;
    align-items: center;
}
.po-ex-bill-tour-seat {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 14px 12px;
    border-radius: 14px;
    background: #f8fafc;
    border: 1px dashed rgba(148, 163, 184, 0.65);
    color: #94a3b8;
    font: 800 12px/1.2 system-ui, sans-serif;
    opacity: 0.85;
    min-height: 88px;
}
.po-ex-bill-tour-seat-x {
    position: absolute;
    inset: 8px;
    background: linear-gradient(135deg, transparent 46%, #ef4444 48%, #ef4444 52%, transparent 54%);
    pointer-events: none;
    opacity: 0.7;
}
.po-ex-bill-tour-seat i { font-size: 22px; }
.po-ex-bill-tour-vs {
    font: 800 11px/1 system-ui, sans-serif;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.po-ex-bill-tour-flow {
    position: relative;
    min-height: 100px;
}
.po-ex-bill-tour-stage .po-ex-bill-credit-node {
    width: 108px;
    height: 62px;
    font-size: 11px;
}
.po-ex-bill-tour-stage .po-ex-bill-credit-balance { left: 0; top: 50%; margin-top: -31px; }
.po-ex-bill-tour-stage .po-ex-bill-credit-credits { left: 50%; margin-left: -54px; top: 50%; margin-top: -31px; }
.po-ex-bill-tour-stage .po-ex-bill-credit-usage { right: 0; left: auto; top: 50%; margin-top: -31px; }
.po-ex-bill-tour-stage .po-ex-bill-arrow { top: 50%; margin-top: -1px; }
.po-ex-bill-tour-stage .po-ex-bill-arrow-1 { left: 108px; width: 52px; }
.po-ex-bill-tour-stage .po-ex-bill-arrow-2 { left: calc(50% + 6px); width: 52px; }
.po-ex-bill-tour-sinks {
    grid-column: 1 / 4;
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}
.po-ex-bill-tour-sinks span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1d4ed8;
    font: 700 11px/1 system-ui, sans-serif;
}
.po-ex-bill-tour-kicker {
    grid-column: 1 / 4;
    text-align: center;
    font: 800 11px/1.2 system-ui, sans-serif;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #047857;
}

/* Mount Tour — 8 Satelliten */
.po-ex-mount-stage--tour .po-ex-mount-hub {
    left: 50%;
    top: 46%;
    width: 96px;
    height: 96px;
}
.po-ex-mount-stage--tour .po-ex-mount-node {
    width: 72px;
    height: 48px;
    padding: 6px 8px;
}
.po-ex-mount-stage--tour .po-ex-mount-node span { font-size: 8px; }
.po-ex-mount-stage--tour .po-ex-mount-node-nas { left: 18%; top: 18%; }
.po-ex-mount-stage--tour .po-ex-mount-node-s3 { left: 82%; top: 18%; }
.po-ex-mount-stage--tour .po-ex-mount-node-ssh { left: 8%; top: 48%; }
.po-ex-mount-stage--tour .po-ex-mount-node-mail { left: 50%; top: 82%; }
.po-ex-mount-stage--tour .po-ex-mount-node-erp { left: 92%; top: 48%; }
.po-ex-mount-stage--tour .po-ex-mount-node-connector { left: 28%; top: 72%; }
.po-ex-mount-stage--tour .po-ex-mount-node-cloud { left: 72%; top: 72%; }
.po-ex-mount-stage--tour .po-ex-mount-node-webhook { left: 50%; top: 12%; }
.po-ex-mount-tour-kicker {
    position: absolute;
    left: 50%;
    bottom: 6px;
    transform: translateX(-50%);
    font: 800 10px/1.2 system-ui, sans-serif;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #4178be;
    z-index: 6;
    white-space: nowrap;
}

/* Workflow Agents Tour — 5 Nodes volle Breite */
.po-ex-proc-tour-stage {
    position: absolute;
    inset: 0;
    padding: 10px 8px 8px;
    box-sizing: border-box;
}
.po-ex-proc-tour-stage .po-ex-proc-node {
    top: 42%;
    width: 88px;
    height: 80px;
    transform: translateY(-50%);
}
.po-ex-proc-tour-stage .po-ex-proc-node span {
    font-size: 8px;
    max-width: 80px;
    white-space: normal;
    text-align: center;
    line-height: 1.15;
}
.po-ex-proc-tour-stage .po-ex-proc-node-upload { left: 2%; animation-delay: 0.04s; }
.po-ex-proc-tour-stage .po-ex-proc-node-queue { left: 21%; animation-delay: 0.14s; }
.po-ex-proc-tour-stage .po-ex-proc-node-worker { left: 40%; animation-delay: 0.24s; }
.po-ex-proc-tour-stage .po-ex-proc-node-human { left: 59%; animation-delay: 0.34s; }
.po-ex-proc-tour-stage .po-ex-proc-node-human i { color: #0d9488; animation: none; }
.po-ex-proc-tour-stage .po-ex-proc-node-done { left: 78%; animation-delay: 0.44s; }
.po-ex-proc-tour-stage .po-ex-proc-flow-line {
    top: 54%;
    width: 6%;
}
.po-ex-proc-tour-stage .po-ex-proc-flow-line-1 { left: 11%; }
.po-ex-proc-tour-stage .po-ex-proc-flow-line-2 { left: 30%; }
.po-ex-proc-tour-stage .po-ex-proc-flow-line-3 { left: 49%; }
.po-ex-proc-tour-stage .po-ex-proc-flow-line-4 { left: 68%; }
.po-ex-proc-tour-stage .po-ex-proc-packet { top: 52%; }

/* HITL Superbrain */
.po-ex-superbrain-stage--hitl {
    gap: 8px;
    padding: 8px 12px 10px;
    justify-content: flex-start;
}
.po-ex-hitl-band {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: auto auto auto;
    gap: 6px 10px;
    align-items: center;
    padding: 10px 12px;
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff 0%, rgba(91, 155, 213, 0.08) 100%);
    border: 1px solid rgba(91, 155, 213, 0.35);
    box-shadow: 0 10px 24px rgba(91, 155, 213, 0.12);
}
.po-ex-hitl-human,
.po-ex-hitl-ai {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 10px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid rgba(148, 163, 184, 0.35);
    font: 800 10px/1.2 system-ui, sans-serif;
    color: #334155;
    opacity: 0;
    animation: po-ex-superbrain-step 7s ease-out forwards;
}
.po-ex-hitl-human { animation-delay: 0.15s; }
.po-ex-hitl-human i { font-size: 22px; color: #0d9488; }
.po-ex-hitl-ai { animation-delay: 0.28s; }
.po-ex-hitl-ai i { font-size: 22px; color: #7c3aed; }
.po-ex-hitl-plus {
    grid-row: 1;
    grid-column: 2;
    color: #94a3b8;
    font-size: 14px;
}
.po-ex-hitl-banner {
    grid-column: 1 / 4;
    text-align: center;
    font: 800 12px/1.25 system-ui, sans-serif;
    color: #0f172a;
    padding: 4px 8px;
    border-radius: 8px;
    background: rgba(91, 155, 213, 0.12);
    opacity: 0;
    animation: po-ex-superbrain-step 7s ease-out forwards;
    animation-delay: 0.4s;
}
.po-ex-hitl-chips {
    grid-column: 1 / 4;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
}
.po-ex-hitl-chips span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(91, 155, 213, 0.3);
    font: 700 10px/1 system-ui, sans-serif;
    color: #475569;
}
.po-ex-superbrain-stage--hitl .po-ex-superbrain-core {
    padding: 10px 16px;
    transform: scale(0.92);
}
.po-ex-superbrain-stage--hitl .po-ex-superbrain-flow {
    max-width: 100%;
    gap: 6px;
}
.po-ex-superbrain-stage--hitl .po-ex-superbrain-doc,
.po-ex-superbrain-stage--hitl .po-ex-superbrain-datacore,
.po-ex-superbrain-stage--hitl .po-ex-superbrain-chat {
    font-size: 8px;
    padding: 6px 8px;
}
.po-ex-superbrain-stage--hitl .po-ex-superbrain-footer {
    font-size: 9px;
}
@media (max-width: 720px) {
    .po-ex-aidms-tour-stage {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto;
    }
    .po-ex-aidms-tour-tiers {
        grid-row: auto;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .po-ex-proc-tour-stage .po-ex-proc-node {
        width: 72px;
        height: 70px;
    }
}