Verbessere Mondfinsternis-Steuerung und Zeitanzeige

public/css/style.css

@@ -4848,6 +4848,13 @@ body.solarsystem-page:not(.jupitersystem-page) .solarsystem-stage-wrap {
     line-height: 1.4;
 }
 
+.eclipse-info-scale-note {
+    margin-top: 0.8rem;
+    font-size: 0.74rem;
+    line-height: 1.45;
+    color: var(--text-dim);
+}
+
 /* Info panel: ein-/ausklappbar */
 .eclipse-info-panel {
     padding-top: 2.4rem;
@@ -4892,6 +4899,37 @@ body.solarsystem-page:not(.jupitersystem-page) .solarsystem-stage-wrap {
     padding: 0.55rem 0.6rem;
 }
 
+.sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+}
+
+.eclipse-stage-time {
+    position: absolute;
+    left: 50%;
+    bottom: calc(5.4rem + 15px);
+    transform: translateX(-50%);
+    z-index: 9;
+    padding: 0.45rem 0.8rem;
+    border-radius: 999px;
+    border: 1px solid rgba(201, 168, 76, 0.18);
+    background: rgba(5, 9, 18, 0.82);
+    backdrop-filter: blur(8px);
+    color: var(--gold-pale);
+    font-size: 0.88rem;
+    font-variant-numeric: tabular-nums;
+    letter-spacing: 0.04em;
+    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
+    pointer-events: none;
+}
+
 /* View toggle */
 .eclipse-view-toggle {
     position: absolute;
@@ -5003,6 +5041,23 @@ body.solarsystem-page:not(.jupitersystem-page) .solarsystem-stage-wrap {
 .eclipse-tl-max .eclipse-tl-label { color: var(--gold); }
 .eclipse-tl-tot .eclipse-tl-label { color: #f05530; }
 
+.eclipse-sidebar-controls {
+    display: grid;
+    gap: 0.7rem;
+}
+
+.eclipse-sidebar-buttons {
+    display: flex;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+}
+
+.eclipse-speed-label-sidebar {
+    display: grid;
+    gap: 0.3rem;
+    justify-items: start;
+}
+
 .eclipse-timeline-controls {
     display: flex;
     align-items: center;