CSS umgebaut

public/sternenhimmel.php

@@ -280,7 +280,7 @@ if (!$availableLocations) {
   </div>
 
   <div class="controls">
-    <div style="display:flex;flex-direction:column;gap:3px;">
+    <div class="star-control-stack">
       <div class="ctrl-group">
         <input type="datetime-local" id="dtPicker">
         <button class="btn live" id="btnNow">● JETZT</button>
@@ -312,7 +312,7 @@ if (!$availableLocations) {
   <!-- Einstellungen -->
   <div id="settingsWrap">
     <button id="btnSettings" title="Anzeigeeinstellungen">⚙</button>
-    <input type="file" id="fileInput" accept=".csv" style="display:none">
+    <input type="file" id="fileInput" class="file-input-hidden" accept=".csv">
     <div id="settingsPanel">
       <div class="sp-title">⚙ Anzeigeeinstellungen</div>
 
@@ -323,7 +323,7 @@ if (!$availableLocations) {
           <label class="sp-radio"><input type="radio" name="gridMode" id="gridAltaz" value="altaz"       ><span class="sp-rbtn"></span><span class="sp-text">Alt / Az</span></label>
           <label class="sp-radio"><input type="radio" name="gridMode" id="gridOff"   value="off"         ><span class="sp-rbtn"></span><span class="sp-text">Aus</span></label>
         </div>
-        <div class="sp-toggles" style="margin-top:2px;">
+        <div class="sp-toggles sp-toggles-compact">
           <label class="sp-toggle"><input type="checkbox" id="cfgEqLabels" checked><span class="sp-pill"></span><span class="sp-text">Beschrift.</span></label>
         </div>
       </div>
@@ -393,10 +393,10 @@ if (!$availableLocations) {
         </div>
       </div>
 
-      <div class="sp-title" style="margin-top:10px;">⬇ Bild exportieren</div>
+      <div class="sp-title sp-title-offset">⬇ Bild exportieren</div>
 
       <div class="sp-row">
-        <button id="btnExport" style="width:100%;background:#0a1f30;border:1px solid var(--accent);color:var(--accent);padding:5px;font-family:'Rajdhani',sans-serif;font-size:0.82rem;cursor:pointer;letter-spacing:0.08em;">
+        <button id="btnExport" class="star-export-btn">
           ⬇ PNG speichern (1000 × 1000 px)
         </button>
       </div>
@@ -1590,16 +1590,26 @@ function autoExportPng() {
     // Falls Popup blockiert: Fallback-Link ins Dokument einblenden
     if (!win) {
       const bar = document.createElement('div');
-      bar.style.cssText = 'position:fixed;bottom:0;left:0;right:0;background:#050d18;'
-        + 'border-top:1px solid #4a9eff;padding:10px 20px;z-index:9999;'
-        + 'font-family:Rajdhani,sans-serif;font-size:14px;display:flex;'
-        + 'align-items:center;gap:16px;';
-      bar.innerHTML = '<span style="color:#8ab0cc;">Popup blockiert –</span>'
-        + `<a href="${url}" download="${fname}" style="color:#4a9eff;border:1px solid #4a9eff;`
-        + 'padding:5px 16px;text-decoration:none;letter-spacing:0.08em;">'
-        + '⬇ PNG speichern</a>'
-        + '<span style="color:#2a3a4a;cursor:pointer;margin-left:auto;" '
-        + 'onclick="this.parentNode.remove()">✕</span>';
+      bar.className = 'star-popup-fallback';
+
+      const label = document.createElement('span');
+      label.className = 'star-popup-fallback-label';
+      label.textContent = 'Popup blockiert -';
+
+      const link = document.createElement('a');
+      link.className = 'star-popup-fallback-link';
+      link.href = url;
+      link.download = fname;
+      link.textContent = 'PNG speichern';
+
+      const close = document.createElement('button');
+      close.type = 'button';
+      close.className = 'star-popup-fallback-close';
+      close.setAttribute('aria-label', 'Hinweis schliessen');
+      close.textContent = 'x';
+      close.addEventListener('click', () => bar.remove());
+
+      bar.append(label, link, close);
       document.body.appendChild(bar);
     }
   }, 'image/png');
@@ -1933,7 +1943,7 @@ canvas.addEventListener('click', function(e) {
   if (showSunMoon) {
     if (sunCache && sunCache._xy && Math.hypot(mx - sunCache._xy.x, my - sunCache._xy.y) < 18) {
       tip.innerHTML =
-        '<span class="tt-name" style="color:#ffdd44">☀ Sonne</span>' +
+        '<span class="tt-name tt-sun">Sonne</span>' +
         'Alt: '  + sunCache.alt.toFixed(2) + '°<br>' +
         'Az: '   + sunCache.az.toFixed(2)  + '°<br>' +
         'RA: '   + sunCache.ra.toFixed(4)  + ' h<br>' +
@@ -1948,7 +1958,7 @@ canvas.addEventListener('click', function(e) {
                         mp < 225 ? 'Vollmond' : mp < 270 ? 'Abnehmender Gibbous' :
                         mp < 315 ? 'Letztes Viertel' : 'Abnehmende Sichel';
       tip.innerHTML =
-        '<span class="tt-name" style="color:#c8c0a8">☽ Mond</span>' +
+        '<span class="tt-name tt-moon">Mond</span>' +
         phaseName + '<br>' +
         'Beleuchtung: ' + pct + '%<br>' +
         'Phase: ' + mp.toFixed(1) + '°<br>' +
@@ -1986,7 +1996,7 @@ canvas.addEventListener('click', function(e) {
         const typeNames = {Oc:'Offener Haufen',Gc:'Kugelhaufen',Nb:'Emissionsnebel',
           Sc:'Haufen+Nebel',Pn:'Planetarischer Nebel',Gx:'Galaxie',As:'Asterismus'};
         tip.innerHTML =
-          '<span class="tt-name" style="color:' + (M_STYLE[obj.type]||M_STYLE.As).stroke + '">M' + obj.m +
+          '<span class="tt-name ' + ('tt-messier-' + String(obj.type || 'As').toLowerCase()) + '">M' + obj.m +
           (obj.name ? ' – ' + obj.name : '') + '</span>' +
           'Typ: '  + (typeNames[obj.type] || obj.type) + '<br>' +
           'Mag: '  + obj.mag.toFixed(1) + '<br>' +