/* DT360 Prozessautomatisierung — ausschließlich Mobile, eigenständige Komponente. */
@media (max-width: 820px) {
  .dt360-home-hero .dt360-service-flow-visual[data-pa-mobile-active] > .dt360-service-flow-diagram { display: none; }
  .dt360-service-flow-visual > .pam { --pam-ready: 1; --pam-lime: #caff00; position: relative; width: 100%; max-width: 520px; margin: 0 auto; min-width: 0; font-family: var(--dt360-ds-font-body, sans-serif); color: #f5efff; isolation: isolate; }
  .pam, .pam * { box-sizing: border-box; }
  .pam[hidden], .pam [hidden] { display: none; }
  .pam .pam-toolbar { display: flex; justify-content: flex-end; min-height: 30px; margin: 0 0 18px; }
  .pam .pam-pause { font: inherit; font-size: 10px; line-height: 1.4; color: #d1c1e8; padding: 6px 9px; border: 1px solid #9973ca66; border-radius: 20px; background: #1c0c3190; cursor: pointer; }
  .pam .pam-pause:focus-visible { outline: 2px solid var(--pam-lime); outline-offset: 3px; }
  .pam .pam-pause[aria-pressed="true"] { color: var(--pam-lime); border-color: #caff0077; }
  .pam .pam-scene { display: grid; grid-template-columns: minmax(0,1fr); gap: 58px; position: relative; isolation: isolate; }
  .pam .pam-scene::before { content: ""; position: absolute; inset: 16% -4% 18%; z-index: -2; pointer-events: none; background: radial-gradient(ellipse at 50% 47%,#6cd87c13,transparent 48%),radial-gradient(ellipse at center,#6f27cc24,transparent 70%); }
  .pam .pam-scene::after { content: ""; position: absolute; inset: 20% 0 21%; z-index: -1; pointer-events: none; background-image: linear-gradient(#896ac713 1px,transparent 1px),linear-gradient(90deg,#896ac713 1px,transparent 1px); background-size: 28px 28px; mask-image: radial-gradient(ellipse,#000 12%,transparent 70%); }
  .pam .pam-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
  .pam .pam-glow, .pam .pam-wire, .pam .pam-highlight, .pam .pam-pulse { fill: none; stroke-linecap: round; stroke-linejoin: round; }
  .pam .pam-glow { stroke: #9c66ff; stroke-width: 6; opacity: .3; filter: blur(4px); }
  .pam .pam-wire { stroke: url(#dt360-pam-cable); stroke-width: 2.7; opacity: .9; }
  .pam .pam-highlight { stroke: #dbbfff; stroke-width: .7; opacity: .85; }
  .pam .pam-pulse { stroke: #d9ff81; stroke-width: 4.2; stroke-dasharray: .7 99.3; opacity: 0; filter: drop-shadow(0 0 3px #d0ff00) drop-shadow(0 0 6px #9bff61); }
  .pam .pam-inputs, .pam .pam-outputs { position: relative; z-index: 2; min-width: 0; }
  .pam .pam-heading { margin: 0 0 12px; padding: 0; color: var(--pam-lime); font-family: var(--dt360-ds-font-head,sans-serif); font-size: 12px; line-height: 1.3; font-weight: 750; letter-spacing: .13em; }
  .pam .pam-inputs ul, .pam .pam-outputs ul { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; margin: 0; padding: 0; list-style: none; }
  .pam .pam-inputs li, .pam .pam-outputs li { display: flex; align-items: center; gap: 9px; position: relative; min-width: 0; min-height: 64px; margin: 0; padding: 11px 10px; border: 1px solid #a47cf8aa; border-radius: 12px; background: linear-gradient(120deg,#301750,#170a30 75%); box-shadow: inset 0 1px #e2bdff17,0 7px 20px #09001744; }
  .pam .pam-outputs li:last-child { grid-column: 1 / -1; }
  .pam .pam-card-icon { flex: 0 0 22px; height: 25px; color: #cfb3ff; filter: drop-shadow(0 0 4px #ac80ed22); }
  .pam .pam-outputs .pam-card-icon { color: var(--pam-lime); }
  .pam .pam-card-text { min-width: 0; font-size: clamp(11px,3.15vw,15px); line-height: 1.4; font-weight: 650; }
  .pam svg:not(.pam-wires) { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .pam .pam-stage { position: relative; justify-self: center; width: 100%; max-width: 420px; aspect-ratio: 1 / 1.08; z-index: 1; }
  .pam .pam-core { position: absolute; left: 50%; top: 51%; transform: translate(-50%,-50%); width: 60%; aspect-ratio: 1; border: 2px solid #d8ff6a; border-radius: 50%; background: radial-gradient(circle at 45% 37%,#292641,#110727 70%); box-shadow: 0 0 0 5px #baff0021,0 0 0 10px #caff000d,0 0 12px #caff0077,0 0 32px #adff0050,inset 0 0 25px #adff001a; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; z-index: 2; }
  .pam .pam-core::before { content: ""; position: absolute; inset: 8px; border: 1px solid #c1ef8755; border-radius: 50%; pointer-events: none; }
  .pam .pam-core-kicker { color: var(--pam-lime); font-family: var(--dt360-ds-font-head,sans-serif); font-size: clamp(10px,2.8vw,14px); font-weight: 750; line-height: 1.2; letter-spacing: .12em; }
  .pam .pam-core strong { color: #fff; font-family: var(--dt360-ds-font-head,sans-serif); font-size: clamp(14px,4.5vw,24px); font-weight: 750; line-height: 1.2; white-space: nowrap; }
  .pam .pam-core-icon { width: 37px; height: 37px; color: var(--pam-lime); margin-top: 2px; }
  .pam .pam-orbit, .pam .pam-ring { position: absolute; left: 50%; top: 51%; width: 81%; aspect-ratio: 1; transform: translate(-50%,-50%); border-radius: 50%; pointer-events: none; }
  .pam .pam-orbit { border: 1px solid #ace77244; box-shadow: inset 0 0 20px #a3ff0010; }
  .pam .pam-orbit::after { content: ""; position: absolute; inset: 9px; border: 1px dashed #b1db8060; border-radius: 50%; }
  .pam .pam-ring i { position: absolute; top: 49%; width: 5px; height: 5px; border-radius: 50%; background: #caff00; box-shadow: 0 0 10px #bdff00; }
  .pam .pam-ring i:first-child { left: -2px; }
  .pam .pam-ring i:last-child { right: -2px; }
  .pam .pam-control { position: absolute; transform: translate(-50%,-50%); width: 24%; aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border: 1px solid #9672e5c7; border-radius: 50%; background: radial-gradient(circle at 35% 30%,#262240,#15092df5 78%); box-shadow: inset 0 0 15px #a27fdd13,0 0 18px #7867db16; z-index: 3; }
  .pam .pam-control-0 { left: 18%; top: 14%; }
  .pam .pam-control-1 { left: 82%; top: 14%; }
  .pam .pam-control-2 { left: 18%; top: 87%; }
  .pam .pam-control-3 { left: 82%; top: 87%; }
  .pam .pam-control>span { width: 30%; aspect-ratio: 1; color: #bbbfff; }
  .pam .pam-control strong { font-size: clamp(10px,2.85vw,14px); font-weight: 650; line-height: 1.3; white-space: nowrap; }
  @media (prefers-reduced-motion:no-preference) {
    .pam .pam-pulse { animation: dt360-pam-stream 4s linear infinite; animation-play-state: paused; }
    .pam .pam-ring { animation: dt360-pam-orbit 24s linear infinite; animation-play-state: paused; }
    .pam[data-running] .pam-pulse { opacity: 1; animation-play-state: running; }
    .pam[data-running] .pam-ring { animation-play-state: running; }
  }
  @keyframes dt360-pam-stream { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
  @keyframes dt360-pam-orbit { from { transform: translate(-50%,-50%) rotate(0); } to { transform: translate(-50%,-50%) rotate(360deg); } }
}