theme.css: CSS-Variablen für Farben und Größen, alle Files umgestellt

wwwroot/css/main.css

@@ -20,71 +20,71 @@ body {
 /* ── Nav ── */
 
 #nav {
-  padding: .75em 1.5em;
-  border-bottom: 1px solid #444;
+  padding: var(--s3) calc(var(--s4) * 1.5);
+  border-bottom: 1px solid var(--f2-border);
   display: flex;
   align-items: center;
-  gap: 2em;
+  gap: calc(var(--s4) * 2);
   flex-shrink: 0;
 }
 
 .nav-links {
   display: flex;
-  gap: 1em;
+  gap: var(--s4);
 }
 
 .nav-link {
-  color: #888;
+  color: var(--f3-border);
   text-decoration: none;
-  padding: .25em .5em;
+  padding: var(--s1) var(--s2);
 }
 
-.nav-link:hover { color: #eee; }
-.nav-link.active { color: #eee; border-bottom: 2px solid #eee; }
+.nav-link:hover { color: var(--text); }
+.nav-link.active { color: var(--text); border-bottom: 2px solid var(--primary); }
 
 /* ── Dashboard ── */
 
 .dashboard {
-  padding: 2em;
+  padding: calc(var(--s4) * 2);
   overflow-y: auto;
 }
 
 .dashboard section {
-  margin-bottom: 2em;
+  margin-bottom: calc(var(--s4) * 2);
 }
 
 .section-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: 1em;
+  margin-bottom: var(--s4);
 }
 
 .card-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
-  gap: 1em;
+  gap: var(--s4);
 }
 
 .card {
-  background: #333;
-  border: 1px solid #444;
-  padding: 1em;
+  background: var(--f3-bg);
+  border: 1px solid var(--f3-border);
+  padding: var(--s4);
   display: flex;
   flex-direction: column;
-  gap: .5em;
+  gap: var(--s2);
 }
 
 .card.clickable { cursor: pointer; }
-.card.clickable:hover { border-color: #888; }
+.card.clickable:hover { border-color: var(--primary); }
 
 .card-icon { font-size: 2em; }
 .card-title { font-weight: bold; }
-.card-sub { color: #888; }
+.card-sub { color: var(--f3-border); }
 
 .card.placeholder {
   border-style: dashed;
-  color: #666;
+  color: var(--f2-border);
 }
 
 /* ── Session Page ── */
@@ -95,18 +95,18 @@ body {
 }
 
 .session-header {
-  padding: .75em 1.5em;
-  border-bottom: 1px solid #444;
+  padding: var(--s3) calc(var(--s4) * 1.5);
+  border-bottom: 1px solid var(--f2-border);
   display: flex;
   align-items: center;
-  gap: 1em;
+  gap: var(--s4);
   flex-shrink: 0;
 }
 
 .back-btn {
   background: none;
   border: none;
-  padding: .25em .5em;
+  padding: var(--s1) var(--s2);
 }
 
 .editable-title {
@@ -126,8 +126,8 @@ body {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 1em;
-  color: #888;
+  gap: var(--s4);
+  color: var(--f3-border);
 }
 
 .placeholder-icon {