diff --git a/App/admin-styleguide.html b/App/admin-styleguide.html
index 81e1a73..575b8a9 100644
--- a/App/admin-styleguide.html
+++ b/App/admin-styleguide.html
@@ -235,82 +235,104 @@
 
   <!-- ============================================================== -->
   <div class="card" id="kopfzeile">
-    <div class="card-h">Kopfzeile — Vereinheitlichung (3 Entwürfe)</div>
-    <p class="lead">Eine Standard-Kopfzeile für ALLE Sims: <strong>Kreis-Logo</strong> (ohne Schriftzug) · 🏠 Home · Sim-Titel + Kontext (Level/Phase) — rechts <strong>⏱ Tempo</strong> (nur Echtzeit-Sims) · 🎵 Musik · 🔊 Ton · 🔄 Neustart · ℹ️ Hilfe · 📖 Glossar (<code>target="_blank"</code>). Lehrplan entfällt. Musik überall (Klima-Track als Platzhalter).</p>
+    <div class="card-h">Kopfzeile — Entwurf B (schwebend)</div>
+    <p class="lead">Standard-Kopfzeile für ALLE Sims: <strong>Kreis-Logo · Titel · Level</strong> als eine schwebende Pille — Home und rechts die Steuerung: <strong>Tempo</strong> (nur Echtzeit-Sims) · Musik · Ton · Neustart · Hilfe · Glossar (<code>target="_blank"</code>). <strong>Eigene Icons im App-Stil</strong> statt Emojis, alle Elemente auf <strong>gleicher Höhe</strong>. Lehrplan entfällt. Musik überall (Klima-Track als Platzhalter).</p>
     <style>
       .khz-scene{position:relative;border-radius:12px;overflow:hidden;background:linear-gradient(135deg,#a7cbe0 0%,#8bb98d 55%,#e6dca6 100%);border:1px solid #cfd6cf}
       .khz-scene .khz-sky{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.5);font-size:1.5rem;font-weight:800;letter-spacing:.08em;pointer-events:none}
       .khz-scene .khz-content{position:absolute;left:14px;bottom:12px;display:flex;gap:8px;pointer-events:none}
       .khz-scene .khz-content i{width:70px;height:44px;border-radius:8px;background:rgba(255,255,255,.35);display:block}
-      .ghdr{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;gap:.45rem;padding:.45rem .65rem;z-index:3}
+      /* Alle Header-Elemente 38px hoch, vertikal zentriert (Logo·Titel·Level = eine Pille) */
+      .ghdr{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;gap:.5rem;padding:.55rem .7rem;z-index:3}
       .ghdr .sp{flex:1}
-      .ghdr .logo{width:34px;height:34px;border-radius:50%;background:#1f4e5a;color:#fff;display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:800;flex:none}
-      .ghdr .tw{display:flex;align-items:center;gap:.45rem;padding:.15rem .1rem}
-      .ghdr .title{font-weight:800;color:#1f4e5a;font-size:.92rem;white-space:nowrap}
-      .ghdr .ctx{font-size:.64rem;font-weight:700;color:#4a7c8a;background:#dae8ec;border-radius:10px;padding:.12rem .5rem;white-space:nowrap}
-      .ghdr .btn{width:34px;height:34px;border-radius:9px;border:1px solid rgba(0,0,0,.08);background:#fff;display:flex;align-items:center;justify-content:center;font-size:.98rem;flex:none}
-      /* A durchgehend */
-      .ghdr.solid{background:#fff;border-bottom:1px solid rgba(0,0,0,.08);box-shadow:0 1px 5px rgba(0,0,0,.08)}
-      /* B schwebend — einzelne Pillen mit Schatten, kein durchgehender Grund */
-      .ghdr.float{background:transparent}
-      .ghdr.float .logo,.ghdr.float .btn,.ghdr.float .tw{box-shadow:0 2px 8px rgba(0,0,0,.22)}
-      .ghdr.float .tw{background:rgba(255,255,255,.94);border-radius:10px;padding:.2rem .55rem}
-      /* C schwebend + halbtransparent, bei Hover voll */
-      .ghdr.ghost{background:transparent}
-      .ghdr.ghost .logo,.ghdr.ghost .btn,.ghdr.ghost .tw{box-shadow:0 2px 8px rgba(0,0,0,.22);opacity:.45;transition:opacity .2s}
-      .ghdr.ghost .tw{background:rgba(255,255,255,.94);border-radius:10px;padding:.2rem .55rem}
-      .ghdr.ghost:hover .logo,.ghdr.ghost:hover .btn,.ghdr.ghost:hover .tw{opacity:1}
+      .ghdr .grp{display:flex;align-items:center;gap:.5rem;height:38px;padding:0 .8rem 0 .3rem;background:rgba(255,255,255,.96);border-radius:19px;box-shadow:0 2px 9px rgba(0,0,0,.2)}
+      .ghdr .grp .logo{width:30px;height:30px;border-radius:50%;background:#1f4e5a;flex:none;overflow:hidden;display:flex;align-items:center;justify-content:center}
+      .ghdr .grp .logo img{width:100%;height:100%;object-fit:cover}
+      .ghdr .grp .title{font-weight:800;color:#1f4e5a;font-size:.92rem;white-space:nowrap;line-height:1}
+      .ghdr .grp .ctx{font-size:.6rem;font-weight:800;color:#fff;background:#5a8a5e;border-radius:9px;padding:.2rem .5rem;line-height:1;white-space:nowrap}
+      .ghdr .btn{width:38px;height:38px;border-radius:12px;border:none;background:rgba(255,255,255,.96);box-shadow:0 2px 9px rgba(0,0,0,.2);display:flex;align-items:center;justify-content:center;cursor:pointer;color:#1f4e5a;padding:0}
+      .ghdr .btn .ic{width:20px;height:20px}
       .khz-variant{margin:1rem 0}
-      .khz-variant h3{margin-bottom:.2rem}
-      .khz-tag{font-size:.7rem;color:#6a6a6a;margin:0 0 .5rem}
-      .khz-frame-lab{font-size:.66rem;font-weight:700;color:#8a8a8a;text-transform:uppercase;letter-spacing:.04em;margin:.5rem 0 .25rem}
+      .khz-frame-lab{font-size:.66rem;font-weight:700;color:#8a8a8a;text-transform:uppercase;letter-spacing:.04em;margin:.9rem 0 .3rem}
       .khz-ipad{height:150px}
       .khz-fhd{height:120px}
       .khz-scroll{overflow-x:auto}
+      /* Aufgeklappte Steuerung */
+      .khz-pop{display:inline-flex;align-items:center;gap:.25rem;height:38px;padding:0 .3rem;background:#fff;border-radius:12px;box-shadow:0 2px 9px rgba(0,0,0,.14);border:1px solid rgba(0,0,0,.06);vertical-align:middle}
+      .khz-pop .ic{width:16px;height:16px;color:#1f4e5a}
+      .khz-seg{height:30px;min-width:36px;padding:0 .6rem;border:none;background:transparent;border-radius:8px;font-weight:800;font-size:.82rem;color:#4a4a4a;cursor:pointer;display:flex;align-items:center;justify-content:center}
+      .khz-seg.on{background:#4a7c8a;color:#fff}
+      .khz-seg.on .ic{color:#fff}
+      .khz-music{gap:.5rem;padding:0 .55rem}
+      .khz-select{height:30px;border:1px solid rgba(0,0,0,.12);border-radius:8px;padding:0 .55rem;font-size:.78rem;color:#1f4e5a;font-weight:700;background:#f7f6f3;display:inline-flex;align-items:center;gap:.35rem;white-space:nowrap}
+      .khz-range{width:96px;height:6px;border-radius:99px;background:linear-gradient(90deg,#4a7c8a 0 62%,#dfe6e9 62% 100%);position:relative}
+      .khz-range::after{content:'';position:absolute;left:62%;top:50%;transform:translate(-50%,-50%);width:14px;height:14px;border-radius:50%;background:#4a7c8a;box-shadow:0 1px 3px rgba(0,0,0,.3)}
     </style>
+    <svg width="0" height="0" style="position:absolute" aria-hidden="true"><defs>
+      <symbol id="ic-home" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11.4 12 4l8 7.4"/><path d="M6 10.3V19a1 1 0 0 0 1 1h3v-5h4v5h3a1 1 0 0 0 1-1v-8.7"/></symbol>
+      <symbol id="ic-tempo" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4.6 16.5a7.5 7.5 0 0 1 14.8 0"/><path d="M12 16 15.2 12"/><circle cx="12" cy="16.3" r="1.3" fill="currentColor" stroke="none"/></symbol>
+      <symbol id="ic-music" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M9 17V6.4l9-1.8V15"/><circle cx="6.5" cy="17" r="2.4"/><circle cx="15.5" cy="15" r="2.4"/></symbol>
+      <symbol id="ic-sound" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 9.5h3.2L11 6v12l-3.8-3.5H4z"/><path d="M14.6 9.6a4 4 0 0 1 0 4.8"/><path d="M17 7.4a7 7 0 0 1 0 9.2"/></symbol>
+      <symbol id="ic-restart" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12a7 7 0 1 1-2-4.9"/><path d="M19 4.5V9h-4.5"/></symbol>
+      <symbol id="ic-help" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="8.4"/><path d="M9.7 9.3a2.4 2.4 0 0 1 4.6.8c0 1.6-2.3 1.8-2.3 3.2"/><circle cx="12" cy="16.4" r=".7" fill="currentColor" stroke="none"/></symbol>
+      <symbol id="ic-glossar" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 6.6C10 5.2 7 5.2 5 6.2v11c2-1 5-1 7 .4"/><path d="M12 6.6c2-1.4 5-1.4 7-.4v11c-2-1-5-1-7 .4"/><path d="M12 6.6v11.4"/></symbol>
+      <symbol id="ic-pause" viewBox="0 0 24 24"><rect x="6" y="5" width="4" height="14" rx="1.2" fill="currentColor"/><rect x="14" y="5" width="4" height="14" rx="1.2" fill="currentColor"/></symbol>
+      <symbol id="ic-caret" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M7 10l5 5 5-5"/></symbol>
+    </defs></svg>
 
-    <p style="font-size:.78rem;color:#4a4a4a;margin:.2rem 0 1rem"><b>Fahre mit der Maus über Entwurf C</b>, um den Halbtransparent-Effekt (voll bei Hover) zu sehen. Die Stufen hinter der Zeile deuten den Sim-Inhalt an — so sieht man, wie viel jede Variante verdeckt.</p>
+    <p style="font-size:.78rem;color:#4a4a4a;margin:.2rem 0 .3rem">Die Stufen hinter der Zeile deuten den Sim-Inhalt an — so sieht man, wie wenig die schwebende Zeile verdeckt. Logo, Titel und Level sitzen in <b>einer</b> Pille auf gleicher Höhe wie die Buttons.</p>
 
-    <!-- Entwurf A -->
     <div class="khz-variant">
-      <h3>A — Durchgehend (wie Klimawächter)</h3>
-      <p class="khz-tag">Klar abgegrenzter Balken. Sehr eindeutig, verdeckt aber einen festen Streifen des Hauptfensters.</p>
       <div class="khz-frame-lab">📱 iPad-Landscape (~1024 px)</div>
       <div class="khz-scene khz-ipad" style="max-width:1024px">
         <div class="khz-sky">SIM-INHALT</div><div class="khz-content"><i></i><i></i><i></i></div>
-        <div class="ghdr solid"><span class="logo">GGS</span><button class="btn" title="Startseite">🏠</button><span class="tw"><span class="title">🌍 Klimawächter</span><span class="ctx">Level 2</span></span><span class="sp"></span><button class="btn" title="Tempo">⏱</button><button class="btn" title="Musik">🎵</button><button class="btn" title="Ton">🔊</button><button class="btn" title="Neustart">🔄</button><button class="btn" title="Hilfe">ℹ️</button><button class="btn" title="Glossar (neuer Tab)">📖</button></div>
-      </div>
-    </div>
-
-    <!-- Entwurf B -->
-    <div class="khz-variant">
-      <h3>B — Schwebend (wie Landwirtschaft) · <span style="color:#5a8a5e">Atlas-Empfehlung</span></h3>
-      <p class="khz-tag">Einzelne Elemente „schweben" über dem Inhalt. Wirkt leichter, verdeckt weniger, zeigt mehr vom Hauptfenster.</p>
-      <div class="khz-frame-lab">📱 iPad-Landscape (~1024 px)</div>
-      <div class="khz-scene khz-ipad" style="max-width:1024px">
-        <div class="khz-sky">SIM-INHALT</div><div class="khz-content"><i></i><i></i><i></i></div>
-        <div class="ghdr float"><span class="logo">GGS</span><button class="btn" title="Startseite">🏠</button><span class="tw"><span class="title">🌍 Klimawächter</span><span class="ctx">Level 2</span></span><span class="sp"></span><button class="btn" title="Tempo">⏱</button><button class="btn" title="Musik">🎵</button><button class="btn" title="Ton">🔊</button><button class="btn" title="Neustart">🔄</button><button class="btn" title="Hilfe">ℹ️</button><button class="btn" title="Glossar (neuer Tab)">📖</button></div>
+        <div class="ghdr">
+          <div class="grp"><span class="logo"><img src="assets/img/bildLogo.png" alt=""></span><span class="title">Klimawächter</span><span class="ctx">Level 2</span></div>
+          <button class="btn" title="Startseite"><svg class="ic"><use href="#ic-home"/></svg></button>
+          <span class="sp"></span>
+          <button class="btn" title="Tempo"><svg class="ic"><use href="#ic-tempo"/></svg></button>
+          <button class="btn" title="Musik"><svg class="ic"><use href="#ic-music"/></svg></button>
+          <button class="btn" title="Ton"><svg class="ic"><use href="#ic-sound"/></svg></button>
+          <button class="btn" title="Neustart"><svg class="ic"><use href="#ic-restart"/></svg></button>
+          <button class="btn" title="Hilfe"><svg class="ic"><use href="#ic-help"/></svg></button>
+          <button class="btn" title="Glossar (neuer Tab)"><svg class="ic"><use href="#ic-glossar"/></svg></button>
+        </div>
       </div>
       <div class="khz-frame-lab">🖥️ Full-HD PC (1920 px — mehr Platz zwischen den Elementen)</div>
       <div class="khz-scroll"><div class="khz-scene khz-fhd" style="width:1600px">
         <div class="khz-sky">SIM-INHALT</div><div class="khz-content"><i></i><i></i><i></i><i></i><i></i></div>
-        <div class="ghdr float"><span class="logo">GGS</span><button class="btn" title="Startseite">🏠</button><span class="tw"><span class="title">🌍 Klimawächter</span><span class="ctx">Level 2</span></span><span class="sp"></span><button class="btn" title="Tempo">⏱</button><button class="btn" title="Musik">🎵</button><button class="btn" title="Ton">🔊</button><button class="btn" title="Neustart">🔄</button><button class="btn" title="Hilfe">ℹ️</button><button class="btn" title="Glossar (neuer Tab)">📖</button></div>
+        <div class="ghdr">
+          <div class="grp"><span class="logo"><img src="assets/img/bildLogo.png" alt=""></span><span class="title">Klimawächter</span><span class="ctx">Level 2</span></div>
+          <button class="btn" title="Startseite"><svg class="ic"><use href="#ic-home"/></svg></button>
+          <span class="sp"></span>
+          <button class="btn" title="Tempo"><svg class="ic"><use href="#ic-tempo"/></svg></button>
+          <button class="btn" title="Musik"><svg class="ic"><use href="#ic-music"/></svg></button>
+          <button class="btn" title="Ton"><svg class="ic"><use href="#ic-sound"/></svg></button>
+          <button class="btn" title="Neustart"><svg class="ic"><use href="#ic-restart"/></svg></button>
+          <button class="btn" title="Hilfe"><svg class="ic"><use href="#ic-help"/></svg></button>
+          <button class="btn" title="Glossar (neuer Tab)"><svg class="ic"><use href="#ic-glossar"/></svg></button>
+        </div>
       </div></div>
     </div>
 
-    <!-- Entwurf C -->
-    <div class="khz-variant">
-      <h3>C — Schwebend + halbtransparent (voll bei Hover)</h3>
-      <p class="khz-tag">Wie B, aber die Elemente sind halbtransparent und werden erst bei Maus-Berührung voll sichtbar — maximaler Blick auf den Inhalt. (Am iPad: „voll" per Antippen.)</p>
-      <div class="khz-frame-lab">📱 iPad-Landscape (~1024 px) — <b>Maus drüber = voll</b></div>
-      <div class="khz-scene khz-ipad" style="max-width:1024px">
-        <div class="khz-sky">SIM-INHALT</div><div class="khz-content"><i></i><i></i><i></i></div>
-        <div class="ghdr ghost"><span class="logo">GGS</span><button class="btn" title="Startseite">🏠</button><span class="tw"><span class="title">🌍 Klimawächter</span><span class="ctx">Level 2</span></span><span class="sp"></span><button class="btn" title="Tempo">⏱</button><button class="btn" title="Musik">🎵</button><button class="btn" title="Ton">🔊</button><button class="btn" title="Neustart">🔄</button><button class="btn" title="Hilfe">ℹ️</button><button class="btn" title="Glossar (neuer Tab)">📖</button></div>
-      </div>
+    <div class="khz-frame-lab">Aufgeklappt · Tempo (Klick auf das Tempo-Icon — nur Echtzeit-Sims)</div>
+    <div class="khz-pop">
+      <button class="khz-seg" title="Pause"><svg class="ic"><use href="#ic-pause"/></svg></button>
+      <button class="khz-seg on">1×</button>
+      <button class="khz-seg">2×</button>
+      <button class="khz-seg">4×</button>
     </div>
 
-    <div style="background:#f0f7f1;border:1px solid #cfe6d2;border-radius:8px;padding:.7rem .9rem;font-size:.8rem;color:#2f5e39;margin-top:.6rem">
-      <b>Aufbau (alle Varianten gleich):</b> links Kreis-Logo · 🏠 Home · Titel + Kontext — rechts ⏱ Tempo (nur Echtzeit-Sims: Klima, Fluss, Tourismus, Logistik) · 🎵 Musik · 🔊 Ton · 🔄 Neustart · ℹ️ Hilfe · 📖 Glossar (neuer Tab). Sim-eigene KPIs (Budget, Jahr …) bleiben in einer eigenen Unterzeile, nicht in der Markenzeile.
+    <div class="khz-frame-lab">Aufgeklappt · Musikplayer (Klick auf das Musik-Icon)</div>
+    <div class="khz-pop khz-music">
+      <button class="khz-seg on" title="Pause"><svg class="ic"><use href="#ic-pause"/></svg></button>
+      <span class="khz-select"><svg class="ic"><use href="#ic-music"/></svg> Ruhige Klänge <svg class="ic"><use href="#ic-caret"/></svg></span>
+      <svg class="ic" style="width:18px;height:18px;color:#1f4e5a"><use href="#ic-sound"/></svg>
+      <span class="khz-range"></span>
+    </div>
+
+    <div style="background:#f0f7f1;border:1px solid #cfe6d2;border-radius:8px;padding:.7rem .9rem;font-size:.8rem;color:#2f5e39;margin-top:1rem">
+      <b>Aufbau:</b> links die Pille Kreis-Logo · Titel · Level (gleiche Höhe) + Home — rechts Tempo (nur Echtzeit-Sims: Klima, Fluss, Tourismus, Logistik) · Musik · Ton · Neustart · Hilfe · Glossar (neuer Tab). Eigene SVG-Icons im App-Stil. Sim-eigene KPIs (Budget, Jahr …) bleiben in einer eigenen Unterzeile, nicht in der Markenzeile.
     </div>
   </div>