Sonnensystem kann jetzt mehr Kleinplaneten

public/css/style.css

@@ -3831,9 +3831,9 @@ body.solarsystem-page main > .container {
 }
 
 .solarsystem-input-row input[type="date"],
-.solarsystem-input-row select {
+.solarsystem-input-row select,
+.solarsystem-multiselect {
     min-height: 2.6rem;
-    padding: 0.55rem 0.8rem;
     border-radius: 6px;
     border: 1px solid rgba(200, 168, 75, 0.14);
     background: rgba(10, 16, 36, 0.8);
@@ -3843,6 +3843,11 @@ body.solarsystem-page main > .container {
     flex: 1 1 170px;
 }
 
+.solarsystem-input-row input[type="date"],
+.solarsystem-input-row select {
+    padding: 0.55rem 0.8rem;
+}
+
 .solarsystem-input-row select {
     appearance: none;
     -webkit-appearance: none;
@@ -3882,6 +3887,102 @@ body.solarsystem-page main > .container {
     box-shadow: none;
 }
 
+.solarsystem-multiselect {
+    position: relative;
+    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02), 0 10px 24px rgba(0, 0, 0, 0.22);
+    overflow: hidden;
+}
+
+.solarsystem-multiselect:hover {
+    border-color: rgba(201, 168, 76, 0.28);
+    background-color: rgba(14, 22, 44, 0.92);
+    box-shadow: inset 0 0 0 1px rgba(201, 168, 76, 0.05), 0 14px 28px rgba(0, 0, 0, 0.26);
+}
+
+.solarsystem-multiselect[open] {
+    border-color: rgba(201, 168, 76, 0.4);
+    box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.12), 0 14px 28px rgba(0, 0, 0, 0.28);
+}
+
+.solarsystem-multiselect summary {
+    list-style: none;
+    cursor: pointer;
+    min-height: 2.6rem;
+    padding: 0.55rem 2.9rem 0.55rem 0.8rem;
+    display: flex;
+    align-items: center;
+    position: relative;
+}
+
+.solarsystem-multiselect summary::-webkit-details-marker {
+    display: none;
+}
+
+.solarsystem-multiselect summary::before,
+.solarsystem-multiselect summary::after {
+    content: "";
+    position: absolute;
+    right: 1rem;
+    top: 50%;
+    width: 0.5rem;
+    height: 0.5rem;
+    border-right: 2px solid rgba(240, 217, 144, 0.92);
+    border-bottom: 2px solid rgba(240, 217, 144, 0.92);
+    transform-origin: center;
+}
+
+.solarsystem-multiselect summary::before {
+    transform: translateY(-60%) rotate(45deg);
+}
+
+.solarsystem-multiselect[open] summary::before {
+    transform: translateY(-20%) rotate(225deg);
+}
+
+.solarsystem-multiselect summary::after {
+    display: none;
+}
+
+.solarsystem-multiselect-panel {
+    display: grid;
+    gap: 0.3rem;
+    max-height: 15rem;
+    overflow-y: auto;
+    padding: 0 0.45rem 0.45rem;
+}
+
+.solarsystem-multiselect-option {
+    display: flex;
+    align-items: center;
+    gap: 0.55rem;
+    padding: 0.45rem 0.5rem;
+    border-radius: 6px;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+}
+
+.solarsystem-multiselect-option:hover {
+    background: rgba(255, 255, 255, 0.04);
+}
+
+.solarsystem-multiselect-option input {
+    margin: 0;
+    accent-color: #f0d990;
+}
+
+.solarsystem-multiselect-option span {
+    min-width: 0;
+}
+
+.solarsystem-multiselect.is-disabled {
+    opacity: 0.7;
+    box-shadow: none;
+}
+
+.solarsystem-multiselect.is-disabled summary {
+    cursor: default;
+}
+
 .solarsystem-current-date,
 .solarsystem-speed-value {
     color: var(--gold-pale);