/* raleway-regular - latin */
@font-face {
font-display: swap; 
font-family: 'Raleway';
font-style: normal;
font-weight: 400;
src: url('../fonts/raleway-v34-latin-regular.woff2') format('woff2'); 
}
/* raleway-700 - latin */
@font-face {
font-display: swap; 
font-family: 'Raleway';
font-style: normal;
font-weight: 700;
src: url('../fonts/raleway-v34-latin-700.woff2') format('woff2'); 
}
/* libre-caslon-text-regular - latin */
@font-face {
font-display: swap; 
font-family: 'Libre Caslon Text';
font-style: normal;
font-weight: 400;
src: url('../fonts/libre-caslon-text-v5-latin-regular.woff2') format('woff2'); 
}

/* Farbpalette */
    :root {
        --nacht:    #0A090E;
        --kohle:    #32313F;
        --stahl:    #A3A9BF;
        --leder:    #594B42;
        --sand:     #8B7F71;
        --rose:     #D9BEB3;
        --schnee:   #FFFAFA;
        --weiss:    #FFFFFF;
    }
      


/* Optische Darstellung 
p {
background-color: #e0e0e0;
padding: 0px;
text-align: center;
border: 1px solid #ccc;
box-sizing: border-box;
margin: 0;
}*/

html, body {
    margin: 0;
    padding: 0;
    font-family: Raleway, sans-serif;
    font-size: 18px;
    line-height: 24px;
    font-weight: 300;
    color: var(--nacht);
    scroll-behavior: smooth;
    background-color: var(--schnee);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}
*:focus, .btn.focus, .btn:focus, button:focus {
    outline: 0 none;
    border: 0;
    border-color: transparent;
    -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0)!important;
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0)!important;
}
::-webkit-scrollbar {
    width: 6px
}
::-webkit-scrollbar-track {
    background: var(--schnee);
    border-radius: 0px
}
::-webkit-scrollbar-thumb {
    background: var(--rose);
    border-radius: 3px
}
::selection {
    background: var(--schnee);
    color: var(--nacht);
}
::-moz-selection {
    background: var(--schnee);
    color: var(--nacht);
}
.strong {
    font-weight: 700;
}
a {
    color: var(--sand);
    text-decoration: none;
}
a:hover {
    color: var(--nacht);
}
figure {
    margin: 0;
    padding: 0;
}
.btn, .strong, strong {
    font-weight: 700;
}
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
    font-family: Libre Caslon Text, serif;
}
h1, .h1, h2, .h2 {
    font-size: 36px;
}
h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
    font-size: 22px;
}

.sidebar h1 {
    font-size: 28px;
    margin-bottom: 5px;
}
.sidebar h2 {
    font-size: 18px;
    font-weight: 400;
    margin-bottom: 0px;
}

@media screen and (max-width: 992px) {
    h1, .h1, h2, .h2 {
        font-size: 32px;
    }
    h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
        font-size: 20px;
    }
    .sidebar h1 {
        font-size: 24px;
    }
    .sidebar h2 {
        font-size: 16px;
    }
}

@media screen and (max-width: 425px) {
    h1, .h1, h2, .h2 {
        font-size: 24px;
    }
    h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
        font-size: 18px;
    }
    .sidebar h1 {
        font-size: 20px;
    }
    .sidebar h2 {
        font-size: 14px;
    }
}

.two-line-text {
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Maximal 2 Zeilen */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 50px;
}





/* Navbar */
.burger-menu {
    position: fixed;
    top: 35px;
    left: 25px;
    z-index: 1053;
    cursor: pointer;
    height: 45px;
}
.fixed-top {
    z-index: 1100!important;
}
.overlay {
    position: fixed;
    top: 100px;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.85);
    z-index: 1050;
    display: none;
}
.sidebar {
    position: fixed;
    top: 100px;
    left: -60%;
    width: 30%;
    height: 100%;
    background:var(--schnee);
    color: var(--sand);
    transition: left 0.3s ease-in-out, opacity 0.3s ease-in-out;
    opacity: 0;
    z-index: 1052;
    overflow-y: scroll;
}
.sidebar.active {
    left: 0;
    opacity: 1;
}
.sidebar a.submenu-toggle {
    display: block;
    background-image: url('../images/icon-right.svg');
    background-repeat: no-repeat;
    background-position: center right;
}
.submenu {
    position: fixed;
    top: 100px;
    left: -60%;
    width: 30%;
    height: 100%;
    background:var(--weiss);
    color: var(--sand);
    transition: left 0.3s ease-in-out, opacity 0.3s ease-in-out;
    opacity: 0;
    z-index: 1050;
    overflow-y: scroll;
}
.submenu.active {
    left: 30%;
    opacity: 1;
}
.sidebar a, 
.submenu a {
    font-size: 16px;
    text-transform: uppercase;
    display: block;
    color: var(--sand);
    text-decoration: none;
}
.sidebar a:hover, 
.sidebar a.active, 
.submenu a:hover, 
.submenu a.active {
    color: var(--nacht);
}
@media (max-width: 992px) {
    .sidebar a, 
    .submenu a {
        font-size: 14px;
    }

    .sidebar, .submenu {
        width: 45%;
    }
    .submenu.active {
    left: 45%;
    }            
}


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

.submenu span.image-title {
    display: none;
}


.backbutton {
    border: none;
    background-color: transparent;
    font-size: smaller;
    cursor: pointer;
    color: var(--sand);
}


/* Header */
.header,
.header .row {
    height: 100px;
    font-size: 16px;
}
.header .icon {
    width: 22px;
    height: 22px;
}
.header .icon-lg {
    width: auto;
    height: 45px;
}

.logo {
    max-height: 90px!important;
    width: auto;
}
@media screen and (max-width: 576px) {

    .logo {
        max-height: auto!important;
        width: calc(100% - 180px);
        margin-bottom: 10px;
        margin-top: 10px;
    }
}

/* Allgemeine Styles */

.sectionpadding {
    padding-top: 100px;
    padding-bottom: 100px;
}
.sectionpadding-top {
    padding-top: 100px;
}
.sectionpadding-bottom {
    padding-bottom: 100px;
}

.sectionpadding-lg {
    padding-top: 200px;
    padding-bottom: 200px;
}
.sectionpadding-top-lg {
    padding-top: 200px;
}
.sectionpadding-bottom-lg {
    padding-bottom: 200px;
}

.sectionpadding-xl {
    padding-top: 300px;
    padding-bottom: 300px;
}
.sectionpadding-top-xl {
    padding-top: 300px;
}
.sectionpadding-bottom-xl {
    padding-bottom: 300px;
}

@media screen and (max-width: 992px) {
    .sectionpadding {
        padding-top: 50px;
        padding-bottom: 50px;
    }
    .sectionpadding-top {
        padding-top: 50px;
    }
    .sectionpadding-bottom {
        padding-bottom: 50px;
    }

    .sectionpadding-lg {
        padding-top: 100px;
        padding-bottom: 100px;
    }
    .sectionpadding-top-lg {
        padding-top: 100px;
    }
    .sectionpadding-bottom-lg {
        padding-bottom: 100px;
    }

    .sectionpadding-xl {
        padding-top: 150px;
        padding-bottom: 150px;
    }
    .sectionpadding-top-xl {
        padding-top: 150px;
    }
    .sectionpadding-bottom-xl {
        padding-bottom: 150px;
    }
}

.bg-kohle {
    background-color: var(--kohle);
    color: var(--weiss); 
}
.bg-kohle a {
    color: var(--weiss);
}
.bg-stahl {
    background-color: var(--stahl);
    color: var(--weiss); 
}
.bg-stahl a {
    color: var(--weiss);
}
.bg-stoeckerl {
    background-image: url('../images/bg-stoeckerl.png');
    background-repeat: no-repeat;
    background-position: calc(100% + 40%) center;
}

.bg-stoeckerl2 {
    background-image: url('../images/bg-stoeckerl.png'), url('../images/bg-stoeckerl.png');
    background-repeat: no-repeat, no-repeat;
    background-position: calc(0% - 40%) center, calc(100% + 40%) center;
}

.bg-leder {
    background-color: var(--leder);
    color: var(--weiss); 
}
.bg-leder a {
    color: var(--weiss);
}
.bg-sand {
    background-color: var(--sand);
    color: var(--weiss); 
}
.bg-sand a {
    color: var(--weiss);
}
.bg-rose {
    background-color: var(--rose);
    color: var(--weiss); 
}
.bg-rose a {
    color: var(--weiss);
}
.bg-schnee {
    background-color: var(--schnee);
    color: var(--nacht); 
}
.bg-schnee a {
    color: var(--nacht);
}
.bg-weiss {
    background-color: var(--weiss);
    color: var(--nacht); 
}
.bg-weiss a {
    color: var(--nacht);
}


.text-kohle {
    color: var(--kohle);
}
.text-leder {
    color: var(--leder);
}

a.text-sand,
.text-sand {
    color: var(--sand);
}

.btn {
    font-size: 16px;
    text-transform: uppercase;
    padding: 10px 40px;
    border-radius: 48px;
    border: 0px solid #fff;
}

.btn-primary {
    background-color: var(--rose)!important;
    color: var(--weiss)!important;
}

.btn-primary:hover {
    background-color: var(--nacht)!important;
    color: var(--schnee)!important;
}


.bg-rose .btn-primary {
    background-color: var(--sand)!important;
    color: var(--weiss)!important;
}

.bg-rose .btn-primary:hover {
    background-color: var(--nacht)!important;
    color: var(--weiss)!important;
}

.bg-kohle .btn-primary {
    background-color: var(--stahl)!important;
    color: var(--weiss)!important;
}

.bg-kohle .btn-primary:hover {
    background-color: var(--nacht)!important;
    color: var(--weiss)!important;
}


.bg-schnee .bg-weiss .btn-primary {
    background-color: var(--schnee)!important;
    color: var(--sand)!important;
}

.bg-schnee .bg-weiss .btn-primary:hover {
    background-color: var(--sand)!important;
    color: var(--schnee)!important;
}

.bg-stahl .bg-weiss .btn-primary {
    background-color: var(--schnee)!important;
    color: var(--kohle)!important;
}

.bg-stahl .bg-weiss .btn-primary:hover {
    background-color: var(--kohle)!important;
    color: var(--schnee)!important;
}

/*Allgemeine Styles für die Carousel Slides*/
.f-carousel {
    --f-carousel-spacing: 8px;
}

/* SliderUhrenmarkeOne */
#SliderUhrenmarkeOne .f-carousel__slide {
    width: calc(100% / 1.2);
  }

@media (min-width: 768px) {
    #SliderUhrenmarkeOne .f-carousel__slide {
        width: calc(100% / 2);
    }
}  

@media (min-width: 992px) {
    #SliderUhrenmarkeOne .f-carousel__slide {
        width: calc(100% / 1.5);
    }  
}

@media (min-width: 1200px) {
    #SliderUhrenmarkeOne .f-carousel__slide {
        width: calc(100% / 1.8);
    }
}   
@media (min-width: 1400px) {
    #SliderUhrenmarkeOne .f-carousel__slide {
        width: calc(100% / 3.2);
    }
} 


/* SliderUhrenmarkeTwo */
#SliderUhrenmarkeTwo .f-carousel__slide {
    width: calc(100% / 1.2);
  }
@media (min-width: 768px) {
    #SliderUhrenmarkeTwo .f-carousel__slide {
        width: calc(100% / 2);
    }
}
@media (min-width: 992px) {
    #SliderUhrenmarkeTwo .f-carousel__slide {
        width: calc(100% / 1.5);
    }  
}
@media (min-width: 1200px) {
    #SliderUhrenmarkeTwo .f-carousel__slide {
        width: calc(100% / 1.8);
    }
}
@media (min-width: 1400px) {
    #SliderUhrenmarkeTwo .f-carousel__slide {
        width: calc(100% / 3.2);
    }
}  

.navarrow {
    width: 37px;
    height: 37px;
    border-radius: 50%;
    background-size: 50%;
    background-position: center center;
    background-repeat: no-repeat;
    text-indent: -9999px;
    border: none;
}

.bg-rose .navarrow {
    background-color: var(--sand);
    background-image: url('../images/arrow-right-rose.svg');
}

.bg-rose .navarrow.back {
    rotate: 180deg;
}

.bg-kohle .navarrow {
    background-color: var(--stahl);
    background-image: url('../images/arrow-right-rose.svg');
}

.bg-kohle .navarrow.back {
    rotate: 180deg;
}

.parallax-backgroundOne {
    background-color: #A3A9BF;
    background-position-x: center;
    height: 676px;
    background-image: url('../images/demo-parallax1.jpg');
    background-repeat: no-repeat;
}

.parallax-backgroundTwo {
    background-color: #A3A9BF;
    background-position-x: center;
    height: 676px;
    background-image: url('../images/demo-parallax2.jpg');
    background-repeat: no-repeat;
}


ul.tags .btn {
    font-size: 12px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background-color: transparent;
}

.tagdetailseite ul.tags .btn {
    font-size: 16px;
}


footer {
    background-image: url(../images/bg-footer.svg);
    background-size: auto 100%;
    background-position: center bottom;
    background-repeat: no-repeat;
}


footer,
footer a {
    color: var(--sand);
    font-size: 16px;
    text-decoration: none;
}

.stoeckerl-uhren-detailseite .mod-breadcrumbs.breadcrumb.px-3.py-2 {
    padding: 0 0 10px 0!important;
    font-size: 16px;
    margin-bottom: 0!important;
}

.stoeckerl-uhren-detailseite .breadcrumb-item+.breadcrumb-item::before {
    background-image: url(../images/arrow-black-button.png);
    margin-top: 6px!important;
}

 .home-history a {
    color: #0A090E;
 }

 .home-history a:hover {
    color: #594B42;
 }


 @media (max-width: 425px) {
  h1, h2, h3, h4, h5, h6 {
    word-wrap: break-word;      /* ältere Schreibweise */
    overflow-wrap: break-word;  /* moderne Variante */
    hyphens: auto;              /* Silbentrennung aktivieren */
  }
}

.formError, .formRed {
    color: red;
    font-weight: 500;
    font-size: 12px;
}

.slider-text-absolute-left {
    position: absolute;
    top: 50%;
    left:0%;
    transform: translate(100px, -50%);
    text-align: left;
    width: calc(50% - 250px);
}

@media (max-width: 991px) {
    .slider-text-absolute-left {
        position: absolute;
        top: 75%;
        left: 10%;
        transform: translate(0%, -50%);
        text-align: left;
        width: 80%;
    }
}



.djacc-popup .djacc__openbtn--default {
    background: #000000;
}

#CybotCookiebotDialogHeader {
    padding: 0em!important;
    height: 0px!important;
}


#CybotCookiebotDialogFooter #CybotCookiebotDialogBodyButtonAccept, #CybotCookiebotDialogFooter #CybotCookiebotDialogBodyLevelButtonAccept, #CybotCookiebotDialogFooter #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll {
    background-color: #383838!important;
    border-color: #383838!important;
    color: #000;
}
#CybotCookiebotDialogFooter .CybotCookiebotDialogBodyButton {
    border: 2px solid #383838!important;
}

#CybotCookiebotDialogHeader {
    width: 0px!important;
  overflow:hidden!important;
}

#CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogBodyEdgeMoreDetails a {
    color: #383838!important;
}
#CybotCookiebotDialogPoweredbyCybot,
#CybotCookiebotDialogPoweredbyLink{
    width: 0px!important;
  overflow:hidden!important;
}

#CybotCookiebotDialog {
    background-color: #ffffff!important;
}
#CybotCookiebotDialogNav .CybotCookiebotDialogNavItemLink.CybotCookiebotDialogActive {
    border-bottom: 1px solid #383838!important;
    color: #383838!important;
}
#CybotCookiebotDialogTabContent input:checked+.CybotCookiebotDialogBodyLevelButtonSlider {
    background-color: #383838!important;
}
#CybotCookiebotDialog #CybotCookiebotDialogBodyContentText a, #CybotCookiebotDialog #CybotCookiebotDialogBodyLevelButtonIABHeaderViewPartnersLink, #CybotCookiebotDialog #CybotCookiebotDialogDetailBulkConsentList dt a, #CybotCookiebotDialog #CybotCookiebotDialogDetailFooter a, #CybotCookiebotDialog .CybotCookiebotDialogBodyLevelButtonIABDescription a, #CybotCookiebotDialog .CybotCookiebotDialogDetailBodyContentCookieLink, #CybotCookiebotDialogDetailBodyContentTextAbout a {
    color: #383838!important;
}
#CybotCookiebotDialogNav .CybotCookiebotDialogNavItemLink:hover {
    color: #383838!important;
}

#CybotCookiebotDialogHeader {
    border-bottom: 0px solid #D6D6D6!important;
}


#CookiebotWidget #CookiebotWidget-buttons #CookiebotWidget-btn-withdraw {
    background-color: #FFFFFF;
    border-color: #383838!important;
    color: #383838!important;
    transition-delay: .3s;
}

#CookiebotWidget #CookiebotWidget-buttons #CookiebotWidget-btn-change {
    background-color:  #383838!important;
    border-color:  #383838!important;
    color: #FFFFFF;
}

#CookiebotWidget .CookiebotWidget-consent-details button {
    color: #383838!important;
}

#CookiebotWidget .CookiebotWidget-body .CookiebotWidget-consents-list li.CookiebotWidget-approved svg {
    fill: #383838!important;
}

#CookiebotWidget .CookiebotWidget-body .CookiebotWidget-consents-list li.CookiebotWidget-approved svg {
    fill: #383838!important;
}