diff --git a/frontend/src/components/TopicDetail.vue b/frontend/src/components/TopicDetail.vue
index 675fae4..5d7fa84 100644
--- a/frontend/src/components/TopicDetail.vue
+++ b/frontend/src/components/TopicDetail.vue
@@ -153,12 +153,12 @@ function extractContext() {
             <article
               v-for="s in ch.sections"
               :key="s.num"
-              :class="['section-card', isOnePager && s.key ? 'op-card op-' + s.key : '']"
+              :class="['section-card', isOnePager && s.key ? 'op-card op-' + s.key : '', lernstand[s.title]?.absolviert ? 'absolviert' : '']"
               :style="isOnePager && s.key ? { gridArea: s.key } : null"
             >
               <h3>
                 {{ s.title }}
-                <span v-if="lernstand[s.title]?.absolviert" class="baustein-done" title="Baustein absolviert">✓</span>
+                <span v-if="lernstand[s.title]?.absolviert" class="baustein-done" title="Prüfung bestanden">✓ Absolviert</span>
               </h3>
               <div class="section-body markdown" v-html="renderMarkdown(s.md)"></div>
               <BausteinPanel
@@ -305,9 +305,24 @@ function extractContext() {
 }
 
 .baustein-done {
-  margin-left: 0.35rem;
-  font-size: 0.85em;
+  float: right;
+  margin-left: 0.5rem;
+  padding: 0.12rem 0.6rem;
+  font-size: 0.68em;
+  font-weight: 600;
+  line-height: 1.5;
+  border-radius: 999px;
+  background: var(--success-soft);
+  border: 1px solid var(--success-border);
   color: var(--success);
+  white-space: nowrap;
+}
+
+/* Absolvierte Bausteine: Karte kippt sichtbar auf Grün */
+.guide-content:not(.onepager) .section-card.absolviert {
+  border-color: var(--success-border);
+  border-top: 3px solid var(--success);
+  background: color-mix(in srgb, var(--success) 5%, var(--panel));
 }
 
 /* Guides: Karten tragen die Kapitel-Akzentfarbe (OnePager hat eigene op-card-Farben) */