/* Globale Stile */
            * {
                box-sizing: border-box;
            }
            body {
                font-family: Verdana, Helvetica, sans-serif; /* font-family: Verdana, Arial, Helvetica, sans-serif; das bedeutet übersetzt: stelle die Verdana dar, wenn du sie nicht findest, dann die Arial, gibt es die auch nicht, dann die Helvetica (oftmals für Mac-User) und als letztes eine Schriftart ohne Serifen.
*/
                font-size: 1rem; /* Schriftgröße in Bezug zur Browsereinstellung, Standard ist 16px*/
                max-width: 50rem; /* damit bei der Seitendarstellung rechts und links ein Freiraum bleibt */
                margin: auto; /* Abstand zwischen zwei html-Elementen, hier zum Seitenrand*/
                padding: 0.6em;
                background-color: #ece3d7;
                color: black;
            }

            .header {
                height: 100px;
                background: #53c6b3;
                display: flex;
                align-items: center;
                padding: 0 1rem;
                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
                justify-content: flex-start; /* Sicherstellen, dass der Inhalt am linken Rand ausgerichtet wird */
            }

            .header img {
                height: 80px; /* Feste Höhe */
                width: 80px; /* Feste Breite */
                object-fit: contain; /* Stellt sicher, dass das Bild nicht verzerrt wird */
                margin-right: 1rem; /* Abstand zwischen dem Logo und dem Text */
                flex-shrink: 0; /* Verhindert das Schrumpfen des Logos */
            }

            .header h1 {
                font-size: 1.25rem;
                margin: 0; /* Verhindert zusätzlichen Abstand */
                /* Sicherstellen, dass der Text nicht in eine neue Zeile umbricht */
                white-space: nowrap;
            }

            p {
                color: black;
                font-size: 1rem;
                font-weight: normal; /* für Fettschrift "bold" (=700) oder Werte zwischen 100 und 900*/
                line-height: 150%; /* Zeilenabsgtand vergrößert */
                margin-bottom: 1rem; /* Hier der Abstand zwischen zwei Absätzen, aber nur nach unten */
                padding: -0.1rem; /* verändert den inneren Abstand zum Rand des Elements */
                text-align: justify; /* Absatzausrichtung links, rechts, zentriert oder Blocksatz */
                hyphens: auto; /* Silbentrennung aktiviert */
                width: 100%; /* Die Breite des Absatzes im Verhältnis zur Seite (max-width im body) */
            }
            p.padding {
                box-sizing: border-box; /* bewirkt, dass das Padding in die definierte Breite eingerechnet wird, anstatt sie zu vergrößern. */
                border: 1px solid #333333; /* zur Demo der Einstellungen von margin und padding, nur auf der Homepage */
                padding: 2rem; /* zus. zu den Standardeinstellungen für die Absätze wird durch die Klasse padding ein Absatz nach innen gerückt */
                max-width: 100%;
            }

            p.abs2 {
                font: Calibri, serif;
                font-size: 1em;
                font-style: italic;
                line-height: 115%;
                margin-bottom: 0 in;
            }

            /* Einstellungen für die ungeordnete Liste */
            ul {
                margin: 1.5rem auto; /* Abstand zum vor- und nachfolgendem Element */
            }

            /* Einstellungen für die Listeneinträge */
            li {
                margin-bottom: 0.5rem; /* Abstand zwischen zwei Listenpunkten */
                font-size: 90%;
            }

            /* Einstellungen für die "Breadcrump-Liste im Header durch die Klasse "menu" */
            ul.menu {
                padding: 0.1rem;
                list-style: none;
            }
            ul.menu li {
                display: inline;
            }
            ul.menu li a {
                margin-right: 30px;
                text-decoration: none;
            }

            cite {
                text-align: center;
            }

            h2 {
                font-size: 1.2em;
            }

            img {
                max-width: 100%;
                height: auto;
            }

            /* Zusätzlicher CSS-Stil für das Rezept-Grid */
            .recipe-grid {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                margin-top: 10px;
            }

            .recipe-grid article {
                width: calc(50% - 20px);
                margin-bottom: 6px;
            }

            .recipe-grid article img {
                width: 100%;
                height: auto;
            }

            .recipe-grid article .description {
                margin-top: 9px;
            }

            .tags {
                font-size: 0.8em; /* Tags kleiner darstellen */
            }

            /* CSS-Anpassungen für Suche und Sortierung */
            .search-container {
                display: flex;
                align-items: center;
                margin-bottom: 30px; /* Mehr Abstand zwischen den Suchfeldern */
            }

            .search-container input[type="text"] {
                width: 40%; /* Relative Breite des linken Suchfelds */
                min-width: 10em; /* Mindestbreite in em */
                max-width: 20em; /* Maximale Breite in em */
                margin-right: 1em; /* Abstand zwischen den Suchfeldern in em */
                box-sizing: border-box; /* Box-Modell so einstellen, dass die Breite einschließlich der Polsterung und des Rahmens berechnet wird */
            }

            #searchInputTags {
                width: 40%; /* Relative Breite des rechten Suchfelds */
                min-width: 10em; /* Mindestbreite in em */
                max-width: 20em; /* Maximale Breite in em */
                box-sizing: border-box; /* Box-Modell so einstellen, dass die Breite einschließlich der Polsterung und des Rahmens berechnet wird */
            }

            .sort-container {
                margin-left: auto;
            }

            .event-list {
                list-style-type: none;
                padding: 0;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
            }

            .event-list-item {
                width: calc(98% - 6px);
                box-sizing: border-box;
                padding: 0 2px;
                margin-bottom: 20px;
            }

            .event-title {
                font-size: 1.2em;
                margin-bottom: 0.2em;
            }

            .event-tags {
                font-size: 0.7em;
                color: #666;
                margin-bottom: -1em;
            }

            .search-filter-container {
                display: flex;
                align-items: flex-start;
                justify-content: space-between;
                margin-bottom: -2em;
            }

            .filter-container,
            .search-container,
            .search-tags-container,
            .sort-container {
                margin-right: 2em;
            }

            .filter-container {
                display: inline-block;
                vertical-align: top;
                height: 1.4em;
                padding: 0 0.1em;
            }

            .filter-container select {
                height: 100%;
            }

            .sort-container {
                margin-right: 0;
            }

            .filter-container label,
            .sort-container label {
                margin-right: 0.3em;
            }

            /* Anpassung der Suchfeldbreite */
            #searchInput,
            #searchTagsInput {
                width: 12em;
            }

            footer {
                font-size: 0.8rem;
                margin: 1rem;
            }

            @media (max-width: 768px) {
                body {
                    background-color: tan;
                    color: white;
                    padding: 0.5rem;
                }
                .header {
                    padding: 0.5rem;
                    justify-content: flex-start; /* Sicherstellen, dass der Inhalt am linken Rand ausgerichtet wird */
                }
                
                .header h1 {
                    font-size: 1.5rem;
                }
                ul.menu li a {
                    margin-right: 30px;
                    text-decoration: none;
                    line-height: 270%;
                }
                .search-filter-container {
                    flex-direction: column;
                    align-items: stretch;
                }
                .filter-container,
                .search-container,
                .search-tags-container {
                    margin-right: 0;
                    margin-bottom: 1em;
                }
                .sort-container {
                    margin-left: 0;
                    margin-bottom: 1em;
                }
                #searchInput,
                #searchTagsInput {
                    width: auto;
                    max-width: 100%;
                }
            }

            @media screen and (max-width: 480px) {
                body {
                    background-color: tan;
                    color: white;
                    padding: 0.5rem;
                }

                .header {
                    flex-direction: row; /* Stelle sicher, dass die Flexbox-Richtung horizontal bleibt */
                    align-items: center; /* Zentriere die Elemente vertikal innerhalb des Headers */
                    text-align: left; /* Textausrichtung auf der linken Seite */
                    padding: 0.5rem;
                    height: auto; /* Höhe automatisch anpassen, um den Inhalt zu passen */
                }

                .header img {
                    margin-bottom: 0.5rem; /* Abstand zum Text */
                    margin-left: 0; /* Sicherstellen, dass das Logo am linken Rand bleibt */
                }

                .header h1 {
                    font-size: 1.25rem;
                    margin-left: 1rem; /* Abstand zum Logo */
                    white-space: normal; /* Erlaube Umbrüche, wenn nötig */
                    overflow-wrap: break-word; /* Verhindert, dass der Titel außerhalb des Containers geht */
                }

                ul.menu li a {
                    margin-right: 30px;
                    text-decoration: none;
                    line-height: 270%;
                }
                .search-filter-container {
                    flex-direction: column;
                    align-items: stretch;
                }
                .filter-container,
                .search-container,
                .search-tags-container {
                    margin-right: 0;
                    margin-bottom: 1em;
                }
                .sort-container {
                    margin-left: 0;
                    margin-bottom: 1em;
                }
                #searchInput,
                #searchTagsInput {
                    width: auto;
                    max-width: 100%;
                }
            }