/**
 * Global Styles for all Pages
 */

:root {
    --brand-primary-color: rgb(243, 226, 25); /* #f3e219 */
    --brand-primary-dark-color: rgb(195, 180, 6); /* #C3B406 */
    --brand-geen-color: #237F52; /* #237F52 */
    --brand-geen-dark-color: rgb(97, 137, 41); /* #618929 */
    --darkblue: #003368;
    --darkblue-darker: #00254B;
    --bs-btn-bg: #212529;
    --bs-btn-active-bg: #4d5154;
    --darkred: #801515;
    --red: #ee3224;
    --orange: #F38A19;
    --orange-dark: #C36806;
}

html {
    scroll-behavior: smooth;
}
body {
    font-size: 16px;
    font-family: "Poppins", "Open Sans", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 400;
    color: #000;
    background: #f6f6f7;
    background: linear-gradient(180deg, #F6F6F7 0%, #D9D9E2 50%, #B0B0C6 100%);
    /*background: linear-gradient(90deg, #f8d637 0%, #ffdb3c 50%, #fedb39 100%);*/
    /*background: rgb(248, 214, 55);*/
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

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

a {
    color: #000;
}

.text-small {
    font-size: 0.75rem;
}
/*
#pageContent {
    min-height: 800px;
    background-image: url("../images/footer-bg.png");
    background-image: -webkit-image-set(url("../images/footer-bg.webp") 1x);
    background-repeat: no-repeat;
    background-position: 30% bottom;
    padding-top: 3rem; padding-bottom: 400px;
}

@media all and (min-width: 1200px) {
    #pageContent {
        background-position: center bottom;
        padding-bottom: 700px;
    }
}

#pageContent.content-bg-nop {
    padding-bottom: 0;
}
*/
#btt-btn {
    text-align: center;
    background: rgba(0,0,0,0.4);
    text-decoration: none;
    position: fixed;
    z-index: 99999;
    bottom: 100px;
    right: 0px;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    display: none;
    cursor: pointer;
    padding: 5px;
    color: #fff;
}
.btn-dark {
    background: var(--red);
}
.btn-dark:hover {
    background: var(--darkred);
}
#btt-btn:hover {
    background-color: #000; /* Add a dark-grey background on hover */
}

.btn-shop {
    font-weight: 700;
    background: var(--orange);
}
.btn-shop:hover {
    background: var(--orange-dark);
}

#btt-btn svg {
    fill: #fff;
    width: 30px;
}

.form-control {
    border: 2px solid #000;
}
.form-control:focus {
    border-color: #000;
}
.vitamin-menu-col ul {
    padding-top: 3rem;
}
.vitamin-menu-col ul li { background-color: var(--brand-primary-color); padding: 4px 4px 0 4px; }
.vitamin-menu-col ul li:hover {
    background-color:var(--red);
    color: white;
}


.seniorenmilch .vitamin-menu-col ul li { background-color: var(--brand-geen-color); color: #fff; }
.seniorenmilch .vitamin-menu-col ul li:hover {
    color: #000;
    background-color: var(--brand-primary-color);
}
.fruehstuecksmilch .vitamin-menu-col ul li { background-color: var(--red); color: #fff; }
.fruehstuecksmilch .vitamin-menu-col ul li:hover {
    color: #fff;
    background-color: var(--darkred);
}
.vitamin-menu .nav-link {
    white-space: nowrap;
    padding: 4px;
    border-bottom: 1px solid #000;
}

.bg-yellow {
    background-color: var(--brand-primary-color);
}
.naehrwertabelle .col-xl-8 .row {
    padding: 10px;
}