From 885c4811d08bb9644621e7a7606ba17f6913066e Mon Sep 17 00:00:00 2001
From: team3 <team3@mitho-media.de>
Date: Sun, 21 Jun 2026 19:26:01 +0200
Subject: [PATCH] update

---
 frontend/src/components/BausteinPanel.vue | 34 ++++++++++++++++++++---
 1 file changed, 30 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/BausteinPanel.vue b/frontend/src/components/BausteinPanel.vue
index cf3061c..4f07276 100644
--- a/frontend/src/components/BausteinPanel.vue
+++ b/frontend/src/components/BausteinPanel.vue
@@ -639,7 +639,12 @@ function onPruefKey(e) {
     }
     return
   }
-  if (e.code === 'KeyQ') { e.preventDefault(); emit('setAnsicht', props.ansicht === 'kompakt' ? 'erklärend' : 'kompakt'); return }
+  if (e.code === 'KeyQ') {
+    e.preventDefault()
+    const r = ['kompakt', 'erklärend', 'grafik']
+    emit('setAnsicht', r[(r.indexOf(props.ansicht) + 1) % 3])
+    return
+  }
   if (e.code === 'KeyE') { e.preventDefault(); variantWechseln(); return }
   if (e.key === '2') { e.preventDefault(); primaerAktion(); return }
   // Erklären-Sondertasten
@@ -655,6 +660,7 @@ function onPruefKey(e) {
       <div v-if="mode === 'full'" class="bp-ansicht">
         <button :class="{ active: ansicht === 'kompakt' }" title="Merksätze" @click="emit('setAnsicht', 'kompakt')">Kompakt</button>
         <button :class="{ active: ansicht === 'erklärend' }" title="Ausführliche Erklärung" @click="emit('setAnsicht', 'erklärend')">Erklärend</button>
+        <button :class="{ active: ansicht === 'grafik' }" title="Diagramm" @click="emit('setAnsicht', 'grafik')">Grafik</button>
       </div>
       <button :class="{ active: activeTab === 'chat' }" @click="tabKlick('chat')">
         Chat
@@ -697,8 +703,14 @@ function onPruefKey(e) {
       <div v-else>
         <p class="bp-hint">
           <template v-if="amDeckel">{{ FORM_NAME[zeigeForm] }} · {{ score }}/{{ cap }} — <strong>Max</strong>.<template v-if="cap < VOLL"> Erstelle den {{ NAECHSTES_FORMAT[cap] }} für mehr.</template></template>
-          <template v-else>{{ FORM_NAME[zeigeForm] }} · {{ score }}/{{ bandZiel }} · {{ modusRegel }}<span v-if="imZufall" class="bp-hint-key"> · zufällig</span><span v-else-if="zeigeForm !== 'erklaeren'" class="bp-hint-key"> · Alt+E: Schwierigkeit</span></template>
+          <template v-else>{{ FORM_NAME[zeigeForm] }} · {{ score }}/{{ bandZiel }} · {{ modusRegel }}<span v-if="imZufall" class="bp-hint-key"> · zufällig</span></template>
         </p>
+        <button
+          v-if="!amDeckel && !imZufall && zeigeForm !== 'erklaeren'"
+          class="bp-variant"
+          title="Alt+E"
+          @click="variantWechseln"
+        >{{ aktSchwer ? 'Schwer' : 'Leicht' }} · wechseln</button>
 
         <!-- Quiz: Frage + Mehrfachauswahl (Widget bleibt auch am Deckel — Üben ohne Punkte) -->
         <template v-if="zeigeForm === 'quiz'">
@@ -848,7 +860,7 @@ function onPruefKey(e) {
 .bp-toggles button:hover { border-color: var(--border-strong); color: var(--text); }
 .bp-toggles button.active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
 
-/* Ansicht-Umschalter (Kompakt/Erklärend) — segmentiert, links vor den Tabs */
+/* Ansicht-Umschalter (Kompakt/Erklärend/Grafik) — segmentiert, links vor den Tabs */
 .bp-ansicht { display: inline-flex; margin-right: 0.5rem; }
 .bp-ansicht button {
   padding: 0.25rem 0.6rem;
@@ -859,10 +871,24 @@ function onPruefKey(e) {
   cursor: pointer;
 }
 .bp-ansicht button:first-child { border-radius: 999px 0 0 999px; }
-.bp-ansicht button:last-child { border-radius: 0 999px 999px 0; border-left: none; }
+.bp-ansicht button:last-child { border-radius: 0 999px 999px 0; }
+.bp-ansicht button + button { border-left: none; }
 .bp-ansicht button:hover { color: var(--text); }
 .bp-ansicht button.active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
 
+/* Schwierigkeits-Umschalter (Alt+E) — eigener Button, mobil tippbar */
+.bp-variant {
+  margin: 0 0 0.6rem;
+  padding: 0.2rem 0.7rem;
+  font-size: 0.72rem;
+  border: 1px solid var(--border-strong);
+  border-radius: 999px;
+  background: var(--panel-soft);
+  color: var(--text-muted);
+  cursor: pointer;
+}
+.bp-variant:hover { border-color: var(--accent); color: var(--text); }
+
 .bp-chip {
   font-size: 0.7rem;
   padding: 0 0.35rem;