/* Quelle: src/components/agents/agents.css, --tilt unverändert. */
@property --tilt { syntax: "<angle>"; inherits: true; initial-value: 60deg; }

/* Quelle: src/components/agents/agents.css, .ag-Farb- und Glas-Tokens. */
.aw-root {
  --ink: #101820; --deep: #0d2a3e; --lime: #c6ff4d; --mist: #f4f7f7;
  --leise: rgb(13 42 62 / 62%); --linie: rgb(13 42 62 / 10%);
  --glas: rgb(255 255 255 / 70%); --glas-fokus: rgb(255 255 255 / 88%);
  --glas-rand: rgb(255 255 255 / 85%);
  --glas-schatten: 0 1px 2px rgb(13 42 62 / 6%), 0 10px 28px rgb(13 42 62 / 9%);
  position: relative; width: 100%; height: 100%; min-height: 0;
  color: var(--ink); font: 14px var(--font-sans-stack, var(--font, sans-serif));
  pointer-events: none; user-select: none; perspective: none;
}
/* Quelle: src/components/agents/agents.css; lokale Box-Geometrie ohne Seiten-Reset. */
.aw-root *, .aw-root *::before, .aw-root *::after { box-sizing: border-box; }

/* Quelle: brief/BUILD_SPEC_2026-10-17.md §2.1; Kamerabewegung bleibt Paket C. */
.aw-stage { position: absolute; inset: 0; pointer-events: none; perspective: none; }
/* Quelle: BUILD_SPEC §2.1; Scrollcraft owns the pin, site.js owns these beats. */
.stage { --copy:1; --rise:0; --tilt:22deg; --zoom:.78; --net:1; --settle:0; }
.stage[data-sc-act="pin"] { height:300vh; min-height:0; overflow:visible; }
.stage[data-sc-act="pin"] .stage-pin { position:sticky; top:0; height:100dvh; min-height:0; }
.stage[data-sc-act="pin"] .st-copy,.stage[data-sc-act="pin"] .hero-links { opacity:var(--copy); translate:0 calc((1 - var(--copy)) * -8vh); }
.stage .is-copy-hidden { pointer-events:none; visibility:hidden; }
.stage .st-net { opacity:calc(.52 * var(--net)); }
.stage .aw-stage { z-index:1; }
.stage .st-ico { z-index:3; }
.stage .aw-mode-hero .aw-fit { top:43%; }
/* At 1440x900, 85vh places the upper room edge at ~814px (links + 24px). */
.stage .aw-mode-hero .aw-cam { transform:translate(var(--aw-pointer-x,0px),calc((1 - var(--rise)) * 85vh - var(--settle) * 7vh + var(--aw-pointer-y,0px))) scale(var(--zoom)); }
.stage[data-sc-act="pin"] .aw-caption { grid-area:auto; position:absolute; left:0; right:0; bottom:40px; margin-inline:auto; width:min(900px,calc(100% - 32px)); height:auto; translate:0 calc((1 - var(--settle)) * 12px); opacity:var(--settle); }
.stage .aw-mode-hero .aw-figur { --aw-figure-opacity:0; --aw-figure-y:6px; }
.stage .aw-mode-hero .aw-platz[data-agent="harri"] .aw-figur { --aw-figure-opacity:1; --aw-figure-y:0px; }
/* Quelle: agents/agents.css ag-ring; scrubbed status stays reversible. */
.aw-mode-hero .aw-ring { transition:none; }
.aw-mode-hero .aw-status-working :is(.aw-ring,.aw-pill,.aw-statuspunkt,.aw-schein) { opacity:var(--aw-working,0); }
.aw-mode-hero .aw-status-reviewing :is(.aw-ring,.aw-pill,.aw-statuspunkt) { opacity:var(--aw-reviewing,0); }
/* 27.10.: the office lives: working agents bob and type, rings breathe (compositor-only). */
.aw-mode-hero .aw-status-working { --aw-working:1; }
.aw-mode-hero .aw-status-reviewing { --aw-reviewing:1; }
.aw-mode-hero .aw-ring { transition:opacity .6s ease; }
/* Quelle: BUILD_SPEC §2.1; screen-space overlay above the room. */
.aw-hero-handoff { position:absolute; inset:0; width:100%; height:100%; max-width:none; z-index:2; overflow:visible; pointer-events:none; opacity:0; }
.aw-hero-handoff path { fill:none; stroke:#c6ff4d; stroke-width:2px; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:1; }
/* Quelle: BUILD_SPEC §2.1; phone and reduced-motion layout, no pinned flight. */
.stage[data-sc-act="flow"] { --tilt:60deg; --rise:1; --zoom:1; --settle:1; }
.stage[data-sc-act="flow"] .stage-pin { position:relative; top:auto; height:auto; grid-template-areas:"copy" "links" "world" "caption"; }
.stage[data-sc-act="flow"] .aw-stage { position:relative; inset:auto; grid-area:world; width:100%; height:clamp(300px,70vw,650px); }
.stage[data-sc-act="flow"] .aw-cam { transform:none; }
.stage[data-sc-act="flow"] .aw-caption { margin:0 auto; }
.stage[data-sc-act="flow"] .aw-figur { --aw-figure-opacity:1; --aw-figure-y:0px; }
.stage[data-sc-act="flow"] .aw-hero-handoff { display:none; }
.stage[data-sc-act="flow"] .st-ico { top:0; bottom:auto; height:650px; }
/* Quelle: src/components/agents/agents.css, .ag-buehne; responsive Skalierung separat von .aw-cam. */
.aw-cam { position: absolute; inset: 0; transform-style: preserve-3d; }
/* Quelle: src/components/agents/agents.css, .ag-buehne; Maßstab der unveränderten App-Geometrie. */
.aw-fit { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; transform: scale(var(--aw-scale, 1)); }
/* Quelle: src/components/agents/welt.tsx, rahmen; Raum im verfügbaren Rahmen zentrieren. */
.aw-origin { position: absolute; width: 0; height: 0; transform-style: preserve-3d; transform: translate(var(--aw-center-x, 0px), var(--aw-center-y, 130px)); }

/* Quelle: src/components/agents/agents.css */
.aw-welt { --cx: 0; --cy: 0; --z: 1; position: absolute; left: 0; top: 0; transform-style: preserve-3d; transform: rotateX(var(--tilt)) rotateZ(45deg); }
/* Quelle: src/components/agents/agents.css */
.aw-welt div, .aw-teil, .aw-kasten { transform-style: preserve-3d; }
/* Quelle: src/components/agents/agents.css */
.aw-teil, .aw-kasten { position: absolute; left: 0; top: 0; }
/* Quelle: src/components/agents/agents.css */
.aw-kasten { --o: #fbfdfd; --l: linear-gradient(#f2f6f7, #e8eff1); --r: linear-gradient(#e6edf0, #dbe4e8); }
/* Quelle: src/components/agents/agents.css */
.aw-kasten > i { position: absolute; left: 0; top: 0; transform-origin: 0 0; background: var(--o); }
/* Quelle: src/components/agents/agents.css */
.aw-kasten > i.l { background: var(--l); }
/* Quelle: src/components/agents/agents.css */
.aw-kasten > i.r { background: var(--r); }
/* Quelle: src/components/agents/agents.css */
.aw-kasten > i.rund { border-radius: 50%; box-shadow: inset 0 -3px 0 rgb(13 42 62 / 6%); }
/* Quelle: src/components/agents/agents.css */
.aw-boden { position: absolute; left: 0; top: 0; transform-origin: 0 0; pointer-events: none; }
/* Quelle: src/components/agents/agents.css */
.aw-plakat { position: absolute; left: 0; top: 0; transform-origin: 0 0; transform: rotateZ(-45deg) rotateX(calc(-1 * var(--tilt))); }
/* Quelle: src/components/agents/agents.css */
.aw-plakat > * { position: absolute; left: 0; top: 0; transform: translate(-50%, -100%); }

/* Quelle: src/components/agents/agents.css */
/* Raum */
.aw-bodenplatte { --o: #f7faf9; --l: linear-gradient(#eef3f3, #e3eaec); --r: linear-gradient(#e2e9ec, #d6dfe3); }
/* Quelle: src/components/agents/agents.css */
.aw-parkett {
  background:
    radial-gradient(60% 60% at 30% 25%, rgb(255 255 255 / 90%), transparent 70%),
    repeating-linear-gradient(90deg, rgb(13 42 62 / 3%) 0 1px, transparent 1px 100px),
    repeating-linear-gradient(0deg, rgb(13 42 62 / 3%) 0 1px, transparent 1px 100px),
    linear-gradient(135deg, #fbfcfc, #f1f5f5);
}
/* Quelle: src/components/agents/agents.css */
.aw-wand { --o: #ffffff; --l: linear-gradient(#fbfcfc, #f1f5f6); --r: linear-gradient(#f6f9f9, #edf2f3); }
/* Quelle: src/components/agents/agents.css */
.aw-wandbild { position: absolute; left: 0; top: 0; transform-origin: 0 0; pointer-events: none; }
/* Quelle: src/components/agents/agents.css */
.aw-wandbild.links { background: linear-gradient(90deg, #f3f7f8, #fafcfc 60%, #f4f8f8); }
/* Quelle: src/components/agents/agents.css */
.aw-wandbild.rechts { background: linear-gradient(90deg, #f7fafa, #fdfefe 50%, #f6f9f9); }
/* Quelle: src/components/agents/agents.css */
.aw-wandbild i { position: absolute; display: block; }
/* Quelle: src/components/agents/agents.css */
.aw-wandbild .fenster {
  top: 46px; height: 190px; border-radius: 4px;
  background:
    linear-gradient(90deg, transparent calc(50% - 3px), #fff calc(50% - 3px) calc(50% + 3px), transparent calc(50% + 3px)),
    linear-gradient(170deg, rgb(255 255 255 / 85%), rgb(214 236 246 / 80%) 55%, rgb(225 244 232 / 85%));
  box-shadow: 0 0 0 6px #fff, inset 0 0 0 1px rgb(13 42 62 / 6%), 0 0 0 7px rgb(13 42 62 / 6%);
}
/* Quelle: src/components/agents/agents.css */
.aw-wandbild .tafel {
  top: 60px; height: 140px; border-radius: 4px; background: #fff;
  box-shadow: 0 0 0 5px #eef2f3, 0 0 0 6px rgb(13 42 62 / 8%), 0 6px 12px rgb(13 42 62 / 5%);
  background-image:
    linear-gradient(rgb(13 42 62 / 22%), rgb(13 42 62 / 22%)), linear-gradient(rgb(13 42 62 / 14%), rgb(13 42 62 / 14%)),
    linear-gradient(rgb(13 42 62 / 14%), rgb(13 42 62 / 14%)), linear-gradient(rgb(80 140 210 / 45%), rgb(80 140 210 / 45%)),
    linear-gradient(rgb(80 140 210 / 25%), rgb(80 140 210 / 25%));
  background-size: 110px 3px, 160px 2px, 130px 2px, 56px 40px, 56px 26px;
  background-position: 22px 26px, 22px 48px, 22px 62px, 210px 30px, 210px 82px;
  background-repeat: no-repeat;
}
/* Quelle: src/components/agents/agents.css */
.aw-lichtfleck { background: radial-gradient(closest-side, rgb(255 255 255 / 85%), transparent); }
/* Quelle: src/components/agents/agents.css */
.aw-regal { --o: #f8fafa; --r: linear-gradient(#eef2f3, #e3eaec);
  --l:
    linear-gradient(90deg, transparent 0 14px, #9cc3d5 14px 22px, #e9d3a8 22px 31px, #c9d6dc 31px 37px, transparent 37px 84px, #b8d7c0 84px 94px, #dfe7ea 94px 101px, transparent 101px) 0 26px / 100% 38px no-repeat,
    linear-gradient(90deg, transparent 0 40px, #e9c7b8 40px 49px, #c6d7e3 49px 58px, #f0e2c4 58px 64px, transparent 64px 100px, #a9c9d8 100px 112px, transparent 112px) 0 86px / 100% 38px no-repeat,
    repeating-linear-gradient(180deg, #f4f7f8 0 56px, #dbe3e6 56px 60px);
}
/* Quelle: src/components/agents/agents.css */
.aw-sideboard { --o: #fbfcfc; --l: linear-gradient(90deg, #eef3f4 0 49.6%, #dfe6e9 49.6% 50.4%, #eef3f4 50.4%); }
/* Quelle: src/components/agents/agents.css */
.aw-teppich { border-radius: 50%; background: radial-gradient(closest-side, #d8f1d4 0%, #cdebc9 74%, #e9f8e3 75.5%, #e0f4da 96%, rgb(198 255 77 / 55%) 98%, transparent 100%); box-shadow: 0 0 40px rgb(198 255 77 / 25%); }
/* Quelle: src/components/agents/agents.css */
.aw-teppich2 { border-radius: 18px; background: linear-gradient(135deg, #ecebe6, #e3e1da); box-shadow: inset 0 0 0 10px rgb(255 255 255 / 25%); }
/* Quelle: src/components/agents/agents.css */
.aw-polster { --o: #f6f4f0; --l: linear-gradient(#efece6, #e5e1da); --r: linear-gradient(#e6e2dc, #dad5cd); }
/* Quelle: src/components/agents/agents.css */
.aw-tischchen { --o: #ffffff; }
/* Quelle: src/components/agents/agents.css */
.aw-metall { --o: #c9d3d8; --l: #b8c3c9; --r: #a9b5bc; }
/* Quelle: src/components/agents/agents.css */
.aw-topf { --o: #efe9e1; --l: linear-gradient(#f4efe8, #e8e1d6); --r: linear-gradient(#e8e1d7, #dcd3c6); }
/* Quelle: src/components/agents/agents.css */
.aw-blaetter svg { display: block; width: 58px; height: 64px; filter: drop-shadow(0 4px 4px rgb(13 42 62 / 10%)); }
/* Quelle: src/components/agents/agents.css */
.aw-blaetter.gross svg { width: 104px; height: 116px; }
/* Quelle: src/components/agents/agents.css */
.aw-glaswand {
  position: absolute; left: 0; top: 0; transform-origin: 0 0; pointer-events: none;
  background: linear-gradient(115deg, rgb(200 236 228 / 55%), rgb(190 228 222 / 30%) 45%, rgb(255 255 255 / 55%) 52%, rgb(200 236 228 / 35%));
  border: 3px solid rgb(255 255 255 / 95%); box-shadow: inset 0 0 0 1px rgb(100 170 160 / 35%), 0 0 0 1px rgb(100 170 160 / 25%);
}

/* Quelle: src/components/agents/agents.css */
/* Arbeitsplatz */
.aw-schatten { background: radial-gradient(closest-side, rgb(13 42 62 / 17%), rgb(13 42 62 / 6%) 60%, transparent); }
/* Quelle: src/components/agents/agents.css */
.aw-ring { border-radius: 50%; opacity: 0; transition: opacity 300ms; }
/* Quelle: src/components/agents/agents.css */
.aw-s-braucht_dich .aw-ring { opacity: 1; background: radial-gradient(closest-side, transparent 80%, rgb(255 160 90 / 45%) 83%, transparent 92%); animation: aw-atmen 2.8s ease-in-out infinite; }
/* Quelle: src/components/agents/agents.css */
.aw-korpus { --o: #fff; --l: linear-gradient(#f5f8f9, #eaf0f2); --r: linear-gradient(#e9eff1, #dde5e9); }
/* Quelle: src/components/agents/agents.css */
.aw-platte { --o: linear-gradient(135deg, #ffffff, #f6f9fa); --l: #e9eff1; --r: #dce5e9; }
/* Quelle: src/components/agents/agents.css */
.aw-stuhl { --o: #f4f7f8; --l: linear-gradient(#eaf0f2, #dfe7ea); --r: linear-gradient(#dfe7ea, #d2dce1); }
/* Quelle: src/components/agents/agents.css */
.aw-gehaeuse { --o: #33414b; --l: #26323b; --r: #3a4852; }
/* Quelle: src/components/agents/agents.css */
.aw-tastatur { --o: #eef2f4; --l: #dfe6ea; --r: #d4dde2; }
/* Quelle: src/components/agents/agents.css */
.aw-buecher { --o: #d8e7ee; --l: #c4d9e3; --r: #b5ccd7; }
/* Quelle: src/components/agents/agents.css */
.aw-schein { border-radius: 50%; background: radial-gradient(closest-side, rgb(198 255 77 / 30%), transparent); }
/* Quelle: src/components/agents/agents.css */
.aw-bildschirm {
  position: absolute; left: 0; top: 0; width: 86px; height: 46px; transform-origin: 0 0; overflow: hidden; border-radius: 2px;
  background: linear-gradient(160deg, #1b2a35, #0f1a22); padding: 7px 8px; display: flex; flex-direction: column; gap: 5px;
}
/* Quelle: src/components/agents/agents.css */
.aw-bildschirm b { display: block; height: 3px; border-radius: 2px; background: rgb(255 255 255 / 16%); }
/* Quelle: src/components/agents/agents.css */
.aw-bildschirm b:nth-child(1) { width: 60%; }
/* Quelle: src/components/agents/agents.css */
.aw-bildschirm b:nth-child(2) { width: 82%; }
/* Quelle: src/components/agents/agents.css */
.aw-bildschirm b:nth-child(3) { width: 45%; }
/* Quelle: src/components/agents/agents.css */
.aw-bildschirm b:nth-child(4) { width: 70%; }
/* Quelle: src/components/agents/agents.css */
.aw-s-arbeitet .aw-bildschirm { box-shadow: 0 0 14px rgb(198 255 77 / 45%); background: linear-gradient(160deg, #183041, #0d1d27); }
/* Quelle: src/components/agents/agents.css */
.aw-s-arbeitet .aw-bildschirm b { background: rgb(198 255 77 / 75%); animation: aw-tippen 2.4s ease-in-out infinite; transform-origin: left; }
/* Quelle: src/components/agents/agents.css */
.aw-s-arbeitet .aw-bildschirm b:nth-child(2) { background: rgb(124 199 255 / 70%); animation-delay: -0.6s; }
/* Quelle: src/components/agents/agents.css */
.aw-s-arbeitet .aw-bildschirm b:nth-child(3) { animation-delay: -1.2s; }
/* Quelle: src/components/agents/agents.css */
.aw-s-arbeitet .aw-bildschirm b:nth-child(4) { background: rgb(255 255 255 / 45%); animation-delay: -1.8s; }
/* Quelle: src/components/agents/agents.css */
.aw-s-wartet .aw-bildschirm b { background: rgb(124 170 255 / 55%); }
/* Quelle: src/components/agents/agents.css */
.aw-s-wartet .aw-bildschirm b:nth-child(odd) { margin-left: 10px; }
/* Quelle: src/components/agents/agents.css */
.aw-s-braucht_dich .aw-bildschirm b:first-child { background: rgb(255 170 100 / 85%); }
/* Quelle: src/components/agents/agents.css */
.aw-wippt > span { animation: aw-wippen 2.2s ease-in-out infinite; }

/* Quelle: src/components/agents/agents.css */
/* Figur: weiche Kugel mit Augen */
.aw-kugel {
  position: relative; display: inline-grid; place-items: center; flex-shrink: 0; border-radius: 50%;
  color: #fff; font-weight: 700; line-height: 1; text-shadow: 0 1px 2px rgb(13 42 62 / 25%);
  background:
    radial-gradient(circle at 33% 26%, rgb(255 255 255 / 55%), transparent 30%),
    radial-gradient(circle at 65% 78%, rgb(13 42 62 / 32%), transparent 62%),
    var(--farbe);
  box-shadow: inset -3px -5px 9px rgb(13 42 62 / 22%), inset 2px 3px 6px rgb(255 255 255 / 25%), 0 6px 12px rgb(13 42 62 / 14%);
}
/* Quelle: src/components/agents/agents.css */
.aw-kugel.mit-bild {
  background:
    radial-gradient(circle at 33% 26%, rgb(255 255 255 / 50%), transparent 30%),
    radial-gradient(circle at 65% 78%, rgb(13 42 62 / 35%), transparent 62%),
    var(--bild) center / cover;
}
/* Quelle: src/components/agents/agents.css */
.aw-statuspunkt { position: absolute; right: 2%; top: 4%; width: 22%; height: 22%; min-width: 9px; min-height: 9px; border-radius: 50%; border: 2px solid #fff; box-shadow: none !important; }
/* Quelle: src/components/agents/agents.css */
.aw-kugel-sub { background: radial-gradient(circle at 34% 28%, #fff, #eef2f4 60%, #d3dce1); box-shadow: inset -2px -4px 6px rgb(13 42 62 / 14%), 0 4px 8px rgb(13 42 62 / 12%); }
/* Quelle: src/components/agents/agents.css */
.aw-pet > * { filter: drop-shadow(0 3px 3px rgb(13 42 62 / 18%)); }
/* Quelle: src/components/agents/agents.css */
.aw-sub-ring { border-radius: 50%; border: 2px dashed rgb(13 42 62 / 22%); }
/* Quelle: src/components/agents/agents.css */
.aw-sockel { --o: #fff; --l: linear-gradient(#f3f6f7, #e7edf0); --r: linear-gradient(#e7edf0, #dae2e6); }

/* Quelle: src/components/agents/agents.css */
.aw-schild {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 8px; border-radius: 14px; white-space: nowrap; text-align: left;
  transition: box-shadow 200ms, transform 200ms;
}
/* Quelle: src/components/agents/agents.css */
.aw-schild::after {
  content: ""; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px; transform: translateX(-50%) rotate(45deg);
  background: inherit; border-right: 1px solid var(--glas-rand); border-bottom: 1px solid var(--glas-rand); backdrop-filter: none; border-radius: 0 0 3px 0;
}
/* Quelle: src/components/agents/agents.css */
.aw-schild-text b { display: block; font-size: 15px; font-weight: 700; line-height: 1.2; }
/* Quelle: src/components/agents/agents.css */
.aw-schild-text small { display: block; font-size: 12px; color: var(--leise); line-height: 1.3; }

/* Quelle: src/components/agents/agents.css */
.aw-subschild { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 10px; border-radius: 12px; white-space: nowrap; }
/* Quelle: src/components/agents/agents.css */
.aw-subschild b { display: block; font-size: 13px; font-weight: 700; }
/* Quelle: src/components/agents/agents.css */
.aw-subschild small { display: block; font-size: 11px; color: var(--leise); }

/* Quelle: src/components/agents/agents.css */
/* Status */
.aw-pill { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
/* Quelle: src/components/agents/agents.css */
.aw-pill-arbeitet { background: #def5e6; color: #1d6e44; }
/* Quelle: src/components/agents/agents.css */
.aw-pill-braucht_dich { background: #ffeadd; color: #b4501a; }
/* Quelle: src/components/agents/agents.css */
.aw-pill-bereit { background: #edf1f3; color: #55656f; }
/* Quelle: src/components/agents/agents.css */
.aw-pill-wartet { background: #e3edff; color: #2c5ca8; }
/* Quelle: src/components/agents/agents.css */
.aw-punkt { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
/* Quelle: src/components/agents/agents.css */
.aw-punkt-arbeitet { background: #2fb36a; box-shadow: 0 0 0 3px rgb(47 179 106 / 18%); }
/* Quelle: src/components/agents/agents.css */
.aw-punkt-braucht_dich { background: #f08a3c; box-shadow: 0 0 0 3px rgb(240 138 60 / 20%); }
/* Quelle: src/components/agents/agents.css */
.aw-punkt-bereit { background: #9aa8b0; }
/* Quelle: src/components/agents/agents.css */
.aw-punkt-wartet { background: #4c84e0; box-shadow: 0 0 0 3px rgb(76 132 224 / 18%); }

/* Quelle: src/components/agents/agents.css, Glas-Grundmaterial, auf übertragene Schilder begrenzt. */
.aw-schild, .aw-subschild {
  /* Kein backdrop-filter: im 3D-Raum muss er jeden Scroll-Frame neu blurren und ließ das Büro ruckeln. */
  background: var(--glas-fokus);
  border: 1px solid var(--glas-rand); box-shadow: var(--glas-schatten);
}
/* Quelle: brief/BUILD_SPEC_2026-10-17.md §2.1; Landung durch Paket C steuerbar. */
.aw-figur { opacity: var(--aw-figure-opacity, 1); translate: 0 var(--aw-figure-y, 0px); }
/* Quelle: src/components/agents/arbeitsplatz.tsx, Figur; §2.1 verlegt den Anker in den Logo-Kopf. */
.aw-kugel > .aw-anker { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
/* Quelle: src/components/agents/arbeitsplatz.tsx, Schild; dauerhaft über dem Kopf statt Hover-Overlay. */
.aw-plakat > .aw-figur-schild { transform: translate(-50%, calc(-100% - 74px)); }
/* Quelle: src/components/agents/arbeitsplatz.tsx, SubSchild; kleinere App-Subagent-Figur (36px). */
.aw-sub-figur > .aw-figur-schild { transform: translate(-50%, calc(-100% - 48px)); }
/* Quelle: src/components/agents/agents.css, .ag-pill; leere Statusfelder bleiben unsichtbar. */
.aw-pill[hidden], .aw-task:empty { display: none; }
/* Quelle: src/components/agents/agents.css, .ag-schein; Status aus der Modul-API. */
.aw-platz .aw-schein { opacity: 0; }
/* Quelle: src/components/agents/agents.css, .ag-s-arbeitet, .ag-gewaehlt .ag-ring; Lime auch ohne Auswahl. */
.aw-status-working .aw-ring, .aw-status-reviewing .aw-ring {
  opacity: 1;
  background: radial-gradient(closest-side, transparent 78%, rgb(198 255 77 / 85%) 80%, rgb(198 255 77 / 35%) 88%, transparent);
}
/* Quelle: src/components/agents/agents.css, .ag-schein; Working-Material unverändert. */
.aw-status-working .aw-schein { opacity: 1; }

/* Quelle: brief/BUILD_SPEC_2026-10-17.md §2.3; Welt-Ausschnitt, keine zusätzliche Scroll-Laufzeit. */
.aw-handoff { position: relative; height: clamp(360px, 28vw, 440px); overflow: hidden; }
/* Quelle: raum.tsx and arbeitsplatz.tsx; Demo-Freigabe §0.3, focused crop.
   Keep the App floor; omit the sofa/furnishings instead of cutting through them. */
.aw-mode-handoff .aw-raum > :not(.aw-bodenplatte):not(.aw-parkett) { display:none; }
.aw-mode-handoff .aw-figur-schild { width:196px; white-space:normal; }
.aw-mode-handoff .aw-schild-text { min-width:0; }
.aw-mode-handoff .aw-figur-schild b { font-size:15px; }
.aw-mode-handoff .aw-figur-schild small,.aw-mode-handoff .aw-pill { font-size:14px; }
.aw-mode-handoff .aw-figur-schild .aw-pill { padding:3px 6px; }
.aw-mode-handoff .aw-figur-schild > .aw-pill { display:none; }
.aw-mode-handoff .aw-plakat > .aw-figur-schild { transform:translate(-50%,calc(-100% - 74px + var(--aw-label-offset,0px))) scale(var(--aw-label-scale,1)); transform-origin:50% 100%; }
.aw-mode-handoff .aw-sub-figur > .aw-figur-schild { transform:translate(-50%,calc(-100% - 48px + var(--aw-label-offset,0px))) scale(var(--aw-label-scale,1)); }
.aw-mode-handoff .aw-plakat > .aw-review-done { font-size:14px; transform:translate(-50%,12px) scale(var(--aw-label-scale,1)); transform-origin:50% 0; }
/* Quelle: brief/BUILD_SPEC_2026-10-17.md §2.3; Platz für die Zeile unter dem Ausschnitt. */
.aw-mode-handoff { overflow: hidden; }
/* Quelle: src/components/agents/raum.tsx, Linien; §2.3 Bogen, Lime, 2px, runde Enden. */
.aw-handoff-line { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; transform: translateZ(64px); pointer-events: none; }
/* Quelle: brief/BUILD_SPEC_2026-10-17.md §2.3; 3.6s bis 4.6s zeichnet die Übergabe. */
.aw-handoff-line path {
  fill: none; stroke: var(--lime); stroke-width: 2px; stroke-linecap: round;
  vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: aw-handoff-draw 6.5s linear infinite;
}
/* Quelle: brief/BUILD_SPEC_2026-10-17.md §2.3; Subagent ab 1.2s, Ausblenden ab 5.6s. */
.aw-mode-handoff .aw-test-runner { animation: aw-handoff-sub 6.5s linear infinite; }
/* Quelle: brief/BUILD_SPEC_2026-10-17.md §2.3; Test runner arbeitet ab 2.4s. */
.aw-test-runner .aw-task, .aw-test-runner .aw-pill, .aw-test-runner .aw-statuspunkt { animation: aw-handoff-tests 6.5s steps(1, end) infinite; }
/* Quelle: src/components/agents/agents.css, .ag-sub-ring; §2.3 Working in Lime. */
.aw-test-runner .aw-sub-ring { border-color: var(--lime); animation: aw-handoff-tests 6.5s steps(1, end) infinite; }
/* Quelle: brief/BUILD_SPEC_2026-10-17.md §2.3; Claude Code überprüft ab 4.6s. */
.aw-flow-claude .aw-task, .aw-flow-claude .aw-pill, .aw-flow-claude .aw-ring, .aw-flow-claude .aw-statuspunkt { animation: aw-handoff-review 6.5s steps(1, end) infinite; }
/* Quelle: brief/BUILD_SPEC_2026-10-17.md §2.3; Abschluss-Chip ab 5.6s. */
.aw-plakat > .aw-review-done {
  transform: translate(-50%, 12px); background: #def5e6; color: #1d6e44;
  animation: aw-handoff-done 6.5s steps(1, end) infinite;
}
/* Quelle: brief/BUILD_SPEC_2026-10-17.md §2.3; Zeile unter dem Ausschnitt. */
.aw-example { position: absolute; bottom: 10px; left: 0; width: 100%; text-align: center; font-size: 12px; color: var(--leise); }

/* Quelle: src/components/agents/agents.css, ag-tippen; unveränderte App-Bewegung. */
@keyframes aw-tippen { 0%, 100% { transform: scaleX(1); opacity: 0.9; } 50% { transform: scaleX(0.55); opacity: 0.55; } }
/* Quelle: src/components/agents/agents.css, ag-wippen; unveränderte App-Bewegung. */
@keyframes aw-wippen { 0%, 100% { transform: translate(-50%, -100%); } 50% { transform: translate(-50%, calc(-100% - 3px)); } }
/* Quelle: src/components/agents/agents.css, ag-atmen; unveränderte App-Bewegung. */
@keyframes aw-atmen { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
/* Quelle: brief/BUILD_SPEC_2026-10-17.md §2.3; Prozentwerte = Sekunden / 6.5. */
@keyframes aw-handoff-sub {
  0%, 18.4615% { opacity: 0; transform: scale(0.6); animation-timing-function: cubic-bezier(0.22, 0.8, 0.24, 1); }
  23.0769%, 86.1538% { opacity: 1; transform: scale(1); animation-timing-function: cubic-bezier(0.22, 0.8, 0.24, 1); }
  92.3077%, 100% { opacity: 0; transform: scale(0.6); }
}
/* Quelle: brief/BUILD_SPEC_2026-10-17.md §2.3; 2.4 / 6.5 = 36.9231%. */
@keyframes aw-handoff-tests { 0% { opacity: 0; } 36.9231%, 100% { opacity: 1; } }
/* Quelle: brief/BUILD_SPEC_2026-10-17.md §2.3; 3.6 / 6.5 = 55.3846%, 4.6 / 6.5 = 70.7692%. */
@keyframes aw-handoff-draw { 0%, 55.3846% { stroke-dashoffset: 1; opacity: 0; } 55.4% { opacity: 1; } 70.7692%, 100% { stroke-dashoffset: 0; opacity: 1; } }
/* Quelle: brief/BUILD_SPEC_2026-10-17.md §2.3; 4.6 / 6.5 = 70.7692%. */
@keyframes aw-handoff-review { 0% { opacity: 0; } 70.7692%, 100% { opacity: 1; } }
/* Quelle: brief/BUILD_SPEC_2026-10-17.md §2.3; 5.6 / 6.5 = 86.1538%. */
@keyframes aw-handoff-done { 0% { opacity: 0; } 86.1538%, 100% { opacity: 1; } }

/* Quelle: brief/BUILD_SPEC_2026-10-17.md §2.3; IntersectionObserver schaltet ausschließlich .is-playing. */
.aw-mode-handoff *, .aw-mode-handoff *::before, .aw-mode-handoff *::after { animation-play-state: paused !important; }
/* Quelle: brief/BUILD_SPEC_2026-10-17.md §2.3; Weiterlauf an derselben Stelle nach Sichtbarkeit. */
.aw-mode-handoff.is-playing *, .aw-mode-handoff.is-playing *::before, .aw-mode-handoff.is-playing *::after { animation-play-state: running !important; }

/* Quelle: src/components/agents/agents.css und brief/BUILD_SPEC_2026-10-17.md §2.1/§2.3; ruhiger Endzustand. */
@media (prefers-reduced-motion: reduce) {
  /* Quelle: src/components/agents/agents.css, Reduced Motion. */
  .aw-root *, .aw-root *::before, .aw-root *::after { animation: none !important; transition: none !important; }
  /* Quelle: brief/BUILD_SPEC_2026-10-17.md §2.1; alle Figuren sichtbar, Neigung 60deg. */
  .aw-root { --tilt: 60deg !important; }
  /* Quelle: brief/BUILD_SPEC_2026-10-17.md §2.1; keine Landebewegung. */
  .aw-figur { opacity: 1 !important; translate: none !important; }
  /* Quelle: brief/BUILD_SPEC_2026-10-17.md §2.3; Abschluss mit allen Schildern sichtbar. */
  .aw-mode-handoff .aw-test-runner { opacity: 1; transform: scale(1); }
  /* Quelle: brief/BUILD_SPEC_2026-10-17.md §2.3; gezeichneter Bogen im Endzustand. */
  .aw-handoff-line path { stroke-dashoffset: 0; opacity: 1; }
  /* Quelle: brief/BUILD_SPEC_2026-10-17.md §2.3; Endzustand mit allen Aufgaben und Review done. */
  .aw-mode-handoff .aw-task, .aw-mode-handoff .aw-pill, .aw-mode-handoff .aw-statuspunkt, .aw-mode-handoff .aw-ring { opacity: 1; }
}