Seitenleiste

css/showCategory.css

@@ -1,21 +1,72 @@
-/* --- NEUES LAYOUT FÜR KATEGORIEN --- */
+/* --- ZWEISPALTIIGES GRID-LAYOUT --- */
 .cat-view-container {
     box-sizing: border-box;
-    max-width: 95%;
+    max-width: 95%; /* 95% Monitorbreite wie das Original */
     width: 95%;
-    margin: 2rem auto; 
+    margin: 2rem auto;
     padding: 0 1rem;
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
     color: #212529;
     line-height: 1.5;
-    min-width: 0;
+
+    /* Grid für die Zweispaltigkeit */
+    display: grid;
+    grid-template-columns: 320px 1fr; /* 320px Sidebar, Rest für Content */
+    gap: 2.5rem;
 }
 
-/* Verhindert Verzerren durch globale Styles im inneren Bereich */
 .cat-view-container * {
     box-sizing: border-box;
 }
 
+/* --- SEITENLEISTE (SORTIERUNG) --- */
+.cat-sidebar {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+}
+
+.cat-sidebar-box {
+    background-color: #ffffff;
+    border: 1px solid #e2e8f0;
+    border-radius: 8px;
+    padding: 1.25rem;
+}
+
+.cat-sidebar-title {
+    font-size: 1rem;
+    font-weight: 700;
+    color: #1a202c;
+    margin: 0 0 1rem 0;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+}
+
+.cat-filter-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+}
+
+.cat-filter-option {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    cursor: pointer;
+    font-size: 0.95rem;
+    color: #4a5568;
+}
+
+.cat-filter-option input[type="radio"] {
+    margin: 0;
+    accent-color: #3182ce;
+}
+
+/* --- HAUPTINHALT --- */
+.cat-view-main {
+    min-width: 0;
+}
+
 .cat-view-header {
     margin-bottom: 2rem;
     border-bottom: 2px solid #dee2e6;
@@ -35,14 +86,13 @@
     margin: 0;
 }
 
-/* --- LISTE DER BEITRÄGE --- */
+/* --- BEITRÄGE LISTE --- */
 .cat-view-list {
     display: flex;
     flex-direction: column;
     gap: 1rem;
 }
 
-/* Einzelne Beitrags-Box */
 .cat-view-item {
     background-color: #ffffff;
     border: 1px solid #e2e8f0;
@@ -73,7 +123,6 @@
 .cat-view-link {
     color: #3182ce;
     text-decoration: none;
-    transition: color 0.2s ease;
 }
 
 .cat-view-link:hover {
@@ -81,7 +130,6 @@
     color: #2b6cb0;
 }
 
-/* Meta-Zeile für Autor & Likes */
 .cat-view-meta-row {
     display: flex;
     gap: 15px;
@@ -117,7 +165,7 @@
     transform: translateX(3px);
 }
 
-/* --- PAGINATOR FOOTER --- */
+/* --- FOOTER PAGINATION --- */
 .cat-view-pagination-footer {
     display: flex;
     justify-content: space-between;
@@ -127,7 +175,6 @@
     border-top: 1px solid #e2e8f0;
 }
 
-/* Styling der Buttons (Zugeordnet zu den JS-Klassen) */
 .cat-view-pagination-footer .s-res-page-navigation {
     display: flex;
     gap: 0.25rem;
@@ -151,7 +198,6 @@
     color: #2d3748;
 }
 
-/* Aktiver Button-Zustand */
 .cat-view-pagination-footer .cat-active-btn {
     background-color: #3182ce;
     border-color: #3182ce;
@@ -166,12 +212,12 @@
     cursor: not-allowed;
 }
 
-/* Responsive Anpassungen unter 768px (Smartphones) */
+/* RESPONSIVE ANPASSUNG (Unter 768px) */
 @media (max-width: 768px) {
     .cat-view-container {
+        grid-template-columns: 1fr; /* Stapelt Sidebar und Inhalt untereinander */
+        gap: 1.5rem;
         margin: 1rem auto;
-        width: 100%;
-        max-width: 100%;
     }
     .cat-view-pagination-footer {
         flex-direction: column;