GUI verbessert

public/astronomical_conversions.php

@@ -118,31 +118,39 @@ $timeLocationLongitude = isset($currentLocation['longitude']) && is_numeric($cur
 .astro-conv-tabs {
     display: flex;
     flex-wrap: wrap;
-    gap: 0.75rem;
+    gap: 0.5rem;
+    margin: 0 0 1.75rem;
+    border-bottom: 1px solid var(--border);
+    padding-bottom: 0;
 }
 
 .astro-conv-tab {
-    padding: 0.75rem 1rem;
+    border: 1px solid transparent;
-    border-radius: 999px;
+    border-bottom: none;
-    border: 1px solid rgba(130, 170, 255, 0.18);
+    background: transparent;
-    background: rgba(255,255,255,0.04);
+    color: var(--text-dim);
-    color: #dce8ff;
+    border-radius: var(--radius) var(--radius) 0 0;
+    padding: 0.6rem 1.25rem;
     cursor: pointer;
+    font: inherit;
+    font-size: 0.92rem;
+    letter-spacing: 0.03em;
+    transition: color 0.15s, background 0.15s, border-color 0.15s;
+    position: relative;
+    bottom: -1px;
+}
+
+.astro-conv-tab:hover {
+    color: var(--gold-pale);
+    background: rgba(201, 168, 76, 0.06);
+    border-color: var(--border);
 }
 
 .astro-conv-tab.is-active {
-    background: linear-gradient(180deg, rgba(82, 153, 255, 0.28), rgba(49, 112, 255, 0.18));
+    color: var(--gold-pale);
-    border-color: rgba(130, 170, 255, 0.4);
+    background: var(--bg-card);
-    color: #ffffff;
+    border-color: var(--border);
-}
+    border-bottom-color: var(--bg-card);
-
-.astro-conv-panel {
-    padding: 1.2rem;
-    border-radius: 1rem;
-    background:
-        radial-gradient(circle at top left, rgba(82, 153, 255, 0.12), transparent 36%),
-        linear-gradient(180deg, rgba(13, 19, 33, 0.96), rgba(8, 11, 20, 0.98));
-    border: 1px solid rgba(130, 170, 255, 0.16);
 }
 
 .astro-conv-grid {
@@ -157,29 +165,30 @@ $timeLocationLongitude = isset($currentLocation['longitude']) && is_numeric($cur
 }
 
 .astro-conv-field label {
-    color: #c7d6f4;
+    color: var(--text-dim);
     font-size: 0.94rem;
 }
 
 .astro-conv-label-help {
-    border-bottom: 1px dotted rgba(199, 214, 244, 0.45);
+    border-bottom: 1px dotted rgba(201, 168, 76, 0.4);
     cursor: help;
 }
 
 .astro-conv-input {
     width: 100%;
     padding: 0.72rem 0.8rem;
-    border-radius: 0.8rem;
+    border-radius: var(--radius);
-    border: 1px solid rgba(255,255,255,0.12);
+    border: 1px solid var(--border);
-    background: rgba(255,255,255,0.05);
+    background: rgba(255,255,255,0.04);
-    color: #f8fbff;
+    color: var(--text);
     font-size: 0.96rem;
+    font-family: inherit;
 }
 
 .astro-conv-input:focus {
     outline: none;
-    border-color: rgba(130, 170, 255, 0.6);
+    border-color: rgba(201, 168, 76, 0.5);
-    box-shadow: 0 0 0 3px rgba(82, 153, 255, 0.16);
+    box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.1);
 }
 
 .astro-conv-field {
@@ -195,9 +204,9 @@ $timeLocationLongitude = isset($currentLocation['longitude']) && is_numeric($cur
     max-width: 22rem;
     padding: 0.7rem 0.8rem;
     border-radius: 0.8rem;
-    background: rgba(10, 15, 27, 0.96);
+    background: rgba(6, 8, 18, 0.97);
-    border: 1px solid rgba(130, 170, 255, 0.2);
+    border: 1px solid var(--border);
-    color: #eef4ff;
+    color: var(--text);
     font-size: 0.9rem;
     line-height: 1.45;
     white-space: pre-line;
@@ -228,6 +237,10 @@ $timeLocationLongitude = isset($currentLocation['longitude']) && is_numeric($cur
     display: block;
 }
 
+.astro-conv-panel {
+    border-radius: 0 var(--radius) var(--radius) var(--radius);
+}
+
 @media (max-width: 960px) {
     .astro-conv-grid {
         grid-template-columns: 1fr;

public/css/style.css

@@ -1630,9 +1630,28 @@ body.occ-page main > .container {
     background: rgba(4, 6, 18, 0.85);
     border-right: 1px solid rgba(200,168,75,.08);
 }
-.controls-panel::-webkit-scrollbar       { width: 3px; }
+.controls-panel {
-.controls-panel::-webkit-scrollbar-track { background: transparent; }
+    scrollbar-width: thin;
-.controls-panel::-webkit-scrollbar-thumb { background: rgba(200,168,75,.2); border-radius: 2px; }
+    scrollbar-color: rgba(201,168,76,0.45) rgba(201,168,76,0.05);
+}
+.controls-panel::-webkit-scrollbar {
+    width: 6px;
+}
+.controls-panel::-webkit-scrollbar-track {
+    background: rgba(201,168,76,0.04);
+    border-radius: 3px;
+    margin: 4px 0;
+}
+.controls-panel::-webkit-scrollbar-thumb {
+    background: linear-gradient(180deg, rgba(240,217,144,0.55), rgba(201,168,76,0.35));
+    border-radius: 3px;
+    box-shadow: 0 0 6px rgba(201,168,76,0.25);
+    transition: background .2s;
+}
+.controls-panel::-webkit-scrollbar-thumb:hover {
+    background: linear-gradient(180deg, rgba(240,217,144,0.85), rgba(201,168,76,0.65));
+    box-shadow: 0 0 10px rgba(201,168,76,0.45);
+}
 
 /* Einzelner Steuerungsblock */
 .ctrl-block {
@@ -3800,7 +3819,28 @@ body.solarsystem-page main > .container {
     gap: 1rem;
     max-height: calc(100vh - 10rem);
     overflow-y: auto;
+    overflow-x: hidden;
     overscroll-behavior: contain;
+    scrollbar-width: thin;
+    scrollbar-color: rgba(201,168,76,0.45) rgba(201,168,76,0.05);
+}
+.solarsystem-sidebar::-webkit-scrollbar {
+    width: 6px;
+}
+.solarsystem-sidebar::-webkit-scrollbar-track {
+    background: rgba(201,168,76,0.04);
+    border-radius: 3px;
+    margin: 4px 0;
+}
+.solarsystem-sidebar::-webkit-scrollbar-thumb {
+    background: linear-gradient(180deg, rgba(240,217,144,0.55), rgba(201,168,76,0.35));
+    border-radius: 3px;
+    box-shadow: 0 0 6px rgba(201,168,76,0.25);
+    transition: background .2s;
+}
+.solarsystem-sidebar::-webkit-scrollbar-thumb:hover {
+    background: linear-gradient(180deg, rgba(240,217,144,0.85), rgba(201,168,76,0.65));
+    box-shadow: 0 0 10px rgba(201,168,76,0.45);
 }
 
 .solarsystem-sidebar-block {
@@ -4014,6 +4054,14 @@ body.solarsystem-page main > .container {
     gap: 0.6rem;
 }
 
+.jupitersystem-page .solarsystem-button-grid {
+    justify-items: start;
+}
+
+.jupitersystem-page .solarsystem-button-grid .btn {
+    padding-inline: 1.1rem;
+}
+
 .solarsystem-sidebar .btn.is-active,
 .solarsystem-sidebar .btn-secondary.is-active {
     background: rgba(201, 168, 76, 0.16);