From fed25795cc905cea6e3aa830ca4f49f9fce904c5 Mon Sep 17 00:00:00 2001
From: team3 <team3@mitho-media.de>
Date: Wed, 24 Jun 2026 12:47:47 +0200
Subject: [PATCH] update

---
 frontend/src/components/BausteinFokus.vue | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/BausteinFokus.vue b/frontend/src/components/BausteinFokus.vue
index 6e220a7..517ccd9 100644
--- a/frontend/src/components/BausteinFokus.vue
+++ b/frontend/src/components/BausteinFokus.vue
@@ -232,7 +232,20 @@ watch(() => `${props.baustein.title}|${props.baustein.md}|${props.baustein.kompa
 .stand-badge.gold  { background: color-mix(in srgb, #d4af37 20%, var(--panel)); border-color: #d4af37; color: #8a6d12; }
 
 /* Erfahrungsleiste oben: füllt sich von links — gold (gemeistert) → lila (verstanden) → grün (absolviert). */
-.fokus-xp { display: flex; height: 6px; background: var(--panel-soft); }
+.fokus-xp { position: relative; display: flex; height: 8px; background: var(--panel-soft); }
+/* 9 Trennlinien alle 10 % → 10 sichtbare Abschnitte (Füllung bleibt durchgehend). */
+.fokus-xp::after {
+  content: '';
+  position: absolute; inset: 0;
+  pointer-events: none;
+  background: repeating-linear-gradient(
+    to right,
+    transparent 0,
+    transparent calc(10% - 2px),
+    var(--panel) calc(10% - 2px),
+    var(--panel) 10%
+  );
+}
 .xp-seg { height: 100%; transition: width 0.3s ease; }
 .xp-seg.gold { background: #d4af37; }
 .xp-seg.lila { background: #8b5cf6; }