search.css

css/search.css

@@ -0,0 +1,42 @@
+/* Styling für die Suchleiste in der Navbar */
+
+#site-search {
+    width: 200px;                /* Breite des Feldes – kann angepasst werden */
+    padding: 6px 12px;           /* Innenabstand für Text und Icon */
+    border: 1px solid #ccc;      /* Randfarbe */
+    border-radius: 4px;          /* Abgerundete Ecken */
+    font-size: 14px;             /* Schriftgröße */
+    transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+#site-search:focus {
+    outline: none;
+    border-color: #5b9bd5;       /* Blauer Rand beim Fokus */
+    box-shadow: 0 0 5px rgba(91,155,213,0.5); /* Leichter Schatten */
+}
+
+#site-search + button[type="submit"] {
+    padding: 6px 12px;           /* Innenabstand */
+    margin-left: 4px;            /* Abstand zum Eingabefeld */
+    border: none;                /* Kein Rahmen */
+    background-color: #5b9bd5;   /* Hintergrundfarbe */
+    color: #fff;                 /* Textfarbe */
+    border-radius: 4px;          /* Gleiche Rundung wie beim Feld */
+    font-size: 14px;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+}
+
+/* Hover-Verhalten */
+#site-search + button[type="submit"]:hover {
+    background-color: #4a8bc4;
+}
+
+/* Responsives Verhalten */
+@media (max-width: 480px) {
+    #site-search,
+    #site-search + button[type="submit"] {
+        width: 100%;
+        margin: 4px 0 0 0;
+    }
+}

includes/search.php

@@ -1,5 +1,6 @@
 <!--
 Suchleiste. Wird via PHP später in alle Seiten eingebunden
 -->
+<label for="site-search">Suche</label>
 <input type="search" id="site-search" name="q" placeholder="Suchen...">
 <button type="submit">Suchen</button>

index.php

@@ -11,6 +11,7 @@
     <meta name="author" content="Niklas Ortmann">
     <link rel="stylesheet" href="css/main.css">
     <link rel="stylesheet" href="css/navbar.css">
+    <link rel="stylesheet" href="css/search.css">
     <title>EduForge</title>
 </head>