@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');

:root {
    --font-main: 'Rubik', sans-serif;

    --color-bg-main: #070c16;
    --color-text-main: #ffffff;
    --color-text-dark: #070c16;
    --color-text-black: #000000;

    --color-accent-red: #e83f33;
    --color-accent-blue: #0053b1;

    --color-ribbon-bg: #ffffff;
    --color-ribbon-border: #cdcdcd;

    --color-footer-overlay: #00000026;
    --color-shadow: rgba(0, 0, 0, 0.15);

    --color-light-gray: #eaeaea;
}

body, h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-main) !important;
}

body {
    font-size: 16px !important;
    background-color: var(--color-bg-main) !important;
    font-weight: 300;
}

span {
    font-weight: 300;
}

a {
    text-decoration: none;
}
 
.product-wrapper a, .btn-primary {
    color: var(--color-text-main) !important;
}

#header-top-bar a:hover:not(.dropdown-item):not(.btn), header a:hover:not(.dropdown-item):not(.btn), a:hover {
    color: var(--color-accent-red) !important;
}

h1, h3 {
  font-size: 30px;
}

@media screen and (min-width: 681px) {
  h1, h3 {
    font-size: 40px;
  }
}

@media screen and (min-width: 1281px) {
  h1, h3 {
    font-size: 50px;
  }
}

h2 {
    font-size: 15px !important;
    background-color: var(--color-accent-red);
    background-image: linear-gradient(
        90deg,
        var(--color-accent-red) 0%,
        var(--color-accent-blue) 48%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.h1, .h2, .h3, .h4, .h5, .h6 {
    font-size: 1rem;
}

.fw {
    max-width: 100% !important;
    justify-content: center !important;
    align-content: center !important;
}

.contentw {
    width: 100%;
    max-width: 1250px !important;
    margin-inline: auto;
}

#result-wrapper .row {
    --bs-gutter-x: 16px !important;
    --bs-gutter-y: 16px !important;
}

#result-wrapper .product-wrapper .productbox {
    margin: 0 16px !important;
}

.product-wrapper {
    background-color: var(--color-bg-main) !important;
}

.productbox.productbox-hover, .productbox.productbox-hover .productbox-inner, .productbox.productbox-hover .productbox-inner::before {
    background: var(--color-bg-main) !important;
    background-color: var(--color-bg-main) !important;
}

.ribbon-3, .ribbon.ribbon-3.productbox-ribbon, .productbox-ribbon { 
    background: var(--color-ribbon-bg) !important;
    background-image: none !important;
    color: var(--color-text-dark) !important;
    background-clip: border-box !important;
    -webkit-background-clip: border-box !important;
    -webkit-text-fill-color: var(--color-text-dark) !important;
}

.productbox-ribbon, .ribbon.ribbon-3.productbox-ribbon::before {
    border-right-color: var(--color-ribbon-border) !important;
}

.btn-primary:hover {
    background-color: var(--color-text-main);
}

#footer::before {
    background: var(--color-footer-overlay);
}

#footer {
    box-shadow: 0px -5px 6px 0px var(--color-shadow);
    background-position: left center;
    background-image: url(https://rotabene.de/wp-content/uploads/2023/08/Rotabene-Logo-Ausrufezeichen.webp);
    background-size: contain;
    background-repeat: no-repeat;
}

#footer-boxes .col-lg-3 {
    max-width: 33.3333%;
    flex: 0 0 33.3333%;
}

#copyright {
    visibility: hidden;
}

.square-image .inner {
    height: 95% !important;
}

.table-striped tbody tr:nth-of-type(even), .account-icon-dropdown .dropdown-footer, .form-counter .btn:hover {
    background-color: var(--color-light-gray);
}