update

frontend/src/components/TopicDetail.vue

@@ -43,6 +43,9 @@ const emit = defineEmits(['progressChanged'])
 
 const isOnePager = computed(() => props.previewGuide?.format === 'OnePager')
 
+// Rotierende Kapitel-Akzentfarben (passend zum OnePager-Cheat-Sheet, ohne Rot)
+const CH_COLORS = ['#3b82f6', '#8b5cf6', '#14b8a6', '#f59e0b', '#22c55e', '#6366f1']
+
 // --- Inhalt laden ---
 const content = ref(null)
 const doneChapters = ref(new Set())
@@ -204,12 +207,13 @@ async function send() {
           <span class="guide-format">{{ previewGuide.format }}</span>
         </header>
         <section
-          v-for="ch in content.chapters"
+          v-for="(ch, ci) in content.chapters"
           :key="ch.title"
           class="chapter"
           :class="{ 'ch-complete': doneChapters.has(ch.title) }"
+          :style="{ '--ch-accent': CH_COLORS[ci % CH_COLORS.length] }"
         >
-          <h2 class="chapter-title">{{ ch.title }}</h2>
+          <h2 class="chapter-title"><span class="ch-num">{{ ci + 1 }}</span>{{ ch.title }}</h2>
           <div class="sections">
             <article
               v-for="s in ch.sections"
@@ -324,7 +328,24 @@ async function send() {
   font-size: 1.25rem;
   margin-bottom: 0.9rem;
   padding-bottom: 0.4rem;
-  border-bottom: 2px solid var(--accent-border);
+  border-bottom: 2px solid color-mix(in srgb, var(--ch-accent, var(--accent)) 35%, transparent);
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.ch-num {
+  flex: 0 0 auto;
+  width: 28px;
+  height: 28px;
+  border-radius: 8px;
+  background: var(--ch-accent, var(--accent));
+  color: #fff;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.85rem;
+  font-weight: 700;
 }
 
 .chapter.ch-complete .sections {
@@ -337,6 +358,15 @@ async function send() {
   border-radius: 10px;
   padding: 1rem 1.25rem;
   margin-bottom: 0.75rem;
+}
+
+/* Guides: Karten tragen die Kapitel-Akzentfarbe (OnePager hat eigene op-card-Farben) */
+.guide-content:not(.onepager) .section-card {
+  border-top: 3px solid color-mix(in srgb, var(--ch-accent, var(--accent)) 65%, transparent);
+  background: color-mix(in srgb, var(--ch-accent, var(--accent)) 3%, var(--panel));
+}
+
+.section-card {
 
   h3 {
     font-size: 1.02rem;
@@ -535,6 +565,15 @@ async function send() {
   margin: 0.6em 0 0.3em;
 }
 
+/* „Beispiel"-Überschriften in Karten als dezentes Uppercase-Label */
+.section-card .markdown :deep(h3) {
+  font-size: 0.74em;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--text-faint);
+  margin: 0.9em 0 0.35em;
+}
+
 .markdown :deep(a) {
   color: var(--accent-hover);
 }