/* Home section 8 «Any process, your way» (owner 17.10): the head comes from css/leistungen.css (.wd), this file adds
   the flow stage (logos on round white beads ⇄ the pixel sphere), the two ways of working and the control row.
   Motion: js/prozess.js */
.pz-stage { position: relative; padding: var(--card-pad); border-radius: var(--r-xl); background: var(--foehn); box-shadow: var(--shadow-2); }
.pz svg:not([aria-hidden]) { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pz .icon svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; width: 100%; height: 100%; }

/* the flow: inbox → agent → the wall of services */
.pz-flow { position: relative; display: grid; gap: 22px; align-items: center; }
.pz-flow > *, .pz-wall > * { min-width: 0; }
@media (min-width: 900px) { .pz-flow { grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr) minmax(0, 1.45fr); gap: clamp(36px, 4.4vw, 72px); } }
.pz-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.pz-line { fill: none; stroke: rgba(var(--sky-rgb), .85); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pz-label { margin: 0 0 10px; font: 600 12px/1.2 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }
.pz-card { position: relative; z-index: 1; padding: 14px 16px; border-radius: var(--r-m); background: #fff; box-shadow: var(--shadow-1); }
.pz-app { display: flex; align-items: center; gap: 9px; min-width: 0; }
.pz-app b { font: 600 14px/1.2 var(--font); color: var(--ink); white-space: nowrap; }
.pz-who { margin-left: auto; font: 500 12.5px/1.2 var(--font); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the real logo as an app tile (rounded square), the mark unchanged in the middle */
.pz-logo { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 9px; background: #fff; box-shadow: inset 0 0 0 1px rgba(var(--shade), .12); overflow: hidden; }
.pz-logo svg { width: 62%; height: 62%; } .pz-logo img { width: 74%; height: 74%; object-fit: contain; }

/* the inbox: the newest message on top, the older ones step back */
/* a fixed window: the cards are stacked absolutely and move by transform only (no layout shift under the lines) */
.pz-feed { position: relative; --card-h: 112px; height: calc(var(--card-h) * 3 + 20px); }
.pz-feed .pz-msgcard { position: absolute; left: 0; right: 0; top: 0; height: var(--card-h); transform-origin: 50% 0; }
.pz-msgcard .pz-msg { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pz-msg { margin: 10px 0 0; padding: 9px 12px; border-radius: 14px 14px 14px 4px; background: var(--grey-1); font-size: 14.5px; line-height: 1.4; color: var(--ink); }

/* the agent */
.pz-agent { padding: 18px; transition: box-shadow .3s; }
.pz-agent.is-busy { box-shadow: 0 0 0 2px rgba(var(--warm-rgb), .55), var(--shadow-1); }
.pz-agent__head { display: flex; align-items: center; gap: 10px; font: 600 15px/1 var(--font); }
.pz-orb { position: relative; flex: none; width: 46px; height: 46px; }
.pz-orb canvas { position: absolute; left: 50%; top: 50%; width: 148%; height: 148%; translate: -50% -50%; }
.pz-doing { display: flex; align-items: center; gap: 10px; margin: 14px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--warm-tint); font: 600 14px/1.3 var(--font); color: var(--warm-ink); }
.pz-dots { display: inline-flex; gap: 3px; }
.pz-dots i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .35; }
.pz-agent.is-busy .pz-dots i { animation: pz-dot 1s infinite; }
.pz-agent.is-busy .pz-dots i:nth-child(2) { animation-delay: .15s; } .pz-agent.is-busy .pz-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes pz-dot { 0%, 100% { opacity: .3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } }

/* the wall of services: every tile a small card; the ones in use light up with their result */
.pz-wall { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pz-svc { position: relative; z-index: 1; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 9px; row-gap: 6px; padding: 10px 12px;
  border-radius: 14px; background: rgba(255, 255, 255, .78); box-shadow: 0 1px 2px rgba(33, 33, 33, .04); transition: background .3s, box-shadow .3s, transform .3s; }
.pz-svc b { font: 600 13px/1.2 var(--font); color: var(--ink); overflow-wrap: anywhere; }   /* a long name wraps, never cut */
.pz-res { grid-column: 1 / -1; display: flex; visibility: hidden; opacity: 0; min-height: 2.4em; align-items: center; gap: 6px; font: 600 11.5px/1.2 var(--font); color: var(--positive-ink); }
.pz-res i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--positive); box-shadow: 0 0 0 3px rgba(var(--green-rgb), .15); }
.pz-svc.is-lit { background: #fff; box-shadow: 0 0 0 2px var(--sky), var(--shadow-1); }
.pz-svc.is-lit .pz-res { visibility: visible; opacity: 1; animation: pz-pop .35s cubic-bezier(.34, 1.56, .64, 1); }   /* the row is always reserved: lighting up never resizes the tile */
@keyframes pz-pop { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.pz-svc--any { grid-column: 1 / -1; background: rgba(255, 255, 255, .4); box-shadow: none; outline: 1.5px dashed rgba(var(--shade), .3); outline-offset: -1.5px; }
.pz-svc--any b { color: var(--text-2); }
.pz-plus { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: rgba(255, 255, 255, .85); font: 500 19px/1 var(--font); color: var(--text-2); }

/* phones: the newest message only, the agent, the wall below */
@media (max-width: 899px) {
  .pz-stage { border-radius: var(--r-l); }
  .pz-feed { height: var(--card-h); }
  .pz-flow { gap: 26px; }
  .pz-wall { gap: 8px; }

}
/* phones, tablets and small laptops up to 1399 px: the tiles stand upright — the logo on top, the name and the result below, nothing cut */
@media (max-width: 1399px) {
  .pz-svc { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 10px 6px; row-gap: 5px; }
  .pz-svc b { white-space: normal; font-size: 12px; line-height: 1.15; }
  .pz-svc .pz-logo { width: 30px; height: 30px; border-radius: 8px; }
  .pz-res { justify-content: center; text-align: center; font-size: 11px; }
  .pz-svc--any { grid-template-columns: auto 1fr; justify-items: start; text-align: left; padding: 10px 12px; }
}
@media (max-width: 380px) { .pz-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .pz-svc { transition: none; } .pz-svc.is-lit .pz-res { animation: none; } }

/* the two ways of working and who is in control */
.pz-plans { display: grid; gap: var(--card-gap); margin-top: var(--card-gap); }
@media (min-width: 700px) { .pz-plans { grid-template-columns: 1fr 1fr; } }   /* the two plans side by side from tablets */
.pz-plan { display: grid; grid-template-columns: 48px 1fr; column-gap: 16px; padding: var(--card-pad); border-radius: var(--r-xl); background: #fff; box-shadow: var(--shadow-1); }
.pz-plan__ic { grid-row: span 2; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--sky-tint); color: var(--sky-ink); }
.pz-plan:last-child .pz-plan__ic { background: var(--warm-tint); color: var(--warm-ink); }
.pz-plan__ic .icon, .pz-control__ic .icon { display: grid; width: 22px; height: 22px; }
.pz-plan h3 { margin: 0 0 6px; font: 600 clamp(19px, 1.6vw, 23px)/1.2 var(--font); letter-spacing: -0.015em; }
.pz-plan p { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--text-2); }
.pz-control { margin-top: clamp(28px, 3vw, 40px); }
.pz-control__t { margin: 0 0 14px; font: 600 12.5px/1.3 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }
.pz-control ul { display: grid; gap: var(--gut, 16px); margin: 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .pz-control ul { grid-template-columns: repeat(3, 1fr); } }
.pz-ctl { display: grid; align-content: start; gap: 14px; padding: var(--card-pad); border-radius: var(--r-xl); background: #fff; box-shadow: var(--shadow-1);
  font: 500 16px/1.45 var(--font); color: var(--ink); }   /* the same white card as the two ways of working */
.pz-control__ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--positive-tint); color: var(--positive-ink); }

@media (max-width: 699px) { .pz-plan { border-radius: var(--r-l); } }

.pz-marks { margin: 10px 4px 0; font-size: 12.5px; color: var(--text-3); text-align: right; }
@media (max-width: 699px) { .pz-ctl { border-radius: var(--r-l); } .pz-marks { text-align: center; } }
.pz-logo svg, .pz-logo svg path { stroke: none; }   /* brand marks exactly as they are, no outline from the line-icon rules */