/* * Hauptcontainer der Suchergebnisse */ #searchresult { list-style: none; /* Entfernt die Standard-Listenzeichen */ padding: 0; margin: 3em auto; width: auto; /* Begrenzt die Breite der Suchergebnisse */ } /* * Stil für jeden Eintrag (Suchfeld-Bereich und einzelne Ergebnisse) */ #searchresult li { padding: 1.5em; margin-bottom: 20px; background-color: #282C31; /* Etwas hellerer Hintergrund für Lesbarkeit */ border-radius: 6px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4); display: flex; flex-wrap: wrap; /* Erlaubt das Umbrechen von Elementen auf kleinen Bildschirmen */ align-items: center; } /* ------------------------------------------------ */ /* --- Suchfeld und Button (Erster Listeneintrag) --- */ /* ------------------------------------------------ */ /* Der erste Listeneintrag enthält die Suchleiste */ #searchresult li:first-child { display: flex; padding: 1.5em; gap: 10px; /* Abstand zwischen Feld und Button */ } /* Such-Eingabefeld */ #searchbox { flex-grow: 1; /* Nimmt den meisten Platz ein */ padding: 12px 15px; border: 2px solid #383D43; border-radius: 4px; font-size: 1.1em; background-color: #383D43; color: #EAEAEA; transition: border-color 0.3s; } #searchbox:focus { border-color: #4CAF50; /* Grüner Fokus-Rahmen */ outline: none; } /* Such-Button */ #searchbttn { padding: 12px 20px; background-color: #4CAF50; /* Grüner Button */ color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 1.1em; font-weight: bold; transition: background-color 0.3s; } #searchbttn:hover { background-color: #45a049; } /* ------------------------------------------- */ /* --- Suchergebnis-Einträge (ab dem zweiten) --- */ /* ------------------------------------------- */ /* Überschrift / Link des Ergebnisses */ #searchresult li:not(:first-child) a { flex-basis: 100%; /* Link nimmt die volle Breite ein */ font-size: 1.4em; color: #81D4FA; /* Hellblau für Links/Titel */ text-decoration: none; margin-bottom: 5px; font-weight: bold; transition: color 0.2s; } #searchresult li:not(:first-child) a:hover { color: #4CAF50; /* Grüner Hover-Effekt */ } /* Beschreibungstext des Ergebnisses */ #searchresult li:not(:first-child) p { flex-basis: 100%; color: #B0B0B0; /* Helles Grau für den Text */ margin: 0; line-height: 1.4; } /* * Responsivität: Suchfeld auf kleinen Bildschirmen */ @media (max-width: 600px) { #searchresult { margin: 2em 1em; } #searchresult li:first-child { flex-direction: column; /* Stapelt Feld und Button */ gap: 15px; } #searchbox, #searchbttn { box-sizing: border-box;  width: 100%; } }