feat: build dark fantasy application shell

apps/web/src/app/layout/context-panel/context-panel.component.html

@@ -0,0 +1,4 @@
+<aside class="context-panel" aria-label="Gebietsinformationen">
+  <span class="context-panel__eyebrow">Gebiet</span>
+  <p class="context-panel__hint">Informationen erscheinen mit der Weltansicht.</p>
+</aside>

apps/web/src/app/layout/context-panel/context-panel.component.scss

@@ -0,0 +1,26 @@
+:host {
+  display: block;
+  background: var(--ar-panel);
+}
+
+.context-panel {
+  min-block-size: 100%;
+  padding: var(--ar-space-5);
+  border-inline-start: 1px solid var(--ar-border);
+  background: linear-gradient(180deg, rgb(255 255 255 / 0.025), transparent 16%), var(--ar-panel);
+}
+
+.context-panel__eyebrow {
+  display: block;
+  padding-block-end: var(--ar-space-3);
+  border-block-end: 1px solid var(--ar-border);
+  color: var(--ar-gold);
+  font-family: Georgia, 'Times New Roman', serif;
+  font-size: 1.25rem;
+}
+
+.context-panel__hint {
+  color: var(--ar-text-muted);
+  font-size: var(--ar-font-sm);
+  line-height: 1.55;
+}

apps/web/src/app/layout/context-panel/context-panel.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-context-panel',
+  templateUrl: './context-panel.component.html',
+  styleUrl: './context-panel.component.scss',
+})
+export class ContextPanelComponent {}