* {
    box-sizing: border-box;
}

body,
html {
    background-color: #eee;
    padding-top: 40px;
}

.nav-link-react {
    color: #fff !important;
}

.nav-link-react:hover {
    color: #ccc !important;
}

.navbar-custom {
    background-color: #57ad68;
    box-shadow: 0 5px 10px #aaa;
    width: 100%;
}

.dropdown-menu {
    left: auto;
    right: 0;
}

.fit-image-container {
    width: 100%;
    height: 400px;
}

.fit-image-container img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    object-position: 50% 100%;
}

.soft-shadow {
    box-shadow: 5px 5px 5px #ddd;
}

.main-container {
    display: -webkit-flex;
    display: flex;
    max-width: 1400px;
}

@media screen and (max-width: 990px) {
    .main-container {
        max-width: 100%;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
        margin-bottom: 0.5rem !important;
    }
}

.main-container .content {
    width: calc(100% - 400px);
    background-color: #fff;
}

@media screen and (max-width: 990px) {
    .main-container .content {
        width: 100%;
        margin-bottom: 0.5rem !important;
        margin-left: 0.5rem !important;
        margin-right: 0.5rem !important;
    }
}

.main-container .widgets-container {
    width: 400px;
}

@media screen and (max-width: 990px) {
    .main-container .widgets-container {
        width: 100%;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        margin-bottom: 0;
    }
}

@media screen and (max-width: 990px) {
    .main-container .widgets-container .widget-3 {
        margin-bottom: 0 !important;
    }
}

.footer {
    max-width: 1400px;
    background-color: #fff;
}

@media screen and (max-width: 990px) {
    .footer {
        margin-bottom: 0 !important;
        margin-left: 0.5rem !important;
        margin-right: 0.5rem !important;
    }
}

@media screen and (max-width: 650px) {
    .services-header {
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
    }
}

@media screen and (max-width: 650px) {
    .services-header .img-container {
        display: -webkit-flex;
        display: flex;
        -webkit-justify-content: center;
        justify-content: center;
        width: 100%;
        margin-bottom: 0.5rem !important;
    }

    .services-header .img-container img {
        max-width: 200px;
    }
}

.contact-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 1rem;
}

@media screen and (max-width: 990px) {
    .contact-container {
        grid-template-columns: 1fr;
    }
}

#rss-feed-container {
    width: 100%;
    max-width: 500px;
    /* Optional: Maximalbreite des Containers */
    height: 300px;
    /* Feste Höhe des scrollbaren Bereichs */
    border: 1px solid #ccc;
    border-radius: 5px;
    overflow-y: scroll;
    /* Scrollbalken aktivieren */
    padding: 10px;
    background-color: #f9f9f9;
}

/* Erzwingt den Scrollbalken bei Webkit-Browsern (Chrome, Edge, Safari) */
#rss-feed-container::-webkit-scrollbar {
    -webkit-appearance: scrollbar;
    /* Scrollbalken unabhängig von OS-Einstellungen */
    display: block;
    /* Zeigt Scrollbalken immer an */
    width: 12px;
    /* Breite des Scrollbalkens */
    height: 12px;
    /* Höhe bei horizontalem Scrollen (falls benötigt) */
}

#rss-feed-container::-webkit-scrollbar-thumb {
    background-color: #888;
    /* Farbe des Scrollbalkens */
    border-radius: 6px;
    /* Runde Ecken für einen moderneren Look */
}

#rss-feed-container::-webkit-scrollbar-track {
    background-color: #f9f9f9;
    /* Hintergrund des Scrollbereichs */
}

.feed-item {
    margin-bottom: 20px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #fff;
}

.feed-item h3 {
    margin: 0;
    font-size: 1.2em;
}

.feed-item p {
    margin: 5px 0;
}

.feed-item small {
    color: gray;
}