monitor/html/css/office.css

/* Buero-Visualisierung (Phase 2, statische Szene). Bewusst ohne UI-Framework, siehe
   Visualization.md Abschnitt 5. Farbschema hell/freundlich (F9: "Zeichentrick"-Anmutung). */

:root {
  --color-floor: #eef2f7;
  --color-wall: #cfe0f0;
  --color-wall-side: #bcd3ea;
  --color-door: #8fb8dd;
  --color-board-frame: #94622f;
  --color-note: #fde68a;
  --color-note-border: #d9b34f;
  --color-note-stack-badge: #d97706;
  --color-monitor-frame: #2b2f38;
  --color-monitor-screen: #10131a;
  --color-monitor-placeholder: #1a2436;
  --color-desk-table: #b98a54;
  --color-desk-chair: #6b7280;
  --color-desk-screen-idle: #3a3f4b;
  --color-text: #1f2937;
  --color-text-inverse: #f8fafc;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Segoe UI", Verdana, Arial, sans-serif;
  background: #dbe7f3;
  color: var(--color-text);
}

header.office-header {
  padding: 16px 24px;
  display: flex;
  align-items: baseline;
  gap: 16px;
}

header.office-header h1 {
  margin: 0;
  font-size: 1.4rem;
}

header.office-header p {
  margin: 0;
  color: #475569;
  font-size: 0.9rem;
}

#office-scene {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  padding: 0 16px 32px;
}

.office-svg {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.25);
}

.floor {
  fill: var(--color-floor);
}

.wall {
  fill: var(--color-wall);
}

.wall-side {
  fill: var(--color-wall-side);
}

.door {
  fill: var(--color-door);
  stroke: #5f86ab;
  stroke-width: 3;
}

.wall-label {
  fill: #f8fafc;
  font-size: 22px;
  font-weight: 600;
}

/* Kanban-Board */

.board-frame {
  fill: #7a5230;
  stroke: var(--color-board-frame);
  stroke-width: 6;
}

.board-column-label {
  fill: var(--color-text-inverse);
  font-size: 16px;
  font-weight: 600;
}

.board-column-divider {
  stroke: rgba(255, 255, 255, 0.25);
  stroke-width: 2;
}

.note {
  fill: var(--color-note);
  stroke: var(--color-note-border);
  stroke-width: 2;
}

.note-stack-badge {
  fill: var(--color-note-stack-badge);
  stroke: #92400e;
  stroke-width: 2;
}

.note-stack-count {
  fill: #ffffff;
  font-size: 20px;
  font-weight: 700;
}

/* Monitor-Wand */

.monitor-frame {
  fill: var(--color-monitor-frame);
}

.monitor-screen {
  fill: var(--color-monitor-screen);
}

.monitor-screen-placeholder {
  fill: var(--color-monitor-placeholder);
}

.monitor-event-line {
  font-family: "Consolas", "Courier New", monospace;
  font-size: 13px;
}

.severity-warning {
  fill: #facc15;
}

.severity-error {
  fill: #f87171;
}

.system-tile-bg {
  fill: #1e293b;
}

.system-tile-bar {
  fill: #334155;
}

.system-tile-led {
  fill: #64748b;
}

.status-ok .system-tile-led {
  fill: #4ade80;
}

.status-error .system-tile-led {
  fill: #f87171;
}

.system-tile-label {
  fill: var(--color-text-inverse);
  font-size: 12px;
}

.monitor-placeholder-text {
  fill: #64748b;
  font-size: 15px;
}

/* Schreibtische */

.desk-table {
  fill: var(--color-desk-table);
  stroke: #8a6238;
  stroke-width: 3;
}

.desk-screen {
  fill: var(--color-desk-screen-idle);
  stroke: #1f2430;
  stroke-width: 2;
}

.desk-screen.pose-working {
  fill: #7dd3fc;
}

.desk-chair {
  fill: var(--color-desk-chair);
}

.person-head {
  fill: #f3d9b1;
  stroke: #d8b98a;
  stroke-width: 1.5;
}

.person-body {
  fill: var(--role-color, #94a3b8);
}

.desk-name {
  fill: #334155;
  font-size: 14px;
  font-weight: 600;
}

.desk-name-empty {
  fill: #94a3b8;
  font-style: italic;
  font-weight: 400;
}

.desk-deco-star {
  fill: #fbbf24;
}

.desk-deco-flower circle {
  fill: #f9a8d4;
}

.desk-deco-flower-center {
  fill: #fde047 !important;
}

.desk-deco-check {
  fill: none;
  stroke: #22c55e;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.desk-empty .desk-chair {
  opacity: 0.5;
}