.com-content-article.item-page {
    border: 1px solid #ccc;
    padding: 20px;
    border-radius: 8px;
}

h1 {
    font-size: 24px;
}

h2 {
    font-size: 20px;
}

h3 {
    font-size: 18px;
}

/* Und so weiter für h4, h5, h6... größe der überschriften */

.galerie-container {
    display: flex;
    flex-wrap: wrap; /* Erlaubt den Elementen, in die nächste Zeile zu "umfließen", wenn nicht genügend Platz vorhanden ist */
    gap: 20px; /* Abstand zwischen den Bildern */
}

.galerie-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
}

.galerie-container img {
    border-radius: 15px; /* Rundet die Ecken der Bilder ab */
    transition: transform 0.3s ease; /* Glatter Übergang beim Hover */
    margin-right: 10px; /* Fügt einen Abstand von 10 Pixeln auf der rechten Seite hinzu */
}

.galerie-container img:hover {
    transform: scale(1.05);
}

.container-topbar {
    position: relative;
    border-bottom: 1px solid white;
    padding: 0 10px; /* Platz für die Wölbungen */
    overflow: hidden; /* Versteckt die Teile der Wölbungen, die außerhalb des Containers liegen */
}

.container-topbar::before, .container-topbar::after {
    content: "";
    position: absolute;
    bottom: -1px; /* Positioniert es auf der Linie */
    width: 20px;
    height: 20px;
    background-color: white;
}

.container-topbar::before {
    left: -10px; /* Positioniert es am linken Rand */
    clip-path: polygon(50% 50%, 0% 100%, 100% 100%); /* Erzeugt die linke Wölbung */
}

.container-topbar::after {
    right: -10px; /* Positioniert es am rechten Rand */
    clip-path: polygon(50% 50%, 100% 100%, 0% 100%); /* Erzeugt die rechte Wölbung */
}

.horizontal-menu > ul {
    display: flex !important;
    list-style-type: none !important;
    padding: 0 !important;
}

.horizontal-menu > ul > li {
    margin-right: 20px !important;
}

.hidden-mobile {
    display: none;
}

@media (min-width: 768px) {
    .hidden-mobile {
        display: block;
    }
}

/* Light Mode spezifische Stile */
body {
    background: linear-gradient(to bottom, #FFFAF0 0%, #ffffff 100%); /* Verlauf von Hellgrau zu Weiß */
    color: #333333; /* Dunkelgraue Schriftfarbe */
}


a {
    color: #343a40; /* Blaue Grau für Links */
    text-decoration: none; /* Entfernt die Unterstreichung von Links */
}

a:hover {
    color: #0056b3; /* Dunkelblau-fast graue Farbe für Links beim Hover */
    text-decoration: underline; /* Behält die Unterstreichung bei, wenn man mit der Maus über den Link fährt */
}


h1, h2, h3, h4, h5, h6 {
    color: #333333; /* Dunkelgraue Farbe für bessere Lesbarkeit */
}

.sidebar-right {
    background-color: #d9d9d9; /* Etwas dunklerer Grauton für den Hintergrund der rechten Seitenleiste */
}

.schwarzer-banner, .container-banner .banner-overlay {
    background-color: #f0f0f0; /* Angepasst an den hellgrauen Hintergrund */
}