feat(web): EYT-147 Dispositionswerkbank Slice 1 — die Woche ist die Werkbank

apps/web/app/globals.css

@@ -199,10 +199,6 @@ body {
   font: inherit;
 }
 
-[data-testid="planungsfenster-liste"] {
-  padding-inline-start: 1.25rem;
-}
-
 /*
  * Status nie NUR über Farbe (EYT-41): Text + Symbol tragen die
  * Information, Farbe verstärkt sie lediglich.
@@ -697,3 +693,304 @@ body {
   display: grid;
   align-content: start;
 }
+
+/* ============================================================
+ * EYT-147 — Dispositionswerkbank Slice 1: die Woche ist das Produkt
+ *
+ * Nur Anordnung und Dichte; jede Farbe kommt aus den Rollen von
+ * `@easytree/ui`. Kein neues Farbliteral (basisdesign-tokens.test.ts
+ * verbietet es), keine Animation.
+ * ============================================================ */
+
+/*
+ * Die Planungsflaeche bekommt die Breite, die eine Wochenachse braucht —
+ * NUR sie: Start- und Kostenflaeche behalten die zentrierte 60rem-Spalte,
+ * und die vermessene Geometrie der Startseite (shell-smoke) bleibt
+ * unberuehrt, weil `.werkbank` dort nicht vorkommt.
+ */
+.eyt-app-shell__main:has(.werkbank) {
+  max-width: 110rem;
+}
+
+/*
+ * Kopf und Wochennavigation bilden ab Werkbankbreite EINE Toolbar-Zeile:
+ * links die Antwort „was plane ich" (h1 + Zeitraum), rechts die Bedienung.
+ * Die DOM-Reihenfolge Kopf → Navigation → Flaeche bleibt unveraendert —
+ * hier wird nur angeordnet.
+ */
+@media (min-width: 64rem) {
+  .werkbank {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    align-items: end;
+    column-gap: var(--space);
+  }
+
+  .werkbank__kopf {
+    grid-column: 1;
+  }
+
+  .werkbank > .eyt-date-range {
+    grid-column: 2;
+  }
+
+  .werkbank__flaeche {
+    grid-column: 1 / -1;
+  }
+
+  /* In der Toolbar stehen Woche, Zeitraum und Wege in einer Zeile. */
+  .werkbank .eyt-date-range__range,
+  .werkbank .eyt-date-range__detail {
+    flex-basis: auto;
+  }
+}
+
+/* Statuszeile der Wochenflaeche: links der Gegenstand, rechts der Stand. */
+.werkbank-fenster__status {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 0.25rem var(--space);
+}
+
+.werkbank-fenster__titel h2 {
+  margin: 0;
+  font-size: 1.0625rem;
+}
+
+.werkbank-fenster__zone,
+.werkbank-fenster__version {
+  margin: 0;
+  font-size: 0.8125rem;
+  color: var(--eyt-text-secondary);
+}
+
+.werkbank-fenster__stand {
+  display: grid;
+  gap: 0.125rem;
+  justify-items: end;
+  text-align: right;
+}
+
+.werkbank-fenster__stand > p {
+  margin: 0;
+}
+
+/* Aktionszeile: Publish-Baustein (mit seinen Meldungen) und der Ausloeser
+   des Inspectors. Genau EINE der beiden Schaltflaechen ist primaer. */
+.werkbank-fenster__aktionen {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: var(--space);
+  margin-block: 0.75rem;
+}
+
+.werkbank-fenster__aktionen .eyt-planung-publish {
+  flex: 1 1 24rem;
+  min-width: 0;
+}
+
+.eyt-planung-publish__grenze {
+  margin: 0.25rem 0;
+  font-size: 0.8125rem;
+  color: var(--eyt-text-secondary);
+  max-width: 60rem;
+}
+
+/* Flaeche: Wochenraster, daneben — wenn offen — der Inspector. */
+.werkbank-fenster__flaeche {
+  display: grid;
+  gap: var(--space);
+  align-items: start;
+}
+
+@media (min-width: 64rem) {
+  .werkbank-fenster[data-inspector="offen"] .werkbank-fenster__flaeche {
+    grid-template-columns: minmax(0, 1fr) 22rem;
+  }
+}
+
+/*
+ * Das Wochenraster: sieben Tage als raeumliche Achse. Unterhalb der
+ * Werkbankbreite (u. a. 200-%-Zoom-Aequivalent 720 px) stapeln die Tage
+ * untereinander — kein horizontales Seitenscrollen.
+ */
+.wochenraster {
+  display: grid;
+  gap: 1px;
+  border: 1px solid var(--eyt-border-default);
+  border-radius: var(--radius);
+  background: var(--eyt-border-default);
+  overflow: hidden;
+}
+
+@media (min-width: 64rem) {
+  .wochenraster {
+    grid-template-columns: repeat(7, minmax(0, 1fr));
+  }
+}
+
+.wochenraster__tag {
+  background: var(--eyt-bg-canvas);
+  padding: 0.5rem;
+  min-height: 8rem;
+  display: grid;
+  grid-template-rows: auto 1fr;
+  gap: 0.375rem;
+  min-width: 0;
+}
+
+.wochenraster__tagkopf {
+  margin: 0;
+  font-size: 0.8125rem;
+  font-weight: 650;
+}
+
+.wochenraster__tagdatum {
+  font-weight: 400;
+  color: var(--eyt-text-secondary);
+  font-variant-numeric: tabular-nums;
+}
+
+.wochenraster__frei {
+  margin: 0;
+  color: var(--eyt-text-secondary);
+  text-align: center;
+  align-self: center;
+}
+
+.wochenraster__einsaetze {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: grid;
+  gap: 0.375rem;
+  align-content: start;
+}
+
+.wochenraster__ausserhalb {
+  grid-column: 1 / -1;
+  background: var(--eyt-state-danger-bg);
+  padding: 0.5rem;
+}
+
+.wochenraster__ausserhalb > h3 {
+  margin: 0 0 0.375rem;
+  font-size: 0.8125rem;
+  color: var(--eyt-state-danger-text);
+}
+
+/* Einsatzkarte: Zeit, Baustelle, Person — kompakt, Zustand ueber Form. */
+.einsatzkarte {
+  background: var(--eyt-bg-surface);
+  border: 1px solid var(--eyt-border-default);
+  border-radius: calc(var(--radius) - 4px);
+  padding: 0.5rem 0.625rem;
+  display: grid;
+  gap: 0.125rem;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.einsatzkarte__zeit {
+  font-size: 0.8125rem;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+
+.einsatzkarte__baustelle {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+.einsatzkarte__person {
+  font-size: 0.8125rem;
+  color: var(--eyt-text-secondary);
+}
+
+/* Planstand als Form, nicht nur als Farbe: Entwurfskarten gestrichelt,
+   veroeffentlichte mit durchgehender linker Kante (Basisdesign §3.1). */
+.werkbank-fenster[data-stand="entwurf"] .einsatzkarte,
+.werkbank-fenster[data-stand="entwurf-ueber-veroeffentlicht"] .einsatzkarte {
+  border-style: dashed;
+}
+
+.werkbank-fenster[data-stand="veroeffentlicht"] .einsatzkarte {
+  border-inline-start: 3px solid var(--eyt-state-published-text);
+}
+
+/* Der nichtmodale Erstellungs-Inspector. */
+.werkbank-inspector {
+  border: 1px solid var(--eyt-border-default);
+  border-radius: var(--radius);
+  background: var(--eyt-bg-surface);
+  padding: var(--space);
+}
+
+.werkbank-inspector__kopf {
+  display: flex;
+  justify-content: flex-end;
+  margin-block-end: 0.25rem;
+}
+
+/*
+ * Das Einsatzformular im Inspector traegt das Basisdesign v2 (PO-Review-
+ * Reparatur EYT-147): beschriftete Felder statt nackter Browser-Controls.
+ * Reine Darstellung — native Semantik, Testanker und die gesamte
+ * Validierungs-/Zeitzonenlogik liegen unveraendert in
+ * `planning-assignment-form.tsx`; jede Farbe ist eine Tokenrolle.
+ */
+.werkbank-inspector h3 {
+  margin: 0 0 0.75rem;
+  font-size: 0.9375rem;
+}
+
+.einsatzformular {
+  gap: 0.75rem;
+}
+
+.einsatzformular__feld {
+  display: grid;
+  gap: 0.25rem;
+  min-width: 0;
+}
+
+.einsatzformular__feld > label {
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: var(--eyt-text-secondary);
+}
+
+.einsatzformular :is(select, input) {
+  padding: 0.5rem 0.625rem;
+  border: 1px solid var(--eyt-border-default);
+  border-radius: calc(var(--radius) - 4px);
+  background: var(--eyt-bg-canvas);
+  color: var(--eyt-text-primary);
+}
+
+/* Beginn und Ende sind EIN Zeitraum — sie stehen nebeneinander. */
+.einsatzformular__zeiten {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.5rem;
+}
+
+.einsatzformular__meldung {
+  margin: 0.75rem 0 0;
+  padding: 0.5rem 0.625rem;
+  border-radius: calc(var(--radius) - 4px);
+  font-size: 0.875rem;
+}
+
+.einsatzformular__meldung[data-state="erfolg"] {
+  background: var(--eyt-state-published-bg);
+  color: var(--eyt-state-published-text);
+}
+
+.einsatzformular__meldung[data-state="fehler"] {
+  background: var(--eyt-state-danger-bg);
+  color: var(--eyt-state-danger-text);
+}