diff --git a/content/search-results.php b/content/search-results.php
index 9817411..dfdd93f 100644
--- a/content/search-results.php
+++ b/content/search-results.php
@@ -2,49 +2,92 @@
     Seite: Suchergebnisse
     Inhalt: Zeigt die Ergebnisse einer Suche an
 -->
-<div class="s-res-container">
+<div class="s-res-layout-grid">
 
-    <!-- Kopfzeile der Suche -->
-    <div class="s-res-header">
-        <h1 class="s-res-main-title">Suchergebnisse</h1>
-        <p class="s-res-meta">3 Treffer für Ihre Suchanfrage</p>
-    </div>
+    <!-- Links: Seitenleiste für Filter und Suche -->
+    <aside class="s-res-sidebar">
 
-    <!-- Ergebnisliste (nach Titel sortiert) -->
-    <div class="s-res-list">
-
-        <!-- Beitrag A -->
-        <div class="s-res-item">
-            <div class="s-res-content">
-                <h2 class="s-res-item-title">
-                    <a href="#" class="s-res-link">Anleitung zur Webentwicklung</a>
-                </h2>
-                <p class="s-res-author">Von: <span class="s-res-author-name">Max Mustermann</span></p>
-            </div>
-            <div class="s-res-arrow">&rarr;</div>
+        <!-- Suchleiste Box -->
+        <div class="s-res-sidebar-box">
+            <h3 class="s-res-sidebar-title">Suche anpassen</h3>
+            <form action="#" method="GET" class="s-res-search-form">
+                <!-- Deine Suchleiste -->
+                <input type="search" id="site-search" name="q" placeholder="Suchen..." class="nav__search">
+                <button type="submit" class="nav__search-button">Suchen</button>
+            </form>
         </div>
 
-        <!-- Beitrag B -->
-        <div class="s-res-item">
-            <div class="s-res-content">
-                <h2 class="s-res-item-title">
-                    <a href="#" class="s-res-link">CSS Flexbox verständlich erklärt</a>
-                </h2>
-                <p class="s-res-author">Von: <span class="s-res-author-name">Anna Schmidt</span></p>
+        <!-- Filteroptionen Box -->
+        <div class="s-res-sidebar-box">
+            <h3 class="s-res-sidebar-title">Sortierung</h3>
+            <div class="s-res-filter-group">
+                <label class="s-res-filter-option">
+                    <input type="radio" name="sort" value="alphabet" checked>
+                    <span>Alphabetisch</span>
+                </label>
+                <label class="s-res-filter-option">
+                    <input type="radio" name="sort" value="likes">
+                    <span>Beliebtheit (Likes)</span>
+                </label>
+                <label class="s-res-filter-option">
+                    <input type="radio" name="sort" value="newest">
+                    <span>Neueste Beiträge</span>
+                </label>
+                <label class="s-res-filter-option">
+                    <input type="radio" name="sort" value="oldest">
+                    <span>Älteste Beiträge</span>
+                </label>
             </div>
-            <div class="s-res-arrow">&rarr;</div>
         </div>
 
-        <!-- Beitrag C -->
-        <div class="s-res-item">
-            <div class="s-res-content">
-                <h2 class="s-res-item-title">
-                    <a href="#" class="s-res-link">HTML5-Grundlagen für Einsteiger</a>
-                </h2>
-                <p class="s-res-author">Von: <span class="s-res-author-name">Lisa Meier</span></p>
-            </div>
-            <div class="s-res-arrow">&rarr;</div>
+    </aside>
+
+    <!-- Rechts: Hauptinhalt mit Ergebnissen -->
+    <main class="s-res-main-content">
+
+        <!-- Kopfzeile der Suche -->
+        <div class="s-res-header">
+            <h1 class="s-res-main-title">Suchergebnisse</h1>
+            <p class="s-res-meta">3 Treffer für Ihre Suchanfrage</p>
         </div>
 
-    </div>
-</div>
+        <!-- Ergebnisliste -->
+        <div class="s-res-list">
+
+            <!-- Beitrag A -->
+            <div class="s-res-item">
+                <div class="s-res-content">
+                    <h2 class="s-res-item-title">
+                        <a href="#" class="s-res-link">Anleitung zur Webentwicklung</a>
+                    </h2>
+                    <p class="s-res-author">Von: <span class="s-res-author-name">Max Mustermann</span></p>
+                </div>
+                <div class="s-res-arrow">&rarr;</div>
+            </div>
+
+            <!-- Beitrag B -->
+            <div class="s-res-item">
+                <div class="s-res-content">
+                    <h2 class="s-res-item-title">
+                        <a href="#" class="s-res-link">CSS Flexbox verständlich erklärt</a>
+                    </h2>
+                    <p class="s-res-author">Von: <span class="s-res-author-name">Anna Schmidt</span></p>
+                </div>
+                <div class="s-res-arrow">&rarr;</div>
+            </div>
+
+            <!-- Beitrag C -->
+            <div class="s-res-item">
+                <div class="s-res-content">
+                    <h2 class="s-res-item-title">
+                        <a href="#" class="s-res-link">HTML5-Grundlagen für Einsteiger</a>
+                    </h2>
+                    <p class="s-res-author">Von: <span class="s-res-author-name">Lisa Meier</span></p>
+                </div>
+                <div class="s-res-arrow">&rarr;</div>
+            </div>
+
+        </div>
+    </main>
+
+</div>
\ No newline at end of file
diff --git a/css/search-results.css b/css/search-results.css
index 67118fb..47e326c 100644
--- a/css/search-results.css
+++ b/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;
+    }
+}