Farmer-Header v2 nach Thomas-Feedback + Default-Musikplayer

- Header nach oben RECHTS (raus aus dem Leaflet-Zoom oben links),
  Geld-Anzeige entfernt (steht in linker Sidebar), Emoji aus Titel,
  Jahr als Badge in die Pille (Konsistenz mit Batch 1), Inter-Font.
- Jahr-Leiste + Anbau-Versuch-Spalte nach unten geschoben (unter Header).
- Komponente: wiederverwendbarer Default-Musikplayer (data-ggs-music,
  Klima-Tracks als Plattform-Standard) + Musik-Widget-Styling fuer Sims
  ohne design-system.css.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

App/assets/css/ggs-header.css

@@ -21,6 +21,7 @@
   position: relative;
   z-index: 1000;
   flex-wrap: nowrap;
+  font-family: 'Inter', system-ui, -apple-system, sans-serif;
 }
 
 /* Overlay-Modus: Zeile schwebt über Vollbild-Canvas (Heli, Tourismus …).
@@ -247,6 +248,37 @@
   height: auto;
 }
 .ggs-header--float .ggs-pop--music .ggs-music[hidden] { display: inline-flex !important; }
+/* Musik-Bedienelemente selbst gestalten (auch für Sims ohne design-system.css) */
+.ggs-header--float .ggs-pop--music .ggs-music-sel {
+  height: 30px;
+  border: 1px solid rgba(0, 0, 0, .12);
+  border-radius: 8px;
+  padding: 0 .5rem;
+  font-size: .78rem;
+  font-weight: 700;
+  color: #1f4e5a;
+  background: #f7f6f3;
+  max-width: 130px;
+}
+.ggs-header--float .ggs-pop--music .ggs-music-btn {
+  width: 30px;
+  height: 30px;
+  border: none;
+  border-radius: 8px;
+  background: #4a7c8a;
+  color: #fff;
+  font-size: .8rem;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+}
+.ggs-header--float .ggs-pop--music .ggs-music-btn.playing { background: #5a8a5e; }
+.ggs-header--float .ggs-pop--music .ggs-music-vol {
+  width: 84px;
+  accent-color: #4a7c8a;
+}
 
 /* Schmaler auf iPad-Landscape (Platz sparen) */
 @media (max-width: 1100px) {

App/assets/js/ggs-header.js

@@ -87,6 +87,43 @@
     new MutationObserver(apply).observe(btn, { childList: true, characterData: true, subtree: true });
   }
 
+  /* Standard-Musikplayer (Klima-Tracks als Plattform-Default) für Sims
+     ohne eigenen Player. Aktiviert per data-ggs-music="default". */
+  // Plattform-Standardmusik (Platzhalter: Klima-Tracks, dort abgelegt)
+  var DEFAULT_TRACKS = [
+    { label: '🎹 Lounge',  file: '/sims/klima/assets/music/piano-lobby.mp3' },
+    { label: '🌿 Ambient', file: '/sims/klima/assets/music/fingertip-rain.mp3' },
+    { label: '🌙 Ruhig',   file: '/sims/klima/assets/music/limestone-lullaby.mp3' },
+    { label: '☕ Chill',    file: '/sims/klima/assets/music/vibrocoffee-calm.mp3' },
+    { label: '🎭 Drama',    file: '/sims/klima/assets/music/rising-pressure.mp3' }
+  ];
+  function buildDefaultMusic() {
+    var wrap = document.createElement('div');
+    wrap.className = 'ggs-music';
+    wrap.id = 'ggs-music';
+    var sel = document.createElement('select');
+    sel.className = 'ggs-music-sel'; sel.id = 'ggs-music-sel'; sel.title = 'Musik wählen';
+    DEFAULT_TRACKS.forEach(function (t) {
+      var o = document.createElement('option'); o.value = t.file; o.textContent = t.label; sel.appendChild(o);
+    });
+    var btn = document.createElement('button');
+    btn.className = 'ggs-music-btn'; btn.id = 'ggs-music-toggle'; btn.type = 'button'; btn.title = 'Play / Pause'; btn.textContent = '▶';
+    var vol = document.createElement('input');
+    vol.type = 'range'; vol.className = 'ggs-music-vol'; vol.id = 'ggs-music-vol';
+    vol.min = 0; vol.max = 100; vol.value = 30; vol.title = 'Lautstärke';
+    wrap.appendChild(sel); wrap.appendChild(btn); wrap.appendChild(vol);
+
+    var audio = new Audio();
+    audio.loop = true; audio.volume = 0.3; audio.src = DEFAULT_TRACKS[0].file;
+    var playing = false;
+    function play() { audio.play().then(function () { playing = true; btn.textContent = '⏸'; btn.classList.add('playing'); }).catch(function () {}); }
+    function pause() { audio.pause(); playing = false; btn.textContent = '▶'; btn.classList.remove('playing'); }
+    btn.addEventListener('click', function (e) { e.stopPropagation(); playing ? pause() : play(); });
+    sel.addEventListener('change', function () { audio.src = sel.value; if (playing) play(); });
+    vol.addEventListener('input', function () { audio.volume = (vol.value || 0) / 100; });
+    return wrap;
+  }
+
   /* ------------------------------------------------------------ */
   function enhance(header, opts) {
     if (!header || header.hasAttribute('data-ggs-enhanced')) return;
@@ -212,7 +249,12 @@
       });
     }
 
-    /* --- 5) Musik-Panel (nur wenn #ggs-music vorhanden) ------- */
+    /* --- 5) Musik-Panel ---------------------------------------- */
+    // Default-Player erzeugen, falls die Sim keinen eigenen Player hat
+    var musicSpec = opts.music || header.getAttribute('data-ggs-music');
+    if (musicSpec && !q('#ggs-music') && actions) {
+      actions.appendChild(buildDefaultMusic());
+    }
     var music = q('#ggs-music');
     var musicWrap = null;
     if (music) {

App/sims/farmer/game.html

@@ -8,6 +8,7 @@
 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
       integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="">
 
+<link rel="stylesheet" href="../../assets/fonts/inter.css">
 <link rel="stylesheet" href="../../assets/css/ggs-header.css">
 <script src="../../assets/js/ggs-header.js"></script>
 
@@ -21,7 +22,7 @@
 
   /* ===== Topbar ===== */
   .ggs-topbar {
-    position: absolute; top: 8px; left: 8px; z-index: 1000;
+    position: absolute; top: 8px; right: 8px; left: auto; z-index: 1001;
     display: flex; gap: 8px; align-items: center; font-size: 13px;
   }
   .ggs-topbar a {
@@ -42,7 +43,7 @@
 
   /* ===== Year-Bar ===== */
   .farmer-year-bar {
-    position: absolute; top: 8px; right: 8px; z-index: 1000;
+    position: absolute; top: 60px; right: 8px; z-index: 1000;
     background: rgba(255, 255, 255, 0.95);
     padding: 6px 10px; border-radius: 8px;
     box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
@@ -125,7 +126,7 @@
 
   /* ===== Side-Panel (rechts unter Year-Bar) — toggelt zwischen Picker und Report ===== */
   .farmer-side {
-    position: absolute; right: 8px; top: 76px; z-index: 1000;
+    position: absolute; right: 8px; top: 112px; z-index: 1000;
     max-height: calc(100dvh - 92px - env(safe-area-inset-bottom));
     overflow-y: auto;
     width: 240px;
@@ -487,9 +488,9 @@
 </head>
 <body>
 
-<div class="ggs-topbar ggs-header" data-ggs-sim="farmer" data-ggs-no-glossar data-ggs-home="/schueler">
+<div class="ggs-topbar ggs-header" data-ggs-sim="farmer" data-ggs-no-glossar data-ggs-home="/schueler" data-ggs-music="default">
-  <h1 class="ggs-header-module">🌾 Landwirtschaft</h1>
+  <h1 class="ggs-header-module">Landwirtschaft</h1>
-  <div class="farmer-money" id="money-display">0 €</div>
+  <span class="ggs-header-badge">Jahr&nbsp;<span id="year-num">1</span></span>
   <div class="ggs-header-spacer"></div>
   <div class="ggs-header-actions">
     <a href="/schueler" title="Zurück zur Schülerseite">🏠</a>
@@ -500,8 +501,6 @@
 </div>
 
 <div class="farmer-year-bar">
-  <span class="farmer-year-label">Jahr</span>
-  <span class="farmer-year-num" id="year-num">1</span>
   <span class="farmer-market" id="market-display" title="Markt-Auftrag dieses Jahres — alle Lieferungen gehen hierher">
     <span class="farmer-market-label">Markt</span>
     <span id="market-text">—</span>