Seitenleiste mit Filteroptionen

css/search-results.css

@@ -1,20 +1,109 @@
 /*
 CSS für die Suchergebnis-Seite
  */
-.s-res-container {
+/* Container und Layout-Schutz vor globalen Styles */
+.s-res-layout-grid {
     box-sizing: border-box;
-    max-width: 800px;
+    max-width: 1200px;
     margin: 2rem auto;
     padding: 0 1rem;
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
     color: #212529;
     line-height: 1.5;
+
+    /* Grid für die Zweispaltigkeit */
+    display: grid;
+    grid-template-columns: 280px 1fr;
+    gap: 2rem;
 }
 
-.s-res-container * {
+.s-res-layout-grid * {
     box-sizing: border-box;
 }
 
+/* --- SEITENLEISTE (FILTER & SUCHE) --- */
+.s-res-sidebar {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+}
+
+.s-res-sidebar-box {
+    background-color: #ffffff;
+    border: 1px solid #e2e8f0;
+    border-radius: 8px;
+    padding: 1.25rem;
+}
+
+.s-res-sidebar-title {
+    font-size: 1rem;
+    font-weight: 700;
+    color: #1a202c;
+    margin: 0 0 1rem 0;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+}
+
+/* Formular & deine Suchleisten-Klassen */
+.s-res-search-form {
+    display: flex;
+    align-items: center;
+}
+
+.nav__search {
+    display: flex;
+    width: 100%;
+    margin: 0;
+    padding: 0.4rem 0.6rem;
+    font-size: 0.9rem;
+    border: 1px solid #cbd5e1;
+    border-radius: 4px;
+    background: #fff;
+}
+
+.nav__search-button {
+    display: inline-block;
+    background: #fff;
+    border: 1px solid #cbd5e1;
+    border-radius: 4px;
+    padding: 0.4rem 0.6rem;
+    font-size: 0.8rem;
+    font-weight: 600;
+    cursor: pointer;
+    margin-left: 4px;
+    transition: background-color 0.2s;
+}
+
+.nav__search-button:hover {
+    background-color: #f8f9fa;
+}
+
+/* Filter Radio-Buttons */
+.s-res-filter-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+}
+
+.s-res-filter-option {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    cursor: pointer;
+    font-size: 0.95rem;
+    color: #4a5568;
+}
+
+.s-res-filter-option input[type="radio"] {
+    margin: 0;
+    accent-color: #3182ce; /* Moderne Färbung des Radio-Buttons */
+}
+
+/* --- HAUPTINHALT (ERGEBNISSE) --- */
+.s-res-main-content {
+    min-width: 0; /* Verhindert das Ausbrechen von Flex-Elementen */
+}
+
 .s-res-header {
     margin-bottom: 2rem;
     border-bottom: 2px solid #dee2e6;
@@ -34,7 +123,6 @@ CSS für die Suchergebnis-Seite
     margin: 0;
 }
 
-/* Ergebnisliste */
 .s-res-list {
     display: flex;
     flex-direction: column;
@@ -59,7 +147,6 @@ CSS für die Suchergebnis-Seite
     border-color: #cbd5e1;
 }
 
-/* Inhalt des Beitrags */
 .s-res-content {
     flex: 1;
 }
@@ -70,7 +157,6 @@ CSS für die Suchergebnis-Seite
     font-weight: 600;
 }
 
-/* Links */
 .s-res-link {
     color: #3182ce;
     text-decoration: none;
@@ -82,7 +168,6 @@ CSS für die Suchergebnis-Seite
     color: #2b6cb0;
 }
 
-/* Autorenzeile */
 .s-res-author {
     font-size: 0.875rem;
     color: #4a5568;
@@ -94,7 +179,6 @@ CSS für die Suchergebnis-Seite
     color: #2d3748;
 }
 
-/* Interaktions-Pfeil */
 .s-res-arrow {
     font-size: 1.5rem;
     color: #a0aec0;
@@ -106,3 +190,12 @@ CSS für die Suchergebnis-Seite
     color: #3182ce;
     transform: translateX(3px);
 }
+
+/* --- RESPONSIVE DESIGN (MOBILGERÄTE) --- */
+@media (max-width: 768px) {
+    .s-res-layout-grid {
+        grid-template-columns: 1fr; /* Stapelt Seitenleiste und Inhalt untereinander */
+        gap: 1.5rem;
+        margin: 1rem auto;
+    }
+}