Apply Petrol/Volt/Kupfer design system and project sidebar

Bring the Econsult-family design tokens (see design-system-econsult.md)
into leistungsbilanz-ts and add a persistent sidebar for the projects
area, mirroring elt-planung-suite / Einsatz-Orga. The sidebar lists all
projects and, inside a project, jumps to its sections; the tree editor
stays sidebar-free since it needs the full width. The projects overview
page is decluttered to a single stacked column (create/import/global
devices) now that the project list lives in the sidebar.

src/app/projects/[projectId]/page.tsx

@@ -661,9 +661,10 @@ export default function ProjectDetailPage() {
 
   return (
     <main className="container py-4">
-      <div className="d-flex flex-wrap justify-content-between align-items-center gap-3 mb-3">
+      <div className="page-header">
         <div>
-          <h1 className="h3 mb-1">{project?.name ?? "Projekt"}</h1>
+          <div className="kicker">Projekt</div>
+          <h1>{project?.name ?? "Projekt"}</h1>
           <p className="text-secondary mb-0">
             {project?.internalProjectNumber
               ? `Projektnummer ${project.internalProjectNumber} · `
@@ -688,9 +689,28 @@ export default function ProjectDetailPage() {
 
       {error ? <div className="alert alert-warning">{error}</div> : null}
 
+      <div className="kpi-grid">
+        <a className="kpi" href="#verteilungen">
+          <div className="kpi-label">Verteilungen</div>
+          <div className="kpi-value">{boardCount}</div>
+        </a>
+        <a className="kpi" href="#etagen">
+          <div className="kpi-label">Etagen</div>
+          <div className="kpi-value">{floorCount}</div>
+        </a>
+        <a className="kpi" href="#raeume">
+          <div className="kpi-label">Räume</div>
+          <div className="kpi-value">{roomCount}</div>
+        </a>
+        <a className="kpi" href="#projektgeraete">
+          <div className="kpi-label">Projektgeräte</div>
+          <div className="kpi-value">{projectDeviceCount}</div>
+        </a>
+      </div>
+
       <div className="row g-4">
         {project ? (
-          <section className="col-12">
+          <section className="col-12" id="verlauf">
             <ProjectVersionHistory
               currentRevision={project.currentRevision}
               onProjectStateChange={() => window.location.reload()}
@@ -699,7 +719,7 @@ export default function ProjectDetailPage() {
           </section>
         ) : null}
 
-        <section className="col-12">
+        <section className="col-12" id="verteilungen">
           <div className="card shadow-sm">
             <div className="card-header d-flex justify-content-between align-items-center">
               <div>
@@ -792,7 +812,7 @@ export default function ProjectDetailPage() {
           </div>
         </section>
 
-        <section className="col-12 col-lg-5">
+        <section className="col-12 col-lg-5" id="etagen">
           <div className="card shadow-sm h-100">
             <div className="card-header d-flex justify-content-between align-items-center">
               <div>
@@ -820,7 +840,7 @@ export default function ProjectDetailPage() {
           </div>
         </section>
 
-        <section className="col-12 col-lg-7">
+        <section className="col-12 col-lg-7" id="raeume">
           <div className="card shadow-sm">
             <div className="card-header d-flex justify-content-between align-items-center">
               <div>
@@ -866,7 +886,7 @@ export default function ProjectDetailPage() {
         </section>
       </div>
 
-      <section className="card shadow-sm mt-4">
+      <section className="card shadow-sm mt-4" id="projektgeraete">
         <div className="card-header d-flex flex-wrap justify-content-between align-items-center gap-2">
           <div>
             <span>Projektgeräte</span>