update

frontend/src/components/TopicDetail.vue

@@ -214,7 +214,7 @@ async function send() {
             <article
               v-for="s in ch.sections"
               :key="s.num"
-              class="section-card"
+              :class="['section-card', isOnePager && s.key ? 'op-card op-' + s.key : '']"
               :style="isOnePager && s.key ? { gridArea: s.key } : null"
             >
               <h3>{{ s.title }}</h3>
@@ -394,6 +394,41 @@ async function send() {
   }
 }
 
+/* Farbkodiertes Cheat-Sheet: feste Akzentfarbe + Icon pro Karte */
+.op-info { --op-accent: #3b82f6; }
+.op-eigenschaften { --op-accent: #8b5cf6; --op-icon: "☰"; }
+.op-beispiel { --op-accent: #64748b; --op-icon: "❯"; }
+.op-zusammenhaenge { --op-accent: #14b8a6; --op-icon: "⇄"; }
+.op-voraussetzungen { --op-accent: #f59e0b; --op-icon: "✓"; }
+.op-modern { --op-accent: #22c55e; --op-icon: "✦"; }
+.op-veraltet { --op-accent: #ef4444; --op-icon: "⚠"; }
+
+.guide-content.onepager .section-card.op-card {
+  border-top: 3px solid var(--op-accent);
+  background: color-mix(in srgb, var(--op-accent) 5%, var(--panel));
+
+  h3 {
+    color: var(--op-accent);
+    font-size: 0.95rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  h3::before {
+    content: var(--op-icon, "");
+    margin-right: 7px;
+  }
+}
+
+/* Info-Karte: Thema als große Headline statt Uppercase-Label */
+.guide-content.onepager .op-card.op-info h3 {
+  font-size: 1.5rem;
+  text-transform: none;
+  letter-spacing: 0;
+  color: var(--text);
+}
+
 /* Mobil: eine Spalte in Quellreihenfolge (info → … → veraltet) */
 @media (max-width: 900px) {
   .guide-content.onepager {