/* Werkbühne (Chef 11.11.2026): Naomi zeigt bei Bau-, Dokument- und Exposé-Aufträgen live, was sie tut.
   Normale Fragen bleiben ohne Animation. Nur transform/opacity animieren (flüssig auf dem iPhone), keine harten Schatten, keine Emoji. */
.wb { position: fixed; left: 0; right: 0; top: calc(env(safe-area-inset-top) + 64px); bottom: calc(var(--dock-h) + env(safe-area-inset-bottom) + 70px);
  z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 0 18px;
  pointer-events: none; opacity: 0; transform: translateY(14px) scale(.98); filter: blur(6px);
  transition: opacity .55s var(--feder), transform .7s var(--feder), filter .55s ease; }
.wb.an { opacity: 1; transform: none; filter: none; pointer-events: auto; }
.wb-titel { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-3); display: flex; gap: 8px; align-items: center; }
.wb-titel b { width: 6px; height: 6px; border-radius: 50%; background: var(--hell); animation: wbPuls 1.4s ease-in-out infinite; }
.wb-titel em { letter-spacing: .08em; }
@keyframes wbPuls { 0%,100% { opacity: .35; transform: scale(.8) } 50% { opacity: 1; transform: scale(1.15) } }
.wb-flaeche { position: relative; width: min(100%, 420px); aspect-ratio: 3 / 4; max-height: 100%; }
.wb-schritt { font-size: 13px; color: var(--fg-2); min-height: 18px; text-align: center; max-width: 92%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: opacity .3s ease; }

/* Sprechblase / Orb rutscht nach unten, solange die Bühne läuft */
body.wb-laeuft .orb-feld.klein { position: fixed; left: 0; right: 0; top: auto; bottom: calc(var(--dock-h) + env(safe-area-inset-bottom) + 8px); margin: 0;
  background: none; z-index: 5; transition: bottom .6s var(--feder); }
body.wb-laeuft #nachrichten { opacity: 0; transform: translateY(24px); pointer-events: none; transition: opacity .4s ease, transform .5s var(--feder); }
#nachrichten { transition: opacity .4s ease, transform .5s var(--feder); }

/* ---------- Dokument ---------- */
.wb-blatt { position: absolute; inset: 4% 9%; border-radius: 14px; background: linear-gradient(180deg, #fbfaf9, #f1efed); color: #1b1417;
  padding: 7% 8%; overflow: hidden; transform-origin: 50% 100%; box-shadow: 0 30px 60px -30px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.08);
  transform: translateY(30px) scale(.94); opacity: 0; transition: transform .8s var(--feder), opacity .5s ease; }
.wb.an .wb-blatt { transform: none; opacity: 1; }
.wb-blatt .wb-kopf { display: flex; justify-content: space-between; align-items: center; padding-bottom: 8px; border-bottom: 1.5px solid; border-image: var(--verlauf) 1; }
.wb-blatt .wb-marke { font-weight: 700; font-size: 13px; letter-spacing: -.01em; }
.wb-blatt .wb-marke span { background: var(--verlauf); -webkit-background-clip: text; background-clip: text; color: transparent; }
.wb-blatt .wb-ort { font-size: 7.5px; letter-spacing: .14em; color: #8a7f83; text-transform: uppercase; }
.wb-blatt .wb-betreff { margin: 14px 0 8px; font-weight: 650; font-size: 12px; min-height: 15px; }
.wb-blatt .wb-text { font-size: 9.5px; line-height: 1.55; color: #3b3236; white-space: pre-wrap; word-break: break-word; }
.wb-blatt .wb-text::after { content: ''; display: inline-block; width: 1px; height: 10px; background: #a1000b; margin-left: 1px; vertical-align: -1px; animation: wbCursor .9s steps(1) infinite; }
.wb-blatt.fertig .wb-text::after { display: none; }
@keyframes wbCursor { 50% { opacity: 0 } }
.wb-zeile { height: 6px; border-radius: 3px; background: #e4dfdc; margin: 7px 0; transform-origin: 0 50%; transform: scaleX(0); animation: wbZeile .7s var(--feder) forwards; }
@keyframes wbZeile { to { transform: scaleX(1) } }
.wb-blatt .wb-fuss { position: absolute; left: 8%; right: 8%; bottom: 5%; font-size: 6.5px; color: #9b9195; border-top: 1px solid #e6e1df; padding-top: 5px; }

/* Ordner: Blatt schrumpft hinein */
.wb-ordner { position: absolute; left: 50%; bottom: 0; width: 46%; aspect-ratio: 5 / 4; transform: translate(-50%, 40px) scale(.8); opacity: 0;
  transition: transform .7s var(--feder), opacity .4s ease; }
.wb-ordner .wb-ruecken { position: absolute; inset: 0; border-radius: 12px; background: linear-gradient(160deg, #5a0710, #2a070b); }
.wb-ordner .wb-reiter { position: absolute; left: 8%; top: -9%; width: 38%; height: 16%; border-radius: 8px 8px 0 0; background: #5a0710; }
.wb-ordner .wb-vorne { position: absolute; left: 0; right: 0; bottom: 0; height: 74%; border-radius: 12px; background: linear-gradient(160deg, rgba(255,106,85,.9), rgba(161,0,11,.92));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35); z-index: 2; display: flex; align-items: flex-end; padding: 8px 10px; }
.wb-ordner .wb-name { font-size: 11px; font-weight: 600; color: #fff; line-height: 1.25; text-shadow: 0 1px 6px rgba(0,0,0,.25); }
.wb.ablage .wb-ordner { transform: translate(-50%, 0) scale(1); opacity: 1; }
.wb.ablage .wb-blatt { transition: transform .9s cubic-bezier(.6,0,.3,1) .25s, opacity .4s ease .95s; transform: translateY(46%) scale(.22); opacity: 0; }

/* ---------- Exposé ---------- */
.wb-blatt.expose { padding: 0; }
.wb-blatt.expose .wb-bild { height: 34%; background: linear-gradient(120deg, #d9d3cf, #ece7e4, #d9d3cf); background-size: 200% 100%; animation: wbSchimmer 1.6s linear infinite; position: relative; overflow: hidden; }
.wb-blatt.expose .wb-bild i, .wb-blatt.expose .wb-mini i { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease; }
.wb-blatt.expose .wb-bild.da i, .wb-blatt.expose .wb-mini.da i { opacity: 1; }
.wb-blatt.expose .wb-bild i { background: radial-gradient(70% 90% at 70% 20%, #ffd7c6 0%, transparent 55%), linear-gradient(180deg, #8fb3d9 0%, #c8d9ea 48%, #6f7d63 49%, #4f5c45 100%); }
.wb-blatt.expose .wb-bild i::after { content: ''; position: absolute; left: 22%; bottom: 14%; width: 46%; height: 48%; background: linear-gradient(180deg, #efe9e3, #d7cec6);
  clip-path: polygon(0 34%, 50% 0, 100% 34%, 100% 100%, 0 100%); }
.wb-blatt.expose .wb-reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 6px 8%; }
.wb-blatt.expose .wb-mini { height: 54px; border-radius: 6px; position: relative; overflow: hidden; background: linear-gradient(120deg, #d9d3cf, #ece7e4, #d9d3cf); background-size: 200% 100%; animation: wbSchimmer 1.6s linear infinite; }
.wb-blatt.expose .wb-mini i { background: linear-gradient(160deg, #c9b8a6, #8d7a69); }
.wb-blatt.expose .wb-mini:nth-child(2) i { background: linear-gradient(160deg, #b8c6cf, #6d7f8c); }
.wb-blatt.expose .wb-innen { padding: 4% 8%; }
.wb-blatt.expose .wb-preis { font-size: 15px; font-weight: 700; margin: 4px 0; background: var(--verlauf); -webkit-background-clip: text; background-clip: text; color: transparent; }
@keyframes wbSchimmer { to { background-position: -200% 0 } }

/* ---------- Website-Bau mit Agenten ---------- */
.wb-browser { position: absolute; inset: 6% 2% 24%; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid var(--glas-rand);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); overflow: hidden; }
.wb-browser .wb-leiste { height: 22px; display: flex; gap: 5px; align-items: center; padding: 0 9px; border-bottom: 1px solid var(--glas-rand); }
.wb-browser .wb-leiste i { width: 7px; height: 7px; border-radius: 50%; background: var(--fg-4); }
.wb-browser .wb-leiste span { margin-left: 8px; height: 10px; flex: 1; border-radius: 5px; background: rgba(255,255,255,.07); font-size: 8px; line-height: 10px; color: var(--fg-3); padding: 0 6px; overflow: hidden; }
.wb-seite { padding: 10px; display: grid; gap: 8px; }
.wb-baustein { border-radius: 8px; background: rgba(255,255,255,.08); transform: translateY(16px) scale(.96); opacity: 0;
  transition: transform .6s var(--feder), opacity .45s ease; position: relative; overflow: hidden; }
.wb-baustein.da { transform: none; opacity: 1; }
.wb-baustein.wb-held { height: 70px; background: linear-gradient(120deg, rgba(161,0,11,.55), rgba(255,106,85,.35)); }
.wb-baustein.wb-held::before { content: ''; position: absolute; left: 10px; top: 16px; width: 55%; height: 9px; border-radius: 5px; background: rgba(255,255,255,.85); }
.wb-baustein.wb-held::after { content: ''; position: absolute; left: 10px; top: 32px; width: 38%; height: 6px; border-radius: 3px; background: rgba(255,255,255,.5); }
.wb-baustein.wb-navi { height: 14px; }
.wb-baustein.wb-karten { height: 46px; background: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.wb-baustein.wb-karten i { border-radius: 7px; background: rgba(255,255,255,.08); }
.wb-baustein.wb-text { height: 30px; }
.wb-baustein.wb-fuss { height: 16px; background: rgba(255,255,255,.04); }
.wb-agenten { position: absolute; left: 0; right: 0; bottom: 0; height: 20%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.wb-agent { border-radius: 12px; background: var(--glas); border: 1px solid var(--glas-rand); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  font-size: 10.5px; color: var(--fg-3); transition: color .3s ease, border-color .3s ease, transform .4s var(--feder); }
.wb-agent i { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--fg-4); position: relative; }
.wb-agent.aktiv { color: var(--fg); border-color: rgba(255,106,85,.55); transform: translateY(-3px); }
.wb-agent.aktiv i { border-color: transparent; border-top-color: var(--hell); border-right-color: var(--mitte); animation: wbDreh .8s linear infinite; }
.wb-agent.fertig i { border-color: var(--ok); }
@keyframes wbDreh { to { transform: rotate(360deg) } }
.wb-funke { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--hell); box-shadow: 0 0 12px var(--hell); pointer-events: none;
  transition: transform .7s cubic-bezier(.5,0,.2,1), opacity .7s ease; }

/* ---------- Übersicht offene Punkte (Chef 12.11.2026) ---------- */
.wb-ueb { justify-content: flex-start; }
.wb-zahlen { width: min(100%, 460px); display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.wb-zahl { border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid var(--glas-rand); padding: 10px 6px; text-align: center; }
.wb-zahl b { display: block; font-size: 22px; font-variant-numeric: tabular-nums; color: var(--fg); }
.wb-zahl span { font-size: 10.5px; color: var(--fg-3); }
.wb-zahl.hervor { border-color: rgba(255,106,85,.5); }
.wb-zahl.hervor b { background: var(--verlauf); -webkit-background-clip: text; background-clip: text; color: transparent; }
.wb-liste { width: min(100%, 460px); flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; align-content: start; padding-bottom: 8px; scrollbar-width: none; }
.wb-karte { min-width: 0; border-radius: 14px; background: color-mix(in srgb, var(--bg, #0c0c10) 70%, transparent); border: 1px solid var(--glas-rand); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); padding: 11px 12px;
  opacity: 0; transform: translateY(18px); filter: blur(4px); transition: opacity .5s ease, transform .6s var(--feder), filter .5s ease; }
.wb.an .wb-karte { opacity: 1; transform: none; filter: none; }
.wb-kk { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; color: var(--fg); margin-bottom: 5px; }
.wb-kk i { font-style: normal; font-variant-numeric: tabular-nums; color: var(--fg-3); }
.wb-pk { font-size: 11.5px; color: var(--fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.7; }
.wb-pk u { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--fg-4); margin-right: 7px; vertical-align: 1px; }
.wb-pk.chef { color: var(--fg); }
.wb-pk.chef u { background: var(--verlauf); }
.wb-mehr { font-size: 10.5px; color: var(--fg-4); margin-top: 2px; }

@media (prefers-reduced-motion: reduce) { .wb, .wb * { animation: none !important; transition-duration: .01s !important; } }
@media (min-width: 900px) { .wb-flaeche { width: 460px; } }