:root {
        --primary-color: #80001d;
        --secondary-color: #8bc7c0;
        --white: #fff;
        --black: #000;
        --btn-hover-gray: #c4c4c4;
        --text-gray: #737373;
        --bg-gray: #f5f5f5;
        --silver: #c0c0c0;
        --text-red: #bf0019;
    }

html {
    height: 100%;
    font-size: 100%;
    /* overflow-y: scroll; */
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%
}

body {
    margin: 0 auto;
    min-height: 100%
}

body {
    font: 1em/1.5 sans-serif;
    color: #222
}


    h2, h4, h5 {
        font-family: Palatino, 'Palatino Linotype', 'Book Antiqua', FreeSerif, Georgia, serif;
        font-size: 1em;
        font-weight: bold
    }

h2 {
    font-size: 1.78em;
    line-height: 1.2381em;
    margin: 0 0 0.619em
}

h4 {
    font-size: 1.225em;
    line-height: 1em;
    margin: 0 0 .5em
}

h5 {
    font-size: 1em;
    line-height: 1.25em;
    margin: 0 0 .5em
}


svg:not(:root) {
    overflow: hidden
}

svg {
    width: 100%;
    height: 100%
}

img[src*=".svg"] {
    width: 100%
}

body {
    overflow-x: hidden
}

* {
    box-sizing: border-box
}

.grd {
    display: flex;
    flex-wrap: wrap;
    margin-left: -2rem;
    margin-right: -1rem
}

.grd.no-gap {
    margin-left: 0;
    margin-right: 0
}

.grd>.col {
    min-height: 1px;
    margin-left: 3rem;
    margin-right: 3rem;
    flex-basis: calc(100% - 6rem);
    max-width: calc(100% - 6rem)
}

.grd.no-gap>.col {
    margin-left: 0;
    margin-right: 0;
    flex-basis: 100%;
    max-width: 100%
}

body:before {
    content: "m"
}

.grd>.col.-m4 {
    flex-basis: calc(33.3333333333% - 6rem);
    max-width: calc(33.3333333333% - 6rem)
}

.grd.no-gap>.col.-m4 {
    flex-basis: 33.3333333333%;
    max-width: 33.3333333333%
}

/* .tabs a.selected, .tabs a.selected:hover {
    background-color: #bf0019;
    pointer-events: none;
} */

@media only screen and (min-width: 640px) {
    body:before {
        content: "t"
    }

    .grd>.col.-t6 {
        flex-basis: calc(50% - 6rem);
        max-width: calc(50% - 6rem)
    }

    .grd>.col.-tauto, .grd.no-gap>.col.-tauto {
        flex: 1 1 0px
    }
}

@media only screen and (min-width: 640px) and (max-width: 1023.99px) {

    .grd>.col._tfirst {
        order: -1
    }
}

@media only screen and (min-width: 1024px) {
    body:before {
        content: "l"
    }
}

@media only screen and (min-width: 1024px) and (max-width: 1399.99px) {

    .grd>.col._lfirst {
        order: -1
    }
}

@media only screen and (min-width: 1400px) {
    body:before {
        content: "d"
    }

    .grd>.col._dfirst {
        order: -1
    }
}

body:before {
    display: none
}


@font-face {
    font-display: swap;
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    src: url("../fonts/about-us/roboto-v20-latin-300.woff2") format("woff2"), url("../fonts/about-us/roboto-v20-latin-300.woff") format("woff")
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: url("../fonts/about-us/roboto-v20-latin-regular.woff2") format("woff2"), url("../fonts/about-us/roboto-v20-latin-regular.woff") format("woff")
}

@font-face {
    font-display: swap;
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    src: url("../fonts/about-us/roboto-v20-latin-500.woff2") format("woff2"), url("../fonts/about-us/roboto-v20-latin-500.woff") format("woff")
}

@font-face {
    font-display: swap;
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    src: url("../fonts/about-us/roboto-v20-latin-700.woff2") format("woff2"), url("../fonts/about-us/roboto-v20-latin-700.woff") format("woff")
}

@font-face {
    font-display: swap;
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 900;
    src: url("../fonts/about-us/roboto-v20-latin-900.woff2") format("woff2"), url("../fonts/about-us/roboto-v20-latin-900.woff") format("woff")
}

@font-face {
    font-display: swap;
    font-family: 'Roboto Condensed';
    font-style: normal;
    font-weight: 400;
    src: url("../fonts/about-us/roboto-condensed-v18-latin-regular.woff2") format("woff2"), url("../fonts/about-us/roboto-condensed-v18-latin-regular.woff") format("woff")
}

@font-face {
    font-display: swap;
    font-family: 'Roboto Condensed';
    font-style: normal;
    font-weight: 700;
    src: url("../fonts/about-us/roboto-condensed-v18-latin-700") format("woff2"), url("../fonts/about-us/roboto-condensed-v18-latin-700.woff") format("woff")
}

@font-face {
    font-display: swap;
    font-family: 'Blog Script';
    font-style: normal;
    font-weight: 400;
    src: url("../fonts/about-us/blog-script-regular.woff2") format("woff2"), url("../fonts/about-us/blog-script-regular.woff") format("woff"), url("../fonts/blog-script-regular.ttf") format("truetype")
}

* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;    
}

::-moz-selection {
    background: #3b3d40;
    color: var(--white)
}

::selection {
    background: #3b3d40;
    color: var(--white)
}

/* html {
    overflow-x: hidden
} */

body {
    font: 1em/1.5 "Roboto", sans-serif;
    color: #54565a
}

body {
    background-color: var(--bg-gray);
    overflow-x: hidden
}

main {
    display: block;
    position: relative;
    overflow: visible
}

body {
    min-width: 320px
}



h2, h4, h5 {
    font-family: "Roboto", sans-serif;
    line-height: 1.25em
}

h2 {
    font-weight: 400
}

h4 {
    text-transform: uppercase
}

h5 {
    font-weight: 700;
    font-size: 1.188em
}

.deko-headline {
    font-weight: bold;
    font-size: 1.688em;
    letter-spacing: .025em;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 1em
}

.deko-headline::after {
    content: "\00a0";
    width: 1.563rem;
    height: .313rem;
    background-color: var(--text-red);
    display: block;
    margin-top: .5em;
    margin-left: auto;
    margin-right: auto
}


ul.marker-rot li::marker, ol.marker-rot li::marker {
    color: var(--text-red)
}

ul.marker-mint li::marker, ol.marker-mint li::marker {
    color: var(--secondary-color)
}

ul.marker-violett li::marker, ol.marker-violett li::marker {
    color: #c9acbe
}

ul.marker-XL li::marker, ol.marker-XL li::marker {
    font-size: 2em
}

a.button, .button, .button:visited {
    font-family: "Roboto Condensed", sans-serif;
    font-size: 0.8125em;
    font-weight: bold;
    letter-spacing: .138466em;
    line-height: 3.538em;
    padding-left: 1.5em;
    padding-right: 1.5em;
    text-decoration: none !important;
    text-align: center;
    text-transform: uppercase;
    color: var(--white);
    background-color: var(--secondary-color);
    border: 1px solid transparent;
    position: relative;
    display: inline-block;
    overflow: hidden;
    cursor: pointer;
    white-space: nowrap;
    appearance: none;
    border-radius: 0;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out
}

.wrapper, .wrapper--full-l {
    margin-left: auto;
    margin-right: auto;
    width: 90%
}

.wrapper--full-l {
    width: 100%
}

@media only screen and (min-width: 1024px) {
    .wrapper--full-l {
        width: 90%
    }
}

@media only screen and (min-width: 1212px) {
    .wrapper, .wrapper--full-l {
        width: 80%
    }
}

@media only screen and (min-width: 1400px) {
    body {
        font-size: 1.125em
    }

    .wrapper, .wrapper--full-l {
        width: 90%;
        max-width: 1400px
    }
}

.tabs-container {
    z-index: 13
}

.tabs a {
    text-decoration: none;
    font-weight: bold;
    color: var(--white);
    padding: .125em .333em;
    text-align: center;
    display: inline-block;
    transition: color .25s, background .25s
}

.tabs a:nth-child(odd) {
    background-color: var(--text-gray)
}

.tabs a:nth-child(even) {
    background-color: #54565a
}

.tabs a:hover {
    color: silver
}

@media only screen and (min-width: 640px) {
    .tabs a {
        font-size: 1.25em;
        padding: .25em .5em
    }
}

@media only screen and (min-width: 1555px) {
    .tabs a {
        font-size: 1.875em
    }
}

.historie {
    position: relative
}

.historie__item {
    padding-top: 2em;
    padding-bottom: 2em;
    position: relative;
    scroll-margin-top: 60px;
}

.historie__item .inside {
    position: relative;
    margin-left: 40px
}

.historie__item:before {
    content: "\00a0";
    position: absolute;
    top: 0;
    left: 4rem;
    bottom: 0;
    width: 2px;
    margin-left: -1px;
    background-color: var(--primary-color)
}

.historie__jahr {
    background-color: var(--text-red);
    color: var(--white);
    font-size: 1em;
    position: absolute;
    top: -1em;
    left: 0;
    border-radius: 10px 0;
    margin: 0;
    padding: 0 .75em;
    line-height: 2em;
    box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.3)
}

.historie__jahr:before {
    content: "\00a0";
    position: absolute;
    width: 2em;
    height: 2em;
    right: 0;
    top: 0;
    background: var(--primary-color);
    transform: skewX(45deg);
    transform-origin: 100% 0;
    z-index: -1
}
/*  */

.historie__bar {
    background-color: var(--text-red);
    position: absolute;
    left: 2.5rem;
    right: 3rem;
    top: 2em;
    height: .5em;
    border-radius: 9em
}

.historie__dot {
    width: 2em;
    height: 2em;
    position: absolute;
    left: 3rem;
    top: 1.25em;
    background: transparent url(../images/icon/historie-dot.svg) center center no-repeat;
    background-size: contain
}

@media only screen and (min-width: 640px) {
    .historie__item .inside {
        margin-left: 0
    }

    .historie__item:before {
        left: 50%
    }

    .historie__jahr {
        font-size: 1.25em
    }

    .historie__text {
        padding-top: 2.5em
    }

    .historie__bar {
        top: 2.5em;
        left: 3rem
    }

    .historie__dot {
        left: 50%;
        top: 1.75em;
        margin-left: -1em
    }
}

@media only screen and (min-width: 1024px) {
    .historie__headline {
        font-size: 1.5em
    }
}

@media only screen and (min-width: 1555px) {
    .historie__jahr {
        font-size: 3.125em;
        line-height: 1.5em;
        padding-left: .5em;
        padding-right: .5em;
        top: -.75em
    }

    .historie__dot {
        width: 40px;
        height: 40px;
        margin-left: -20px;
        top: 3.6rem
    }

    .historie__bar {
        height: 20px;
        top: 3.75em
    }

    .historie__text {
        padding-top: 4.5em
    }
}

.about-us-brands {
    display: block;
    position: relative;
    overflow: hidden;
    transition: box-shadow .3s
}

.about-us-brands img {
    display: block;
    margin-bottom: 0;
    width: 100%;
    
}

.about-us-brands_img {
    transition: transform .3s
}

.wiltshire_brand_img {
    opacity: 0.7 !important;
    transition: opacity 0.3s ease, transform 0.3s ease !important;
}

.about-us-brands_logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); 
    max-width: 80%; 
    max-height: 80%; 
    width: auto;
    height: auto;
    object-fit: contain;
}

.brands_wiltshire_logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); 
    max-width: 80%; 
    max-height: 80%; 
    width: auto;
    height: auto;
    object-fit: contain;
}

.about-us-brands:hover {
    box-shadow: 0 0.5em 1em rgba(0, 0, 0, 0.3)
}

.about-us-brands:hover .about-us-brands_img {
    transform: scale(1.05)
}

@media only screen and (max-width: 991px) {
    .about-us-brands_logo {
        max-width: 90%; 
        max-height: 90%;
    }
    .brands_wiltshire_logo {
        max-width: 90%; 
        max-height: 90%;
    }
}

@media only screen and (max-width: 575.98px) {
    .about-us-brands_logo {
        max-width: 100%;
        max-height: 100%;
    }
    .brands_wiltshire_logo {
        max-width: 70%; 
        max-height: 90%;
    }
}

.c-rot {
    color: var(--text-red)
}

.b-c-rot {
    background-color: var(--text-red)
}


/* :root {
        --primary-color: #80001d;
        --secondary-color: #8bc7c0;
        --white: #fff;
        --black: #000;
        --btn-hover-gray: #c4c4c4;
        --text-gray: #737373;
        --bg-gray: #f5f5f5;
        --silver: #c0c0c0;
        --text-red: #bf0019;
    } */

    .c-weiss {
        color: var(--white) !important;
    }

    .slider-area-about-us {
        position: relative;
        width: 100%;
        overflow: hidden;
    }

    .swiper-slide img {
        width: 100%;
        height: auto;
        display: block;
        object-fit: cover;
    }

    /* Nav Arrows */
    .banner-nav {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        font-size: 24px;
        background-color: #bf0019;
        color: #fff;
        width: 40px;
        height: 40px;
        line-height: 38px;
        text-align: center;
        border-radius: 50%;
        cursor: pointer;
        z-index: 10;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    }

    .banner-prev {
        left: 15px;
    }

    .banner-next {
        right: 15px;
    }

    @media (min-width: 768px) {
        .banner-prev {
            left: 50px;
        }

        .banner-next {
            right: 50px;
        }
    }

    /* Mobile view */
    @media (max-width: 768px) {
        .about-us-detail {
            padding: 16px; 
        }
        .about-us-family-detail {
            padding: 16px 28px;
        }
    }

    @media (max-width: 991px) {
        .fackelmann-brands-logo {
            width: 80%;
            height: auto;
        }
    }

    .about-us-family-detail {
        font-weight: 400 !important;
    }

    .about-us-detail {
        font-weight: 400 !important;
    }

    .tabs.grd.no-gap a.active {
        background-color: var(--text-red);
        color: white;
    }

    /* Tablet styles */
    @media only screen and (min-width: 640px) {
        .tabs.grd.no-gap {
            padding-left: 20px;
            padding-right: 20px;

        }
    }

    .stats-section {
        background-color: #bf0019;
        color: #fff;
        padding: 40px 0;
    }

    .stat-box {
        text-align: center;
        padding: 20px 10px;
    }

    .stat-icon {
        font-size: 65px;
        margin-bottom: 10px;
        display: inline-block;
    }

    .stat-number {
        font-weight: 700;
        font-size: 20px;
    }

    .stat-label {
        font-weight: 600;
        font-size: 14px;
    }

    @media (max-width: 575.98px) {
        .stats-section {
            padding: 13px 0;
        }

        .stat-box {
            padding: 15px 5px;
        }

        .stat-icon {
            font-size: 36px;
            margin-bottom: 6px;
        }

        .stat-number {
            font-size: 16px;
        }

        .stat-label {
            font-size: 12px;
        }

        .img-custom {
            width: 100%;
            height: auto;
        }

        .img-fluid-custom {
            display: block;
        }
    }