Workspace: Kalender mit Terminen, Calls und Aufgaben-Fristen

/workspace/kalender.html -- letzter grosser Baustein aus Phase 1.

Zeigt zwei Quellen in EINER Ansicht, wie im Konzept gefordert
("Kalender & Calls" neben "Deadlines" und "Wiedervorlagen"):
  * eigene Termine (Arten: Call, Termin, Review)
  * Fristen offener Aufgaben, nur lesend eingeblendet

Nach Tagen gruppiert statt als Monatsraster: Es geht um wenige, dafuer
konkrete Termine. Eine Liste liest sich dabei besser und funktioniert auf
dem Handy ohne Umbau. Zeitraum umschaltbar: 14 / 30 / 90 Tage, wobei 90
den 90-Tage-Plan aus dem Konzept abdeckt.

Sichtbarkeit wie bei den Aufgaben, wieder an einer Stelle definiert.
Geprueft mit drei Konten:
  Chef 2 Termine + 2 Fristen | Luna 2 + 1 | Sam 0 + 1
Die Fristen folgen dabei exakt der Aufgaben-Regel -- Sam sieht nur seine.

Loeschen darf das Management und wer den Termin selbst angelegt hat.
Sonst koennte ein Creator einen Call absagen, den das Management
angesetzt hat. Geprueft: Luna auf Chefs Call 403, auf ihren eigenen 200,
Sam sieht ihn gar nicht (404).

Weiteres:
- Ort/Link wird nur dann als Verweis dargestellt, wenn er wirklich mit
  http(s) beginnt -- sonst liesse sich javascript: einschleusen
- Zeitpunkt und Dauer werden geprueft (kaputtes Datum 400,
  5000 Minuten 400)
- Beginn steht als lokale Zeit ohne Zeitzone: Alle Beteiligten sitzen in
  derselben, eine falsch umgerechnete Uhrzeit waere schlimmer als gar
  keine Umrechnung

workspace/assets/css/kalender.css

@@ -0,0 +1,76 @@
+/* ===================================================================
+   Kalender. Nach Tagen gruppiert statt als Monatsraster: Es geht um
+   wenige, dafür konkrete Termine -- eine Liste liest sich dabei besser
+   und funktioniert auf dem Handy ohne Umbau.
+   =================================================================== */
+
+.zeitraum { display: flex; gap: 8px; margin: 0 0 22px; flex-wrap: wrap; }
+.zeitraum .schritt[aria-pressed="true"] {
+  background: rgba(63, 189, 245, .14);
+  border-color: rgba(63, 189, 245, .55);
+  color: var(--text);
+}
+
+.tag { margin-bottom: 22px; }
+
+.tag__kopf {
+  display: flex; align-items: baseline; gap: 10px;
+  margin: 0 2px 9px; padding-bottom: 7px;
+  border-bottom: 1px solid var(--rand);
+}
+.tag__datum { font-weight: 700; font-size: .95rem; }
+.tag__wochentag { font-size: .8rem; color: var(--text-still); }
+.tag__marke {
+  margin-left: auto; padding: 1px 9px; border-radius: 999px;
+  font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
+  background: rgba(63, 189, 245, .16); color: #7fd2fb;
+}
+/* Vergangene Tage treten zurück, bleiben aber lesbar. */
+.tag[data-vergangen="ja"] .tag__datum,
+.tag[data-vergangen="ja"] .tag__wochentag { color: var(--text-still); }
+
+.eintrag {
+  display: grid; gap: 3px 14px;
+  grid-template-columns: 78px 1fr auto;
+  align-items: start;
+  padding: 11px 14px; margin-bottom: 8px;
+  background: rgba(255, 255, 255, .03);
+  border: 1px solid var(--rand);
+  border-left: 3px solid var(--rand);
+  border-radius: var(--radius-klein);
+}
+.eintrag[data-art="call"]   { border-left-color: var(--akzent); }
+.eintrag[data-art="review"] { border-left-color: #e0a33c; }
+.eintrag[data-art="termin"] { border-left-color: var(--violett); }
+.eintrag[data-art="frist"]  { border-left-color: #d8656e; background: rgba(216, 101, 110, .05); }
+.eintrag[data-erledigt="ja"] { opacity: .5; }
+
+.eintrag__zeit {
+  font-variant-numeric: tabular-nums; font-weight: 600; font-size: .88rem;
+  color: var(--text-leise);
+}
+.eintrag__titel { font-weight: 600; font-size: .93rem; }
+.eintrag__zusatz {
+  grid-column: 2; display: flex; flex-wrap: wrap; gap: 8px;
+  font-size: .78rem; color: var(--text-still);
+}
+.eintrag__zusatz a { color: var(--akzent); }
+.eintrag__knoepfe { display: flex; gap: 6px; align-items: center; }
+
+.eintrag__art {
+  padding: 1px 8px; border-radius: 999px;
+  font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
+  background: rgba(255, 255, 255, .06); color: var(--text-still);
+}
+
+.leer-hinweis {
+  padding: 26px 20px; text-align: center;
+  color: var(--text-still); font-size: .9rem;
+  border: 1px dashed var(--rand); border-radius: var(--radius);
+}
+
+@media (max-width: 620px) {
+  .eintrag { grid-template-columns: 62px 1fr; }
+  .eintrag__knoepfe { grid-column: 1 / -1; margin-top: 8px; }
+  .eintrag__zusatz { grid-column: 1 / -1; }
+}