From 327f40adec928f620f53e63110f303f495166043 Mon Sep 17 00:00:00 2001
From: Lars Gebhardt-Kusche <lars@kusche.berlin>
Date: Thu, 23 Apr 2026 00:01:20 +0200
Subject: [PATCH] Boersenchecker UI

---
 .../boersenchecker/assets/boersenchecker.css  | 350 +++++++++++++----
 modules/boersenchecker/partials/dashboard.php | 106 ++---
 modules/boersenchecker/partials/home.php      | 364 ++++++++++--------
 3 files changed, 526 insertions(+), 294 deletions(-)

diff --git a/modules/boersenchecker/assets/boersenchecker.css b/modules/boersenchecker/assets/boersenchecker.css
index 520442e..ef6996b 100644
--- a/modules/boersenchecker/assets/boersenchecker.css
+++ b/modules/boersenchecker/assets/boersenchecker.css
@@ -1,51 +1,215 @@
-.bc-module-nav {
-  display: flex;
-  gap: 10px;
-  flex-wrap: wrap;
-  margin: 1rem 0 1.15rem;
+.bc-app {
+  --bc-accent: #5eead4;
+  --bc-accent-strong: #79d7ff;
+  --bc-ink: #09111f;
+  --bc-text: rgba(236, 245, 255, 0.96);
+  --bc-muted: rgba(203, 218, 234, 0.78);
+  --bc-line: rgba(148, 163, 184, 0.22);
+  --bc-panel: rgba(15, 23, 42, 0.68);
+  --bc-panel-soft: rgba(15, 23, 42, 0.52);
+  --bc-positive: #86efac;
+  --bc-negative: #fca5a5;
+  color: var(--bc-text);
 }
 
-.bc-module-tab {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 46px;
-  padding: 12px 18px;
-  border-radius: 16px;
-  text-decoration: none;
-  color: #09111f;
-  border: 1px solid rgba(255,255,255,0.16);
-  background: rgba(255,255,255,0.9);
-  font-weight: 700;
-  box-shadow: 0 10px 22px rgba(0,0,0,0.10);
-  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
+.bc-grid-bg {
+  position: relative;
+  padding: 8px 0 32px;
 }
 
-.bc-module-tab:hover,
-.bc-module-tab:focus-visible,
-.bc-module-tab.is-active {
-  transform: translateY(-1px);
-  box-shadow: 0 14px 28px rgba(0,0,0,0.14);
+.bc-grid-bg::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background:
+    radial-gradient(circle at top right, rgba(94, 234, 212, 0.16), transparent 28%),
+    radial-gradient(circle at bottom left, rgba(121, 215, 255, 0.14), transparent 30%),
+    linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
 }
 
-.bc-module-tab.is-active {
-  background: linear-gradient(135deg, #79d7ff, #5eead4);
-  border-color: rgba(94, 234, 212, 0.35);
+.bc-shell {
+  position: relative;
+  display: grid;
+  gap: 18px;
 }
 
-.bc-module-tab:hover,
-.bc-module-tab:focus-visible {
-  background: #ffffff;
+.bc-stack {
+  display: grid;
+  gap: 18px;
 }
 
 .bc-hero {
+  display: grid;
+  gap: 18px;
+  padding: 28px;
+  border-radius: 28px;
   background:
-    radial-gradient(circle at top right, rgba(71, 169, 255, 0.22), transparent 32%),
-    radial-gradient(circle at bottom left, rgba(81, 214, 141, 0.18), transparent 28%),
-    linear-gradient(145deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
+    radial-gradient(circle at top right, rgba(94, 234, 212, 0.18), transparent 28%),
+    radial-gradient(circle at bottom left, rgba(121, 215, 255, 0.14), transparent 32%),
+    linear-gradient(145deg, rgba(15, 23, 42, 0.9), rgba(15, 23, 42, 0.78));
+  border: 1px solid var(--bc-line);
+  box-shadow: 0 18px 40px rgba(2, 6, 23, 0.22);
+}
+
+.bc-hero-top {
+  display: grid;
+  gap: 16px;
+  grid-template-columns: minmax(0, 1.6fr) minmax(240px, 0.7fr);
+  align-items: start;
+}
+
+.bc-hero-copy {
+  display: grid;
+  gap: 10px;
+}
+
+.bc-eyebrow {
+  display: inline-flex;
+  align-items: center;
+  width: fit-content;
+  padding: 8px 12px;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--bc-accent) 18%, transparent);
+  border: 1px solid color-mix(in srgb, var(--bc-accent) 28%, transparent);
+  color: var(--bc-text);
+  font-size: 0.86rem;
+  font-weight: 700;
+}
+
+.bc-title {
+  margin: 0;
+  font-size: clamp(2rem, 3vw, 2.8rem);
+  line-height: 1.05;
+}
+
+.bc-text {
+  color: var(--bc-muted);
+  margin: 0;
+}
+
+.bc-hero-controls {
+  display: grid;
+  gap: 12px;
+  justify-items: stretch;
+}
+
+.bc-form-card,
+.bc-panel,
+.bc-stat,
+.bc-chart-card,
+.bc-position-row {
+  border: 1px solid var(--bc-line);
+  border-radius: 22px;
+  background: var(--bc-panel);
+  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
+}
+
+.bc-form-card,
+.bc-panel,
+.bc-chart-card {
+  padding: 18px;
+}
+
+.bc-stat {
+  padding: 16px;
+}
+
+.bc-field-label {
+  font-size: 0.85rem;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--bc-muted);
+}
+
+.bc-tabs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.bc-button,
+.bc-tabs a,
+.bc-app button,
+.bc-app input,
+.bc-app select,
+.bc-app textarea {
+  font: inherit;
+}
+
+.bc-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid transparent;
+  border-radius: 16px;
+  padding: 12px 16px;
+  cursor: pointer;
+  text-decoration: none;
+  transition: 160ms ease;
+}
+
+.bc-button:hover {
+  transform: translateY(-1px);
+}
+
+.bc-button--tab {
+  background: rgba(255, 255, 255, 0.92);
+  color: var(--bc-ink);
+  font-weight: 700;
+}
+
+.bc-button--tab-active {
+  background: linear-gradient(135deg, var(--bc-accent-strong), var(--bc-accent));
+  color: var(--bc-ink);
+  font-weight: 700;
+}
+
+.bc-button--primary {
+  background: linear-gradient(135deg, var(--bc-accent), var(--bc-accent-strong));
+  color: var(--bc-ink);
+  font-weight: 700;
+}
+
+.bc-button--secondary {
+  background: rgba(255, 255, 255, 0.92);
+  color: var(--bc-ink);
+  font-weight: 700;
+}
+
+.bc-button--ghost {
+  background: color-mix(in srgb, var(--bc-accent) 14%, transparent);
+  border-color: color-mix(in srgb, var(--bc-accent) 34%, transparent);
+  color: var(--bc-accent-strong);
+  font-weight: 700;
+}
+
+.bc-actions {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.bc-alert {
+  padding: 16px 18px;
+  border-radius: 20px;
+  border: 1px solid transparent;
+}
+
+.bc-alert--error {
+  background: rgba(127, 29, 29, 0.28);
+  border-color: rgba(252, 165, 165, 0.24);
+  color: #fecaca;
+}
+
+.bc-alert--success {
+  background: rgba(6, 78, 59, 0.28);
+  border-color: rgba(134, 239, 172, 0.24);
+  color: #bbf7d0;
 }
 
 .bc-toolbar,
+.bc-overview-grid,
 .bc-card-grid {
   display: grid;
   gap: 14px;
@@ -55,37 +219,20 @@
   grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
 }
 
-.bc-card-grid {
+.bc-overview-grid {
   grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
 }
 
-.bc-overview-grid {
-  display: grid;
-  gap: 14px;
-  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
-}
-
-.bc-stat {
-  padding: 16px;
-  border-radius: 18px;
-  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
-  border: 1px solid rgba(255,255,255,0.08);
-  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
+.bc-card-grid {
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
 }
 
 .bc-stat-value {
-  margin-top: 6px;
-  font-size: 1.35rem;
+  margin-top: 8px;
+  font-size: 1.42rem;
   font-weight: 700;
 }
 
-.bc-surface {
-  padding: 18px;
-  border-radius: 22px;
-  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
-  border: 1px solid rgba(255,255,255,0.08);
-}
-
 .bc-chart-shell {
   position: relative;
   min-height: 360px;
@@ -100,11 +247,11 @@
 
 .bc-chart-path {
   fill: none;
-  stroke: #5eead4;
+  stroke: var(--bc-accent);
   stroke-width: 3;
   stroke-linecap: round;
   stroke-linejoin: round;
-  filter: drop-shadow(0 12px 24px rgba(94, 234, 212, 0.25));
+  filter: drop-shadow(0 12px 24px rgba(94, 234, 212, 0.22));
 }
 
 .bc-chart-area {
@@ -116,17 +263,16 @@
   stroke-dasharray: 4 6;
 }
 
-.bc-range-list,
-.bc-inline-actions {
+.bc-range-list {
   display: flex;
   gap: 10px;
   flex-wrap: wrap;
 }
 
 .bc-range-button {
-  border: 1px solid rgba(255,255,255,0.12);
-  background: rgba(255,255,255,0.04);
-  color: var(--text);
+  border: 1px solid color-mix(in srgb, var(--bc-accent) 26%, transparent);
+  background: color-mix(in srgb, var(--bc-accent) 8%, transparent);
+  color: var(--bc-text);
   padding: 8px 12px;
   border-radius: 999px;
   cursor: pointer;
@@ -136,8 +282,8 @@
 .bc-range-button:hover,
 .bc-range-button[aria-pressed="true"] {
   transform: translateY(-1px);
-  background: rgba(94, 234, 212, 0.12);
-  border-color: rgba(94, 234, 212, 0.45);
+  background: color-mix(in srgb, var(--bc-accent) 18%, transparent);
+  border-color: color-mix(in srgb, var(--bc-accent) 42%, transparent);
 }
 
 .bc-panel-fade {
@@ -151,18 +297,15 @@
 
 .bc-position-list {
   display: grid;
-  gap: 12px;
+  gap: 14px;
 }
 
 .bc-position-row {
   display: grid;
-  grid-template-columns: minmax(0, 1.8fr) repeat(4, minmax(100px, .75fr));
-  gap: 12px;
+  grid-template-columns: minmax(0, 1.8fr) repeat(4, minmax(96px, .72fr));
+  gap: 14px;
   align-items: center;
-  padding: 14px 16px;
-  border-radius: 16px;
-  background: rgba(255,255,255,0.03);
-  border: 1px solid rgba(255,255,255,0.06);
+  padding: 16px 18px;
 }
 
 .bc-performance {
@@ -170,24 +313,81 @@
 }
 
 .bc-performance.is-positive {
-  color: #84f2b7;
+  color: var(--bc-positive);
 }
 
 .bc-performance.is-negative {
-  color: #ff9b8d;
+  color: var(--bc-negative);
 }
 
 .bc-pill-soft {
   display: inline-flex;
   align-items: center;
+  width: fit-content;
   padding: 6px 10px;
   border-radius: 999px;
   background: rgba(255,255,255,0.06);
-  color: var(--muted);
+  color: var(--bc-muted);
   font-size: .85rem;
 }
 
-@media (max-width: 900px) {
+.bc-table-shell {
+  overflow: auto;
+  border-radius: 18px;
+  border: 1px solid var(--bc-line);
+}
+
+.bc-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.bc-table th,
+.bc-table td {
+  padding: 10px 12px;
+  text-align: left;
+  border-bottom: 1px solid rgba(255,255,255,0.06);
+  vertical-align: top;
+}
+
+.bc-table thead {
+  background: rgba(255,255,255,0.04);
+}
+
+.bc-app .setup-field {
+  display: grid;
+  gap: 6px;
+}
+
+.bc-app input,
+.bc-app select,
+.bc-app textarea {
+  width: 100%;
+  border: 1px solid var(--bc-line);
+  border-radius: 14px;
+  padding: 10px 12px;
+  background: rgba(2, 6, 23, 0.42);
+  color: var(--bc-text);
+}
+
+.bc-app input::placeholder,
+.bc-app textarea::placeholder {
+  color: rgba(203, 218, 234, 0.48);
+}
+
+.bc-app a {
+  color: inherit;
+}
+
+.bc-app .muted {
+  color: var(--bc-muted);
+}
+
+@media (max-width: 980px) {
+  .bc-hero-top {
+    grid-template-columns: 1fr;
+  }
+
   .bc-position-row {
     grid-template-columns: 1fr;
   }
diff --git a/modules/boersenchecker/partials/dashboard.php b/modules/boersenchecker/partials/dashboard.php
index c69225f..688e8bd 100644
--- a/modules/boersenchecker/partials/dashboard.php
+++ b/modules/boersenchecker/partials/dashboard.php
@@ -1,29 +1,35 @@
 <?php $ownerQuery = $isAdmin ? '?owner_sub=' . urlencode((string) $ownerSub) : ''; ?>
-<div class="card">
-  <div class="bc-module-nav">
-    <a class="bc-module-tab" href="/module/boersenchecker">Ueberblick</a>
-    <a class="bc-module-tab is-active" href="/module/boersenchecker/depotverwaltung">Depotverwaltung</a>
-    <a class="bc-module-tab" href="/module/boersenchecker/aktienverwaltung">Aktienverwaltung</a>
-  </div>
-  <div class="pill">Boersenchecker</div>
-  <h1 style="margin-top:.75rem;">Depotverwaltung</h1>
-  <p class="muted">
-    Depots, Positionen und manuelle Kursverlaeufe. Die Waehrungsumrechnung nutzt, sofern verfuegbar,
-    die bestehende FX-Logik des Mining-Checkers weiter.
-  </p>
+<div class="bc-app">
+  <div class="bc-grid-bg">
+    <div class="bc-shell bc-stack">
+      <header class="bc-hero">
+        <div class="bc-hero-top">
+          <div class="bc-hero-copy">
+            <div class="bc-eyebrow">Boersenchecker Modul</div>
+            <h1 class="bc-title">Depotverwaltung</h1>
+            <p class="bc-text">Depots, Positionen und Kurs-Historien verwalten. Die Waehrungsumrechnung nutzt weiterhin die bestehende FX-Logik des Mining-Checkers.</p>
+          </div>
+          <div class="bc-hero-controls">
+            <a class="bc-button bc-button--ghost" href="/">Zur Startseite</a>
+            <a class="bc-button bc-button--secondary" href="/modules/setup/boersenchecker">Setup</a>
+          </div>
+        </div>
 
-  <?php if ($error): ?>
-    <div class="card" style="margin-top:1rem; border-color:#ffb4a8; background:#fff5f3; color:#7a2114;">
-      <?= e($error) ?>
-    </div>
-  <?php elseif ($notice): ?>
-    <div class="card" style="margin-top:1rem; border-color:var(--accent-2);">
-      <?= e($notice) ?>
-    </div>
-  <?php endif; ?>
+        <div class="bc-tabs">
+          <a class="bc-button bc-button--tab" href="/module/boersenchecker">Ueberblick</a>
+          <a class="bc-button bc-button--tab-active" href="/module/boersenchecker/depotverwaltung">Depotverwaltung</a>
+          <a class="bc-button bc-button--tab" href="/module/boersenchecker/aktienverwaltung">Aktienverwaltung</a>
+        </div>
+      </header>
 
-  <?php if ($isAdmin): ?>
-    <div class="card" style="margin-top:1rem; background:var(--panel-2);">
+      <?php if ($error): ?>
+        <div class="bc-alert bc-alert--error"><?= e($error) ?></div>
+      <?php elseif ($notice): ?>
+        <div class="bc-alert bc-alert--success"><?= e($notice) ?></div>
+      <?php endif; ?>
+
+      <?php if ($isAdmin): ?>
+        <div class="bc-panel">
       <strong>Benutzer-Scope</strong>
       <form method="get" style="margin-top:.75rem; display:flex; gap:10px; flex-wrap:wrap; align-items:end;">
         <label class="setup-field muted" style="margin:0; min-width:260px;">
@@ -36,13 +42,13 @@
             <?php endforeach; ?>
           </select>
         </label>
-        <button class="cta-button" type="submit">Anzeigen</button>
+        <button class="bc-button bc-button--primary" type="submit">Anzeigen</button>
       </form>
-    </div>
-  <?php endif; ?>
+        </div>
+      <?php endif; ?>
 
-  <div class="grid" style="margin-top:1rem;">
-    <div class="card" style="background:var(--panel-2);">
+      <div class="grid" style="margin-top:1rem;">
+    <div class="bc-panel">
       <strong><?= $editPortfolio ? 'Depot bearbeiten' : 'Neues Depot' ?></strong>
       <form method="post" style="margin-top:.75rem; display:grid; gap:10px;">
         <input type="hidden" name="action" value="save_portfolio">
@@ -61,15 +67,15 @@
           <textarea name="portfolio_notes" rows="3"><?= e((string) ($editPortfolio['notes'] ?? '')) ?></textarea>
         </label>
         <div style="display:flex; gap:10px; flex-wrap:wrap;">
-          <button class="cta-button" type="submit">Depot speichern</button>
+          <button class="bc-button bc-button--primary" type="submit">Depot speichern</button>
           <?php if ($editPortfolio): ?>
-            <a class="nav-link" href="/module/boersenchecker/depotverwaltung<?= e($ownerQuery) ?>">Abbrechen</a>
+            <a class="bc-button bc-button--secondary" href="/module/boersenchecker/depotverwaltung<?= e($ownerQuery) ?>">Abbrechen</a>
           <?php endif; ?>
         </div>
       </form>
     </div>
 
-    <div class="card" style="background:var(--panel-2);">
+    <div class="bc-panel">
       <strong>API / FX</strong>
       <p class="muted" style="margin-top:.75rem;">
         Die Umrechnung liest gespeicherte FX-Daten aus dem Mining-Checker. Eine Aktualisierung wird nur manuell
@@ -82,12 +88,12 @@
         <form method="post">
           <input type="hidden" name="action" value="refresh_fx">
           <input type="hidden" name="owner_sub" value="<?= e((string) $ownerSub) ?>">
-          <button class="cta-button" type="submit">FX-Daten aktualisieren</button>
+          <button class="bc-button bc-button--primary" type="submit">FX-Daten aktualisieren</button>
         </form>
         <form method="post">
           <input type="hidden" name="action" value="refresh_alpha_vantage_all">
           <input type="hidden" name="owner_sub" value="<?= e((string) $ownerSub) ?>">
-          <button class="nav-link" type="submit">Alle API-Kurse abrufen</button>
+          <button class="bc-button bc-button--secondary" type="submit">Alle API-Kurse abrufen</button>
         </form>
       </div>
       <div class="muted" style="margin-top:.75rem;">
@@ -102,7 +108,7 @@
     </div>
   </div>
 
-  <div class="card" style="margin-top:1rem; background:var(--panel-2);">
+  <div class="bc-panel" style="margin-top:1rem;">
     <strong><?= $editPosition ? 'Position bearbeiten' : 'Neue Position' ?></strong>
     <?php if ($portfolios === []): ?>
       <div class="muted" style="margin-top:.75rem;">Bitte zuerst ein Depot anlegen.</div>
@@ -176,16 +182,16 @@
           <textarea name="position_notes" rows="3"><?= e((string) ($editPosition['notes'] ?? '')) ?></textarea>
         </label>
         <div style="display:flex; gap:10px; flex-wrap:wrap;">
-          <button class="cta-button" type="submit">Position speichern</button>
+          <button class="bc-button bc-button--primary" type="submit">Position speichern</button>
           <?php if ($editPosition): ?>
-            <a class="nav-link" href="/module/boersenchecker/depotverwaltung<?= e($ownerQuery) ?>">Abbrechen</a>
+            <a class="bc-button bc-button--secondary" href="/module/boersenchecker/depotverwaltung<?= e($ownerQuery) ?>">Abbrechen</a>
           <?php endif; ?>
         </div>
       </form>
     <?php endif; ?>
   </div>
 
-  <div class="card" style="margin-top:1rem; background:var(--panel-2);">
+  <div class="bc-panel" style="margin-top:1rem;">
     <strong>API-Symbol suchen</strong>
     <p class="muted" style="margin-top:.75rem;">
       Suche nach Firma oder Ticker ueber den Alpha-Vantage-`SYMBOL_SEARCH`-Endpoint und uebernimm einen Treffer direkt ins Positionsformular.
@@ -197,12 +203,12 @@
         <span>Suchbegriff</span>
         <input type="text" name="search_keywords" value="<?= e($symbolSearchKeywords) ?>" placeholder="z.B. Mercedes, AAPL, Allianz" required>
       </label>
-      <button class="cta-button" type="submit">Suchen</button>
+      <button class="bc-button bc-button--primary" type="submit">Suchen</button>
     </form>
 
     <?php if ($symbolSearchResults !== []): ?>
-      <div style="overflow:auto; margin-top:1rem;">
-        <table style="width:100%; border-collapse:collapse;">
+      <div class="bc-table-shell" style="margin-top:1rem;">
+        <table class="bc-table">
           <thead>
             <tr style="text-align:left; border-bottom:1px solid var(--border);">
               <th style="padding:8px;">Symbol</th>
@@ -224,7 +230,7 @@
                 <td style="padding:8px;"><?= e((string) ($result['currency'] ?? '')) ?></td>
                 <td style="padding:8px;"><?= e((string) ($result['match_score'] ?? '')) ?></td>
                 <td style="padding:8px;">
-                  <a class="nav-link" href="/module/boersenchecker/depotverwaltung?owner_sub=<?= urlencode((string) $ownerSub) ?>&symbol_candidate=<?= urlencode((string) ($result['symbol'] ?? '')) ?>&instrument_name_candidate=<?= urlencode((string) ($result['name'] ?? '')) ?>&market_candidate=<?= urlencode((string) ($result['region'] ?? '')) ?>&quote_currency_candidate=<?= urlencode((string) ($result['currency'] ?? '')) ?>">
+                  <a class="bc-button bc-button--secondary" href="/module/boersenchecker/depotverwaltung?owner_sub=<?= urlencode((string) $ownerSub) ?>&symbol_candidate=<?= urlencode((string) ($result['symbol'] ?? '')) ?>&instrument_name_candidate=<?= urlencode((string) ($result['name'] ?? '')) ?>&market_candidate=<?= urlencode((string) ($result['region'] ?? '')) ?>&quote_currency_candidate=<?= urlencode((string) ($result['currency'] ?? '')) ?>">
                     In Formular uebernehmen
                   </a>
                 </td>
@@ -236,7 +242,7 @@
     <?php endif; ?>
   </div>
 
-  <div class="card" style="margin-top:1rem; background:var(--panel-2);">
+  <div class="bc-panel" style="margin-top:1rem;">
     <strong>Manuellen Kurs erfassen</strong>
     <?php if ($instrumentList === []): ?>
       <div class="muted" style="margin-top:.75rem;">Sobald Positionen vorhanden sind, koennen hier Kurse mit Uhrzeit gespeichert werden.</div>
@@ -274,7 +280,7 @@
           </label>
         </div>
         <div>
-          <button class="cta-button" type="submit">Kurs speichern</button>
+          <button class="bc-button bc-button--primary" type="submit">Kurs speichern</button>
         </div>
       </form>
     <?php endif; ?>
@@ -416,14 +422,14 @@
     <?php endif; ?>
   </div>
 
-  <div class="card" style="margin-top:1rem;">
+  <div class="bc-panel" style="margin-top:1rem;">
     <strong>Kursverlauf</strong>
     <?php if ($instrumentList === []): ?>
       <div class="muted" style="margin-top:.75rem;">Noch keine Kursdaten vorhanden.</div>
     <?php else: ?>
       <?php foreach ($instrumentList as $instrumentId => $instrument): ?>
         <?php $history = array_slice($quoteHistory[$instrumentId] ?? [], 0, 10); ?>
-        <div class="card" style="margin-top:1rem; background:var(--panel-2);">
+        <div class="bc-panel" style="margin-top:1rem;">
           <div style="display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;">
             <div>
               <strong><?= e((string) $instrument['name']) ?></strong>
@@ -431,13 +437,13 @@
                 <?= e((string) ($instrument['symbol'] ?: '-')) ?> · <?= e((string) ($instrument['isin'] ?: '-')) ?>
               </div>
             </div>
-            <a class="nav-link" href="/module/boersenchecker/depotverwaltung?owner_sub=<?= urlencode((string) $ownerSub) ?>&instrument_id=<?= e((string) $instrumentId) ?>">Neuen Kurs erfassen</a>
+            <a class="bc-button bc-button--secondary" href="/module/boersenchecker/depotverwaltung?owner_sub=<?= urlencode((string) $ownerSub) ?>&instrument_id=<?= e((string) $instrumentId) ?>">Neuen Kurs erfassen</a>
           </div>
           <?php if ($history === []): ?>
             <div class="muted" style="margin-top:.75rem;">Noch keine historischen Kurse vorhanden.</div>
           <?php else: ?>
-            <div style="overflow:auto; margin-top:.75rem;">
-              <table style="width:100%; border-collapse:collapse;">
+            <div class="bc-table-shell" style="margin-top:.75rem;">
+              <table class="bc-table">
                 <thead>
                   <tr style="text-align:left; border-bottom:1px solid var(--border);">
                     <th style="padding:8px;">Zeitpunkt</th>
@@ -457,7 +463,7 @@
                           <input type="hidden" name="action" value="delete_quote">
                           <input type="hidden" name="owner_sub" value="<?= e((string) $ownerSub) ?>">
                           <input type="hidden" name="quote_id" value="<?= e((string) $quote['id']) ?>">
-                          <button class="nav-link" type="submit">Loeschen</button>
+                          <button class="bc-button bc-button--secondary" type="submit">Loeschen</button>
                         </form>
                       </td>
                     </tr>
@@ -470,4 +476,6 @@
       <?php endforeach; ?>
     <?php endif; ?>
   </div>
+    </div>
+  </div>
 </div>
diff --git a/modules/boersenchecker/partials/home.php b/modules/boersenchecker/partials/home.php
index 85b9d66..e2597d2 100644
--- a/modules/boersenchecker/partials/home.php
+++ b/modules/boersenchecker/partials/home.php
@@ -1,185 +1,209 @@
-<div class="card bc-hero" data-bc-home data-chart-endpoint="<?= e($chartEndpoint) ?>">
-  <div class="bc-module-nav">
-    <a class="bc-module-tab is-active" href="/module/boersenchecker">Ueberblick</a>
-    <a class="bc-module-tab" href="/module/boersenchecker/depotverwaltung">Depotverwaltung</a>
-    <a class="bc-module-tab" href="/module/boersenchecker/aktienverwaltung">Aktienverwaltung</a>
-  </div>
-  <script type="application/json" data-bc-instruments-json><?= json_encode(array_map(static function (array $position): array {
-      return [
-          'instrument_id' => (int) ($position['instrument_id'] ?? 0),
-          'instrument_name' => (string) ($position['instrument_name'] ?? ''),
-          'symbol' => (string) ($position['symbol'] ?? ''),
-          'isin' => (string) ($position['isin'] ?? ''),
-      ];
-  }, $positions), JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) ?></script>
-  <div class="pill">Boersenchecker</div>
-  <h1 style="margin-top:.75rem;">Ueberblick</h1>
-  <p class="muted">Depotauswahl, Aktienauswahl und animierte Kurscharts auf Basis von Schlusskursen.</p>
+<div class="bc-app">
+  <div class="bc-grid-bg">
+    <div class="bc-shell bc-stack" data-bc-home data-chart-endpoint="<?= e($chartEndpoint) ?>">
+      <script type="application/json" data-bc-instruments-json><?= json_encode(array_map(static function (array $position): array {
+          return [
+              'instrument_id' => (int) ($position['instrument_id'] ?? 0),
+              'instrument_name' => (string) ($position['instrument_name'] ?? ''),
+              'symbol' => (string) ($position['symbol'] ?? ''),
+              'isin' => (string) ($position['isin'] ?? ''),
+          ];
+      }, $positions), JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) ?></script>
 
-  <?php if ($error): ?>
-    <div class="card" style="margin-top:1rem; border-color:#ffb4a8; background:#fff5f3; color:#7a2114;"><?= e($error) ?></div>
-  <?php elseif ($notice): ?>
-    <div class="card" style="margin-top:1rem; border-color:var(--accent-2);"><?= e($notice) ?></div>
-  <?php endif; ?>
+      <header class="bc-hero">
+        <div class="bc-hero-top">
+          <div class="bc-hero-copy">
+            <div class="bc-eyebrow">Boersenchecker Modul</div>
+            <h1 class="bc-title">Depot-Ueberblick</h1>
+            <p class="bc-text">Depots, Aktien und Kursverlaeufe in einer Oberflaeche. Die Navigation folgt jetzt dem gleichen sichtbaren Prinzip wie beim Mining-Checker.</p>
+          </div>
+          <div class="bc-hero-controls">
+            <a class="bc-button bc-button--ghost" href="/">Zur Startseite</a>
+            <div class="bc-form-card">
+              <div class="bc-field-label">Aktives Depot</div>
+              <div class="bc-text" style="margin-top:8px;"><?= $selectedPortfolioId > 0 && $portfolios !== [] ? e((string) (($portfolios[array_search($selectedPortfolioId, array_column($portfolios, 'id'), true)]['name'] ?? 'Auswahl aktiv'))) : 'Kein Depot ausgewaehlt' ?></div>
+            </div>
+          </div>
+        </div>
 
-  <div class="bc-toolbar" style="margin-top:1rem;">
-    <form class="bc-surface" method="get">
-      <strong>Depot</strong>
-      <?php if ($portfolios === []): ?>
-        <div class="muted" style="margin-top:.75rem;">Keine Depots vorhanden.</div>
-      <?php else: ?>
-        <label class="setup-field muted" style="margin-top:.75rem;">
-          <span>Auswahl</span>
-          <select name="portfolio_id" onchange="this.form.submit()">
-            <?php foreach ($portfolios as $portfolio): ?>
-              <option value="<?= e((string) $portfolio['id']) ?>" <?= (string) $selectedPortfolioId === (string) $portfolio['id'] ? 'selected' : '' ?>>
-                <?= e((string) $portfolio['name']) ?>
-              </option>
-            <?php endforeach; ?>
-          </select>
-        </label>
+        <div class="bc-tabs">
+          <a class="bc-button bc-button--tab-active" href="/module/boersenchecker">Ueberblick</a>
+          <a class="bc-button bc-button--tab" href="/module/boersenchecker/depotverwaltung">Depotverwaltung</a>
+          <a class="bc-button bc-button--tab" href="/module/boersenchecker/aktienverwaltung">Aktienverwaltung</a>
+        </div>
+      </header>
+
+      <?php if ($error): ?>
+        <div class="bc-alert bc-alert--error"><?= e($error) ?></div>
+      <?php elseif ($notice): ?>
+        <div class="bc-alert bc-alert--success"><?= e($notice) ?></div>
       <?php endif; ?>
-    </form>
 
-    <form class="bc-surface" method="get">
-      <input type="hidden" name="portfolio_id" value="<?= e((string) $selectedPortfolioId) ?>">
-      <strong>Aktie</strong>
-      <?php if ($positions === []): ?>
-        <div class="muted" style="margin-top:.75rem;">Keine Aktien im ausgewaehlten Depot.</div>
-      <?php else: ?>
-        <label class="setup-field muted" style="margin-top:.75rem;">
-          <span>Auswahl</span>
-          <select name="instrument_id" data-bc-instrument>
-            <?php foreach ($positions as $position): ?>
-              <option value="<?= e((string) $position['instrument_id']) ?>" <?= (string) $selectedInstrumentId === (string) $position['instrument_id'] ? 'selected' : '' ?>>
-                <?= e((string) $position['instrument_name']) ?><?= !empty($position['symbol']) ? ' (' . e((string) $position['symbol']) . ')' : '' ?>
-              </option>
-            <?php endforeach; ?>
-          </select>
-        </label>
-      <?php endif; ?>
-    </form>
+      <div class="bc-toolbar">
+        <form class="bc-panel" method="get">
+          <div class="bc-field-label">Depotauswahl</div>
+          <?php if ($portfolios === []): ?>
+            <div class="bc-text" style="margin-top:12px;">Keine Depots vorhanden.</div>
+          <?php else: ?>
+            <label class="setup-field" style="margin-top:12px;">
+              <span class="bc-text">Depot</span>
+              <select name="portfolio_id" onchange="this.form.submit()">
+                <?php foreach ($portfolios as $portfolio): ?>
+                  <option value="<?= e((string) $portfolio['id']) ?>" <?= (string) $selectedPortfolioId === (string) $portfolio['id'] ? 'selected' : '' ?>>
+                    <?= e((string) $portfolio['name']) ?>
+                  </option>
+                <?php endforeach; ?>
+              </select>
+            </label>
+          <?php endif; ?>
+        </form>
 
-    <form class="bc-surface" method="post">
-      <input type="hidden" name="action" value="refresh_current_quotes_home">
-      <input type="hidden" name="portfolio_id" value="<?= e((string) $selectedPortfolioId) ?>">
-      <strong>Aktuelle Kurse</strong>
-      <p class="muted" style="margin:.75rem 0 1rem;">Abruf der aktuellen Kurse fuer das gewaehlte Depot.</p>
-      <button class="cta-button" type="submit" <?= $selectedPortfolioId > 0 ? '' : 'disabled' ?>>Aktuelle Kurse abrufen</button>
-    </form>
-  </div>
+        <form class="bc-panel" method="get">
+          <input type="hidden" name="portfolio_id" value="<?= e((string) $selectedPortfolioId) ?>">
+          <div class="bc-field-label">Aktienauswahl</div>
+          <?php if ($positions === []): ?>
+            <div class="bc-text" style="margin-top:12px;">Keine Aktien im ausgewaehlten Depot.</div>
+          <?php else: ?>
+            <label class="setup-field" style="margin-top:12px;">
+              <span class="bc-text">Aktie</span>
+              <select name="instrument_id" data-bc-instrument>
+                <?php foreach ($positions as $position): ?>
+                  <option value="<?= e((string) $position['instrument_id']) ?>" <?= (string) $selectedInstrumentId === (string) $position['instrument_id'] ? 'selected' : '' ?>>
+                    <?= e((string) $position['instrument_name']) ?><?= !empty($position['symbol']) ? ' (' . e((string) $position['symbol']) . ')' : '' ?>
+                  </option>
+                <?php endforeach; ?>
+              </select>
+            </label>
+          <?php endif; ?>
+        </form>
 
-  <div class="bc-overview-grid" style="margin-top:1rem;">
-    <div class="bc-stat">
-      <div class="muted">Positionen</div>
-      <div class="bc-stat-value"><?= e((string) ($summary['positions'] ?? 0)) ?></div>
-      <div class="muted" style="margin-top:6px;">Aktien im aktuell gewaehlten Depot</div>
-    </div>
-    <div class="bc-stat">
-      <div class="muted">Investiert</div>
-      <div class="bc-stat-value"><?= isset($summary['invested']) && $summary['invested'] !== null ? e(number_format((float) $summary['invested'], 2, ',', '.')) . ' ' . e($defaultReportCurrency) : 'n/a' ?></div>
-      <div class="muted" style="margin-top:6px;">Auf Berichtswahrung umgerechnet</div>
-    </div>
-    <div class="bc-stat">
-      <div class="muted">Aktueller Wert</div>
-      <div class="bc-stat-value"><?= isset($summary['current']) && $summary['current'] !== null ? e(number_format((float) $summary['current'], 2, ',', '.')) . ' ' . e($defaultReportCurrency) : 'n/a' ?></div>
-      <div class="muted" style="margin-top:6px;">Basierend auf letztem verfuegbarem Kurs</div>
-    </div>
-    <div class="bc-stat">
-      <div class="muted">Performance</div>
-      <div class="bc-stat-value"><?= isset($summary['gain']) && $summary['gain'] !== null ? e(number_format((float) $summary['gain'], 2, ',', '.')) . ' ' . e($defaultReportCurrency) : 'n/a' ?></div>
-      <div class="muted" style="margin-top:6px;"><?= !empty($summary['best']['instrument_name']) ? 'Top: ' . e((string) $summary['best']['instrument_name']) : 'Noch keine Vergleichsdaten' ?></div>
-    </div>
-  </div>
-
-  <div class="bc-card-grid" style="margin-top:1rem;">
-    <div class="bc-surface">
-      <div class="muted">Bester Wert</div>
-      <?php if (!empty($summary['best'])): ?>
-        <div class="bc-stat-value"><?= e((string) $summary['best']['instrument_name']) ?></div>
-        <div class="bc-pill-soft" style="margin-top:.75rem;"><?= e(number_format((float) ($summary['best']['gain_percent'] ?? 0), 2, ',', '.')) ?>%</div>
-      <?php else: ?>
-        <div class="muted" style="margin-top:.75rem;">Noch keine Performance verfuegbar.</div>
-      <?php endif; ?>
-    </div>
-    <div class="bc-surface">
-      <div class="muted">Schwaechster Wert</div>
-      <?php if (!empty($summary['worst'])): ?>
-        <div class="bc-stat-value"><?= e((string) $summary['worst']['instrument_name']) ?></div>
-        <div class="bc-pill-soft" style="margin-top:.75rem;"><?= e(number_format((float) ($summary['worst']['gain_percent'] ?? 0), 2, ',', '.')) ?>%</div>
-      <?php else: ?>
-        <div class="muted" style="margin-top:.75rem;">Noch keine Performance verfuegbar.</div>
-      <?php endif; ?>
-    </div>
-    <?php foreach (array_slice($positions, 0, 2) as $position): ?>
-      <div class="bc-stat">
-        <div class="muted"><?= e((string) $position['instrument_name']) ?></div>
-        <div class="bc-stat-value"><?= $position['latest_price'] !== null ? e(number_format((float) $position['latest_price'], 2, ',', '.')) . ' ' . e((string) $position['latest_currency']) : 'n/a' ?></div>
-        <div class="muted" style="margin-top:6px;"><?= e((string) ($position['latest_quoted_at'] ?: 'kein Kurs')) ?></div>
+        <form class="bc-panel" method="post">
+          <input type="hidden" name="action" value="refresh_current_quotes_home">
+          <input type="hidden" name="portfolio_id" value="<?= e((string) $selectedPortfolioId) ?>">
+          <div class="bc-field-label">Marktdaten</div>
+          <p class="bc-text" style="margin-top:12px;">Aktuelle Kurse fuer das gewaehlte Depot ueber Alpha Vantage abrufen.</p>
+          <div class="bc-actions" style="margin-top:16px;">
+            <button class="bc-button bc-button--primary" type="submit" <?= $selectedPortfolioId > 0 ? '' : 'disabled' ?>>Aktuelle Kurse abrufen</button>
+          </div>
+        </form>
       </div>
-    <?php endforeach; ?>
-  </div>
 
-  <div class="bc-surface" style="margin-top:1rem;">
-    <div style="display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; align-items:center;">
-      <div>
-        <strong data-bc-instrument-name><?= e((string) ($selectedInstrument['instrument_name'] ?? 'Keine Aktie ausgewaehlt')) ?></strong>
-        <?php if ($selectedInstrument): ?>
-          <div class="muted" data-bc-instrument-meta><?= e((string) ($selectedInstrument['symbol'] ?? '')) ?> · <?= e((string) ($selectedInstrument['isin'] ?? '-')) ?></div>
-        <?php endif; ?>
+      <div class="bc-overview-grid">
+        <div class="bc-stat">
+          <div class="bc-field-label">Positionen</div>
+          <div class="bc-stat-value"><?= e((string) ($summary['positions'] ?? 0)) ?></div>
+          <div class="bc-text" style="margin-top:6px;">Aktien im aktuell gewaehlten Depot</div>
+        </div>
+        <div class="bc-stat">
+          <div class="bc-field-label">Investiert</div>
+          <div class="bc-stat-value"><?= isset($summary['invested']) && $summary['invested'] !== null ? e(number_format((float) $summary['invested'], 2, ',', '.')) . ' ' . e($defaultReportCurrency) : 'n/a' ?></div>
+          <div class="bc-text" style="margin-top:6px;">In Berichtswahrung bewertet</div>
+        </div>
+        <div class="bc-stat">
+          <div class="bc-field-label">Aktueller Wert</div>
+          <div class="bc-stat-value"><?= isset($summary['current']) && $summary['current'] !== null ? e(number_format((float) $summary['current'], 2, ',', '.')) . ' ' . e($defaultReportCurrency) : 'n/a' ?></div>
+          <div class="bc-text" style="margin-top:6px;">Basierend auf dem letzten gespeicherten Kurs</div>
+        </div>
+        <div class="bc-stat">
+          <div class="bc-field-label">Performance</div>
+          <div class="bc-stat-value"><?= isset($summary['gain']) && $summary['gain'] !== null ? e(number_format((float) $summary['gain'], 2, ',', '.')) . ' ' . e($defaultReportCurrency) : 'n/a' ?></div>
+          <div class="bc-text" style="margin-top:6px;"><?= !empty($summary['best']['instrument_name']) ? 'Top-Wert: ' . e((string) $summary['best']['instrument_name']) : 'Noch keine Vergleichsdaten' ?></div>
+        </div>
       </div>
-      <div class="bc-range-list">
-        <button type="button" class="bc-range-button" data-range="1d" aria-pressed="false">Tag</button>
-        <button type="button" class="bc-range-button" data-range="5d" aria-pressed="false">5 Tage</button>
-        <button type="button" class="bc-range-button" data-range="1m" aria-pressed="true">Monat</button>
-        <button type="button" class="bc-range-button" data-range="3m" aria-pressed="false">3 Monate</button>
-        <button type="button" class="bc-range-button" data-range="6m" aria-pressed="false">6 Monate</button>
-        <button type="button" class="bc-range-button" data-range="1y" aria-pressed="false">Jahr</button>
-        <button type="button" class="bc-range-button" data-range="5y" aria-pressed="false">5 Jahre</button>
-      </div>
-    </div>
-    <div class="muted" data-bc-chart-status style="margin-top:.75rem;">Chartdaten werden geladen...</div>
-    <div class="bc-stat-value" data-bc-chart-summary style="margin-top:.35rem;">-</div>
-    <div class="bc-chart-shell" data-bc-chart style="margin-top:1rem;"></div>
-  </div>
 
-  <div class="bc-surface" style="margin-top:1rem;">
-    <strong>Aktien im Depot</strong>
-    <?php if ($positions === []): ?>
-      <div class="muted" style="margin-top:.75rem;">Keine Aktien im ausgewaehlten Depot.</div>
-    <?php else: ?>
-      <div class="bc-position-list" style="margin-top:1rem;">
-        <?php foreach ($positions as $position): ?>
-          <?php $gainClass = (($position['gain_report'] ?? 0) >= 0) ? 'is-positive' : 'is-negative'; ?>
-          <div class="bc-position-row">
-            <div>
-              <strong><?= e((string) $position['instrument_name']) ?></strong>
-              <div class="muted"><?= e((string) ($position['symbol'] ?? '')) ?> · <?= e((string) ($position['isin'] ?? '-')) ?></div>
-              <?php if (!empty($position['market'])): ?>
-                <div class="bc-pill-soft" style="margin-top:.55rem;"><?= e((string) $position['market']) ?></div>
-              <?php endif; ?>
-            </div>
-            <div>
-              <div class="muted">Stueckzahl</div>
-              <div><?= e(number_format((float) $position['quantity'], 6, ',', '.')) ?></div>
-            </div>
-            <div>
-              <div class="muted">Kaufpreis</div>
-              <div><?= e(number_format((float) $position['purchase_price'], 2, ',', '.')) ?> <?= e((string) $position['purchase_currency']) ?></div>
-            </div>
-            <div>
-              <div class="muted">Letzter Kurs</div>
-              <div><?= $position['latest_price'] !== null ? e(number_format((float) $position['latest_price'], 2, ',', '.')) . ' ' . e((string) $position['latest_currency']) : 'n/a' ?></div>
-            </div>
-            <div>
-              <div class="muted">Performance</div>
-              <div class="bc-performance <?= e($gainClass) ?>">
-                <?= isset($position['gain_report']) && $position['gain_report'] !== null ? e(number_format((float) $position['gain_report'], 2, ',', '.')) . ' ' . e($defaultReportCurrency) : 'n/a' ?>
-              </div>
-            </div>
+      <div class="bc-card-grid">
+        <div class="bc-panel">
+          <div class="bc-field-label">Bester Wert</div>
+          <?php if (!empty($summary['best'])): ?>
+            <div class="bc-stat-value"><?= e((string) $summary['best']['instrument_name']) ?></div>
+            <div class="bc-pill-soft" style="margin-top:12px;"><?= e(number_format((float) ($summary['best']['gain_percent'] ?? 0), 2, ',', '.')) ?>%</div>
+          <?php else: ?>
+            <div class="bc-text" style="margin-top:12px;">Noch keine Performance verfuegbar.</div>
+          <?php endif; ?>
+        </div>
+
+        <div class="bc-panel">
+          <div class="bc-field-label">Schwaechster Wert</div>
+          <?php if (!empty($summary['worst'])): ?>
+            <div class="bc-stat-value"><?= e((string) $summary['worst']['instrument_name']) ?></div>
+            <div class="bc-pill-soft" style="margin-top:12px;"><?= e(number_format((float) ($summary['worst']['gain_percent'] ?? 0), 2, ',', '.')) ?>%</div>
+          <?php else: ?>
+            <div class="bc-text" style="margin-top:12px;">Noch keine Performance verfuegbar.</div>
+          <?php endif; ?>
+        </div>
+
+        <?php foreach (array_slice($positions, 0, 2) as $position): ?>
+          <div class="bc-stat">
+            <div class="bc-field-label"><?= e((string) $position['instrument_name']) ?></div>
+            <div class="bc-stat-value"><?= $position['latest_price'] !== null ? e(number_format((float) $position['latest_price'], 2, ',', '.')) . ' ' . e((string) $position['latest_currency']) : 'n/a' ?></div>
+            <div class="bc-text" style="margin-top:6px;"><?= e((string) ($position['latest_quoted_at'] ?: 'kein Kurs')) ?></div>
           </div>
         <?php endforeach; ?>
       </div>
-    <?php endif; ?>
+
+      <section class="bc-chart-card">
+        <div style="display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; align-items:center;">
+          <div>
+            <div class="bc-field-label">Kursverlauf</div>
+            <div class="bc-stat-value" data-bc-instrument-name><?= e((string) ($selectedInstrument['instrument_name'] ?? 'Keine Aktie ausgewaehlt')) ?></div>
+            <?php if ($selectedInstrument): ?>
+              <div class="bc-text" data-bc-instrument-meta><?= e((string) ($selectedInstrument['symbol'] ?? '')) ?> · <?= e((string) ($selectedInstrument['isin'] ?? '-')) ?></div>
+            <?php endif; ?>
+          </div>
+          <div class="bc-range-list">
+            <button type="button" class="bc-range-button" data-range="1d" aria-pressed="false">Tag</button>
+            <button type="button" class="bc-range-button" data-range="5d" aria-pressed="false">5 Tage</button>
+            <button type="button" class="bc-range-button" data-range="1m" aria-pressed="true">Monat</button>
+            <button type="button" class="bc-range-button" data-range="3m" aria-pressed="false">3 Monate</button>
+            <button type="button" class="bc-range-button" data-range="6m" aria-pressed="false">6 Monate</button>
+            <button type="button" class="bc-range-button" data-range="1y" aria-pressed="false">Jahr</button>
+            <button type="button" class="bc-range-button" data-range="5y" aria-pressed="false">5 Jahre</button>
+          </div>
+        </div>
+        <div class="bc-text" data-bc-chart-status style="margin-top:12px;">Chartdaten werden geladen...</div>
+        <div class="bc-stat-value" data-bc-chart-summary style="margin-top:6px;">-</div>
+        <div class="bc-chart-shell" data-bc-chart style="margin-top:18px;"></div>
+      </section>
+
+      <section class="bc-panel">
+        <div class="bc-field-label">Aktien im Depot</div>
+        <?php if ($positions === []): ?>
+          <div class="bc-text" style="margin-top:12px;">Keine Aktien im ausgewaehlten Depot.</div>
+        <?php else: ?>
+          <div class="bc-position-list" style="margin-top:16px;">
+            <?php foreach ($positions as $position): ?>
+              <?php $gainClass = (($position['gain_report'] ?? 0) >= 0) ? 'is-positive' : 'is-negative'; ?>
+              <div class="bc-position-row">
+                <div>
+                  <strong><?= e((string) $position['instrument_name']) ?></strong>
+                  <div class="bc-text" style="margin-top:4px;"><?= e((string) ($position['symbol'] ?? '')) ?> · <?= e((string) ($position['isin'] ?? '-')) ?></div>
+                  <?php if (!empty($position['market'])): ?>
+                    <div class="bc-pill-soft" style="margin-top:10px;"><?= e((string) $position['market']) ?></div>
+                  <?php endif; ?>
+                </div>
+                <div>
+                  <div class="bc-field-label">Stueckzahl</div>
+                  <div><?= e(number_format((float) $position['quantity'], 6, ',', '.')) ?></div>
+                </div>
+                <div>
+                  <div class="bc-field-label">Kaufpreis</div>
+                  <div><?= e(number_format((float) $position['purchase_price'], 2, ',', '.')) ?> <?= e((string) $position['purchase_currency']) ?></div>
+                </div>
+                <div>
+                  <div class="bc-field-label">Letzter Kurs</div>
+                  <div><?= $position['latest_price'] !== null ? e(number_format((float) $position['latest_price'], 2, ',', '.')) . ' ' . e((string) $position['latest_currency']) : 'n/a' ?></div>
+                </div>
+                <div>
+                  <div class="bc-field-label">Performance</div>
+                  <div class="bc-performance <?= e($gainClass) ?>">
+                    <?= isset($position['gain_report']) && $position['gain_report'] !== null ? e(number_format((float) $position['gain_report'], 2, ',', '.')) . ' ' . e($defaultReportCurrency) : 'n/a' ?>
+                  </div>
+                </div>
+              </div>
+            <?php endforeach; ?>
+          </div>
+        <?php endif; ?>
+      </section>
+    </div>
   </div>
 </div>