/* pxmedia.ai — Sektion „AI Workspace“ (Fassung 10, Ansage Michael 02.10.2026): der Arbeitsplatz als nachgebauter Desktop —
   links klappen die Themen aus, rechts die Personen, dazwischen frei verschiebbare Fenster; Menschen (Lila) und KI-Mitarbeiter (Cyan)
   arbeiten im selben Thema. Fünf Szenen, gekoppelt an die Textschritte daneben (js/workspace.js setzt .ws--ab2 … .ws--ab5).
   Grundzustand OHNE Skript = Endbild (alles sichtbar); erst .ws--bereit blendet nach Szene aus. Alle Maße in em, die Schrift des
   Nachbaus hängt an der Breite des Desktops (cqw) — er skaliert wie ein Bild. Alarm in Gold wie im Produkt (gold = Vertriebsanfrage). */
.ws{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:start;--ws-gold:#E9B949}
.ws__schritte{list-style:none;margin:0;padding:0;grid-column:1;grid-row:1}
.ws__schritt{min-height:72vh;display:flex;flex-direction:column;justify-content:center;padding-block:1.5rem;transition:opacity .5s var(--kurve)}
.ws__schritt b{display:block;font-size:var(--fs-h3);line-height:1.25;margin-bottom:.6rem}
.ws__schritt p{margin:0;color:var(--c-text-2);max-width:44ch}
.ws__schritt span{display:block;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;font-weight:var(--fw-bold);color:var(--c-ki);margin-bottom:.5rem}
.ws--bereit .ws__schritt:not(.an){opacity:.38}
.ws__buehne{grid-column:2;grid-row:1;position:sticky;top:calc(76px + 4vh);container-type:inline-size}
.ws__desktop{position:relative;aspect-ratio:16/10.6;border-radius:var(--radius-gross);border:1px solid var(--c-linie-2);overflow:hidden;
  background:radial-gradient(120% 90% at 78% 8%,rgba(75,48,137,.34),transparent 60%),radial-gradient(90% 80% at 10% 100%,rgba(6,182,212,.16),transparent 62%),#0e0e10;box-shadow:var(--schatten)}
.ws__innen{position:absolute;inset:0;font-size:1.72cqw;line-height:1.35;color:var(--c-text)}
.ws__innen *{box-sizing:border-box}
.ws__innen p,.ws__innen ul{margin:0;padding:0;list-style:none}
/* Kopf und Dock */
.ws__kopf{position:absolute;inset:0 0 auto 0;height:2.7em;display:flex;align-items:center;gap:.6em;padding:0 1em;font-weight:var(--fw-bold);font-size:.92em;border-bottom:1px solid rgba(255,255,255,.07);z-index:5}
.ws__marke{width:1.1em;height:1.1em;border-radius:50%;background:conic-gradient(from 210deg,#06B6D4,#A594F9,#06B6D4)}
.ws__kopf em{margin-left:auto;font-style:normal;font-weight:var(--fw-text);color:var(--c-text-2);border:1px solid rgba(255,255,255,.14);border-radius:.6em;padding:.2em .7em;font-size:.86em}
.ws__dock{position:absolute;inset:auto 0 0 0;height:3.3em;display:flex;align-items:center;justify-content:center;gap:.55em;border-top:1px solid rgba(255,255,255,.07);background:rgba(10,10,12,.72);z-index:5}
.ws__dock i{width:1.9em;height:1.9em;border-radius:.5em;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04)}
.ws__dock i:nth-child(4){margin-right:1.6em}
.ws__mikro{position:absolute;left:50%;top:-1.5em;width:3em;height:3em;margin-left:-1.5em;border-radius:50%;border:2px solid var(--c-ki);background:#111;box-shadow:0 0 1.4em rgba(6,182,212,.45)}
.ws__mikro::after{content:"";position:absolute;left:50%;top:50%;width:.7em;height:1.1em;margin:-.62em 0 0 -.35em;border-radius:.4em;background:var(--c-ki)}
/* Flügel-Griffe */
.ws__fluegel{position:absolute;top:44%;width:1.9em;height:4.6em;display:grid;place-items:center;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);z-index:6;color:var(--c-text-2);
  transition:left .7s var(--kurve),right .7s var(--kurve),color .4s,background-color .4s}
.ws__fluegel svg{width:1.05em;height:1.05em}
.ws__fluegel--links{left:15.5em;border-radius:0 .7em .7em 0;border-left:0;color:var(--c-ki);background:var(--c-ki-weich)}
.ws__fluegel--rechts{right:14.5em;border-radius:.7em 0 0 .7em;border-right:0;color:var(--c-mensch);background:var(--c-mensch-weich)}
/* Leisten: Themen links, Personen rechts */
.ws__themen,.ws__personen{position:absolute;top:2.7em;bottom:3.3em;padding:.9em .8em;background:rgba(18,18,22,.92);z-index:4;transition:transform .7s var(--kurve)}
.ws__themen{left:0;width:15.5em;border-right:1px solid rgba(255,255,255,.09)}
.ws__personen{right:0;width:14.5em;border-left:1px solid rgba(255,255,255,.09)}
.ws__leistentitel{font-size:.74em;letter-spacing:.14em;text-transform:uppercase;font-weight:var(--fw-bold);color:var(--c-text-3);margin-bottom:.8em !important}
.ws__thema{position:relative;padding:.6em .6em .6em 1em;border-radius:.6em;border:1px solid transparent;margin-bottom:.45em;font-size:.9em}
.ws__thema::before{content:"";position:absolute;left:.3em;top:.6em;bottom:.6em;width:.22em;border-radius:.2em;background:var(--tf,#8c8c8c)}
.ws__thema b{display:block;font-weight:var(--fw-bold);line-height:1.25}
.ws__thema--aktiv{background:rgba(6,182,212,.1);border-color:var(--c-ki-linie)}
.ws__kreise{display:flex;margin-top:.4em}
.ws__kreise img,.ws__person img,.ws__nachricht img{border-radius:50%;object-fit:cover;display:block;background:var(--c-flaeche-3)}
.ws__kreise img{width:1.7em;height:1.7em;border:.14em solid var(--c-ki);margin-right:-.4em}
.ws__kreise img[data-mensch]{border-color:var(--c-mensch)}
.ws__person{position:relative;display:flex;align-items:center;gap:.6em;padding:.45em .3em;font-size:.9em}
.ws__person img{width:2.5em;height:2.5em;border:.16em solid var(--c-ki);flex:none}
.ws__person[data-mensch] img{border-color:var(--c-mensch)}
.ws__person[data-kunde] > i{flex:none;width:2.5em;height:2.5em;border-radius:50%;border:.16em solid #d7d7d7;display:grid;place-items:center;font-style:normal;font-weight:var(--fw-bold);background:var(--c-flaeche-3)}
.ws__person b{display:block;line-height:1.2}
.ws__person span{display:block;color:var(--c-text-3);font-size:.84em}
.ws__blase{position:absolute;right:calc(100% + .5em);top:.1em;width:13em;padding:.5em .7em;border-radius:.8em .8em .2em .8em;background:#f4f4f4;color:#151515;font-size:.92em;line-height:1.3;box-shadow:0 .6em 1.6em rgba(0,0,0,.55);
  transition:opacity .45s var(--kurve) .5s,transform .45s var(--kurve) .5s;transform-origin:100% 50%}
.ws__neu{position:absolute;left:1.9em;top:.2em;min-width:1.25em;height:1.25em;padding:0 .3em;border-radius:1em;background:var(--c-mensch);color:#151515;font-size:.74em;font-weight:var(--fw-bold);display:grid;place-items:center;transition:transform .4s var(--kurve) .45s}
/* Fenster */
.ws__flaeche{position:absolute;inset:2.7em 0 3.3em 0}
.ws__fenster{position:absolute;border-radius:.8em;border:1px solid rgba(255,255,255,.14);background:rgba(34,34,40,.96);box-shadow:0 1.2em 3em rgba(0,0,0,.6);overflow:hidden;
  transition:left .9s var(--kurve),top .9s var(--kurve),width .9s var(--kurve),opacity .5s var(--kurve),transform .6s var(--kurve)}
.ws__fenster::before{content:"";position:absolute;inset:0 0 auto 0;height:.22em;background:var(--tf,linear-gradient(90deg,#06B6D4,#4B3089))}
.ws__titel{display:flex;align-items:center;gap:.35em;height:2.2em;padding:0 .7em;border-bottom:1px solid rgba(255,255,255,.08);font-size:.84em;font-weight:var(--fw-bold)}
.ws__titel i{width:.72em;height:.72em;border-radius:50%;background:#ff5f57}
.ws__titel i:nth-child(2){background:#febc2e}.ws__titel i:nth-child(3){background:#28c840;margin-right:.6em}
.ws__inhalt{padding:.75em .85em}
.ws__zeile{height:.55em;border-radius:.3em;background:rgba(255,255,255,.13);margin-bottom:.55em}
.ws__zeile--kurz{width:46%}.ws__zeile--mittel{width:72%}
.ws__posten{display:flex;justify-content:space-between;gap:1em;padding:.32em 0;border-bottom:1px solid rgba(255,255,255,.07);font-size:.84em;color:var(--c-text-2)}
.ws__posten b{color:var(--c-text);font-weight:var(--fw-bold)}
.ws__aufgabe{display:flex;align-items:center;gap:.5em;font-size:.84em;color:var(--c-text-2);padding:.3em 0}
.ws__aufgabe::before{content:"";width:.9em;height:.9em;border-radius:.25em;border:1px solid rgba(255,255,255,.3);flex:none}
.ws__aufgabe[data-fertig]::before{background:var(--c-ki);border-color:var(--c-ki)}
/* Endlage (Szene 3–5): Angebot oben links, Aufgaben oben rechts, das Thema darunter — nichts verdeckt das andere */
.ws__fenster--aufgaben{left:31.4em;top:1em;width:11.6em}
.ws__fenster--angebot{left:16.6em;top:1em;width:14.2em;z-index:2}
.ws__fenster--chat{left:18em;top:10.4em;width:23em;z-index:3}
.ws__status{display:flex;align-items:center;gap:.5em;margin-top:.7em;font-size:.82em}
.ws__chip{display:inline-flex;align-items:center;gap:.4em;padding:.25em .7em;border-radius:1em;border:1px solid var(--c-ki-linie);background:var(--c-ki-weich);color:var(--c-ki);font-weight:var(--fw-bold);transition:opacity .4s var(--kurve)}
.ws__stempel{display:inline-flex;align-items:center;gap:.4em;padding:.25em .7em;border-radius:1em;border:1px solid var(--c-mensch-linie);background:var(--c-mensch-weich);color:var(--c-mensch);font-weight:var(--fw-bold);transition:opacity .4s var(--kurve) 1s,transform .4s var(--kurve) 1s}
.ws__nachricht{display:flex;gap:.5em;align-items:flex-start;margin-bottom:.4em;font-size:.8em;transition:opacity .45s var(--kurve),transform .45s var(--kurve)}
.ws__nachricht img{width:1.9em;height:1.9em;border:.14em solid var(--c-ki);flex:none}
.ws__nachricht[data-mensch] img{border-color:var(--c-mensch)}
.ws__nachricht p{padding:.4em .65em;border-radius:.2em .8em .8em .8em;background:rgba(6,182,212,.12);border:1px solid var(--c-ki-linie);color:var(--c-text)}
.ws__nachricht[data-mensch] p{background:rgba(165,148,249,.14);border-color:var(--c-mensch-linie)}
.ws__nachricht p b{display:block;font-size:.84em;color:var(--c-ki);font-weight:var(--fw-bold)}
.ws__nachricht[data-mensch] p b{color:var(--c-mensch)}
/* Alarm */
.ws__alarm{position:absolute;left:50%;top:3.6em;width:23em;margin-left:-11.5em;display:flex;gap:.8em;align-items:flex-start;padding:.85em 1em;border-radius:.9em;border:.14em solid var(--ws-gold);
  background:rgba(40,32,10,.97);z-index:8;box-shadow:0 1.4em 3.4em rgba(0,0,0,.7),0 0 2.4em rgba(233,185,73,.35);transition:opacity .5s var(--kurve),transform .5s var(--kurve)}
.ws__alarm > i{flex:none;width:2.3em;height:2.3em;border-radius:.5em;background:var(--ws-gold);color:#1c1503;display:grid;place-items:center;font-style:normal;font-weight:var(--fw-black);font-size:1.05em}
.ws__alarm b{display:block;color:var(--ws-gold);font-size:1.02em}
.ws__alarm p{font-size:.9em;color:#f4efe0;margin:.15em 0 .35em !important}
.ws__alarm span{display:block;font-size:.8em;color:#d9c78f}
.ws__rahmen{position:absolute;inset:0;border-radius:inherit;border:.2em solid var(--ws-gold);pointer-events:none;z-index:9;opacity:0}
.ws--ab5 .ws__rahmen,.ws:not(.ws--bereit) .ws__rahmen{animation:ws-puls 1.8s ease-in-out infinite}
@keyframes ws-puls{0%,100%{opacity:.15}50%{opacity:.8}}
/* ---- Szenen (nur mit Skript): vor ihrer Szene ausgeblendet ---- */
.ws--bereit:not(.ws--ab2) .ws__themen{transform:translateX(-102%)}
.ws--bereit:not(.ws--ab2) .ws__fluegel--links{left:0;color:var(--c-text-2);background:rgba(255,255,255,.08)}
.ws--bereit:not(.ws--ab2) .ws__fenster--chat{opacity:0;transform:translateY(1.2em) scale(.97)}
.ws--bereit:not(.ws--ab2) .ws__fenster--aufgaben{left:36em;top:2.2em}
.ws--bereit:not(.ws--ab2) .ws__fenster--angebot{left:9em;top:4.5em;width:18em}
.ws--bereit.ws--ab2:not(.ws--ab3) .ws__fenster--angebot{left:42.5em;top:10.5em}
.ws--bereit:not(.ws--ab3) .ws__nachricht[data-ab="3"],.ws--bereit:not(.ws--ab3) .ws__stempel{opacity:0;transform:translateY(.5em)}
.ws--bereit.ws--ab3 .ws__chip{opacity:.4}
.ws--bereit:not(.ws--ab4) .ws__personen{transform:translateX(102%)}
.ws--bereit:not(.ws--ab4) .ws__fluegel--rechts{right:0;color:var(--c-text-2);background:rgba(255,255,255,.08)}
.ws--bereit:not(.ws--ab4) .ws__blase{opacity:0;transform:scale(.6)}
.ws--bereit:not(.ws--ab4) .ws__neu{transform:scale(0)}
.ws--bereit:not(.ws--ab5) .ws__alarm{opacity:0;transform:translateY(-1em) scale(.96)}
.ws--bereit.ws--ab2 .ws__nachricht[data-ab="2b"]{transition-delay:.55s}
.ws--bereit.ws--ab3 .ws__nachricht[data-ab="3"]:last-child{transition-delay:1.1s}
/* Ohne Bewegung: Endbild, Schritte als ruhige Liste */
.ws--statisch .ws__buehne{position:static}
.ws--statisch .ws__schritt{min-height:0;padding-block:1rem}
.ws--statisch *,.ws--statisch .ws__rahmen{transition:none !important;animation:none !important}
.ws--statisch .ws__rahmen{opacity:.5}
@media (max-width:899px){
  .ws{display:block}
  .ws__buehne{top:76px;z-index:3;margin-inline:calc(-1 * var(--rand) + .4rem);padding:.5rem 0 .7rem;background:linear-gradient(var(--c-grund) 88%,transparent)}
  .ws__desktop{aspect-ratio:10/9.4;border-radius:var(--radius)}
  .ws__innen{font-size:2.72cqw}
  .ws__schritt{min-height:64vh;justify-content:flex-end;padding-bottom:16vh}
  .ws__themen{width:13.4em}.ws__personen{width:12.6em}
  .ws__fluegel--links{left:13.4em}.ws__fluegel--rechts{right:12.6em}
  .ws__fenster--aufgaben{display:none}
  .ws__fenster--angebot{left:1.2em;top:.8em;width:17em}
  .ws__fenster--chat{left:1em;top:10.2em;width:22em}
  .ws--bereit:not(.ws--ab2) .ws__fenster--angebot{left:5em;top:5em;width:20em}
  .ws--bereit.ws--ab2:not(.ws--ab4) .ws__fenster--chat{left:14.2em;width:21.6em}
  .ws--bereit.ws--ab2:not(.ws--ab3) .ws__fenster--angebot{left:18.6em;top:.8em}
  .ws--bereit.ws--ab3:not(.ws--ab4) .ws__fenster--angebot{left:14.6em;top:.8em}
  .ws:not(.ws--bereit) .ws__themen,.ws--statisch .ws__themen{transform:translateX(-102%)}
  .ws:not(.ws--bereit) .ws__fluegel--links,.ws--statisch .ws__fluegel--links{left:0}
  .ws--bereit.ws--ab4 .ws__themen{transform:translateX(-102%)}
  .ws--bereit.ws--ab4 .ws__fluegel--links{left:0}
  .ws__blase{width:11.5em}
  .ws__fenster--chat .ws__nachricht:last-child{display:none}   /* mobil: drei Nachrichten, die Freigabe zeigt der Stempel im Angebot */
  .ws__alarm{width:21em;margin-left:-10.5em;top:3.2em}
  .ws--statisch .ws__buehne{margin-inline:0;background:none}
}
@media (prefers-reduced-motion:reduce){ .ws *{transition:none !important;animation:none !important} .ws__rahmen{opacity:.5} }