:root {
    --CI-color-black: #1d1d1b;
    --CI-color-brown: #968375;
    --CI-color-link: #a75427;
    --CI-color-link-hover: #723419;
    --passepartout-padding: 1.4rem;
}

@font-face {
    font-family: 'bauhaus_stdlight';
    src: url('../fonts/Bauhaus_Std/bauhaus_std_light-webfont.woff2') format('woff2'),
         url('./fonts/Bauhaus_Std/bauhaus_std_light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'bauhaus_stdmedium';
    src: url('../fonts/Bauhaus_Std/bauhaus_std_medium-webfont.woff2') format('woff2'),
         url('../fonts/Bauhaus_Std/bauhaus_std_medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

html, body {
    background-color: var(--CI-color-brown);
    font-family: 'bauhaus_stdlight';
}

html[scrolling="snap"] {
    scroll-snap-type: y mandatory;
}

a {
    text-decoration: none;
    color: var(--CI-color-link);
    transition: color 330ms ease;
}
a:active, a:focus, a:hover {
    color: var(--CI-color-link-hover);
}

html[scrolling="snap"] section .passepartout { width: 100% !important; }
html[scrolling="snap"] section > .container {
    height: 100vh;
    display: flex;
    align-items: center;
}
html[scrolling="snap"] #section-spacer { display:block; height:90px; }
html[scrolling="snap"] #section-einladung { scroll-snap-align:end; }
html[scrolling="snap"] #section-neueroeffnung { scroll-snap-align:start; }

strong {
    font-size: inherit;
    font-style: normal;
    font-weight: normal;
    font-family: 'bauhaus_stdmedium'
}


svg .ci-black {
    fill: var(--CI-color-black);
}
svg .ci-brown {
    fill: var(--CI-color-brown);
}
svg .fill-white {
    fill: #ffffff;
}

.aspect-ratio-1-1 {
    aspect-ratio: 1 / 1;
}

@media (min-width: 768px) {
    #neueroeffnung-canvas > div:last-child {
        padding-left: 0.7rem;
    }
}

.passepartout {
    background-color: #ffffff;
    position: relative;
    padding: var(--passepartout-padding);
}


@media (max-width: 767.98px) {
    #neueroeffnung-canvas > div:first-child {
        display: none;
    }
}


#neueroeffnung-right,
#neueroeffnung-left {
    height: 100%;
}
#neueroeffnung-left {
    background-image: url(../img/leatherette_bg-pattern.jpg);
    background-position: bottom center;
    background-repeat: no-repeat;
    background-size: cover;
}

#neueroeffnung-left svg.alles-leder-company-logo {
    width: 76% !important;
    margin: 0 auto;
}



html[breakpoint="xs"] #neueroeffnung-left > div:last-child { padding:4%; font-size:1.125rem; }
html[breakpoint="sm"] #neueroeffnung-left > div:last-child { padding:4%; font-size:1.25rem; }
html[breakpoint="md"] #neueroeffnung-left > div:last-child { padding:4%; font-size:1.2rem; }
html[breakpoint="lg"] #neueroeffnung-left > div:last-child { padding:4%; font-size:1.5rem; }
html[breakpoint="xl"] #neueroeffnung-left > div:last-child { padding:4%; font-size:1.625rem; }
html[breakpoint="xxl"] #neueroeffnung-left > div:last-child { padding:4%; font-size:1.75rem; }

#neueroeffnung-right {
    background-image: url(../img/handbag_bg-image.jpg);
    background-position: right center;
    background-repeat: no-repeat;
    background-size: cover;
    color: #ffffff;
}


html[breakpoint="xs"] #neueroeffnung-right > div { padding: 0 14% 6% 10%; }
html[breakpoint="sm"] #neueroeffnung-right > div { padding: 0 14% 9% 10%; }
html[breakpoint="md"] #neueroeffnung-right > div { padding: 0 14% 13% 10%; }
html[breakpoint="lg"] #neueroeffnung-right > div { padding: 0 14% 15% 10%; }
html[breakpoint="xl"] #neueroeffnung-right > div { padding: 0 14% 17% 10%; }
html[breakpoint="xxl"] #neueroeffnung-right > div { padding: 0 14% 19% 10%; }


html[breakpoint="xs"] #neueroeffnung-right h1 { margin-bottom: -0.6rem; }
html[breakpoint="sm"] #neueroeffnung-right h1 { margin-bottom: -0.8rem; }
html[breakpoint="md"] #neueroeffnung-right h1 { margin-bottom: -1.0rem; }
html[breakpoint="lg"] #neueroeffnung-right h1 { margin-bottom: -1.4rem; }
html[breakpoint="xl"] #neueroeffnung-right h1 { margin-bottom: -2rem; }
html[breakpoint="xxl"] #neueroeffnung-right h1 { margin-bottom: -2rem; }

html[breakpoint="xs"] span.neu { top:-3%; right:2%; font-size:1.5rem; letter-spacing:0.25rem; }
html[breakpoint="sm"] span.neu { top:-5%; right:2%; font-size:2.9rem; letter-spacing:0.5rem; }
html[breakpoint="md"] span.neu { top:-4%; right:2%; font-size:2.9rem; letter-spacing:0.5rem; }
html[breakpoint="lg"] span.neu { top:-5%; right:2%; font-size:4.2rem; letter-spacing:0.625rem; }
html[breakpoint="xl"] span.neu { top:-5%; right:2%; font-size:5.1rem; letter-spacing:0.75rem; }
html[breakpoint="xxl"] span.neu { top:-5%; right:2%; font-size:6rem; letter-spacing:1rem; }

#einladung-font {
    width: 39% !important;
}

html[breakpoint="xs"] span.beginn { font-size:1.3rem; line-height:1.80rem; }
html[breakpoint="sm"] span.beginn { font-size:1.8rem; line-height:2.60rem; }
html[breakpoint="md"] span.beginn { font-size:2.0rem; line-height:2.75rem; }
html[breakpoint="lg"] span.beginn { font-size:2.2rem; line-height:3.125rem; }
html[breakpoint="xl"] span.beginn { font-size:2.4rem; line-height:3.3rem; }
html[breakpoint="xxl"] span.beginn { font-size:2.6875rem; line-height:3.55rem; }




#section-einladung {
    margin-top: 160px;
    font-size: 1.7rem;
}
#section-einladung address {
    margin: 0;
}

#section-einladung .passepartout {
    padding: 6.41% 7.26% 6.41% 12.22%;
}


#section-einladung .alles-leder-company-logo {
    width: 57.10% !important;
    margin: 0 0 0 auto;
    height: auto;
}

/*
html[breakpoint="xs"] 
html[breakpoint="sm"] 
html[breakpoint="md"] 
html[breakpoint="lg"] 
html[breakpoint="xl"] 
html[breakpoint="xxl"] 
*/








.calltoscroll { display:none; }
#section-spacer { display:none; }
html[scrolling="snap"] .calltoscroll { display:flex; }

.calltoscroll {
	left: 50%;
	position: absolute;
    border-radius: 50%;
    align-items: center;
    --border-width: 4px;
    justify-content: center;
    background-color: #ffffff;
}
#section-einladung .calltoscroll {
    top: 0;
    width: 90px;
    height: 90px;
    transform: translate(-50%,calc(-50% + (var(--border-width) / 2)));
    border: var(--border-width) solid var(--CI-color-brown);
}
#section-neueroeffnung .calltoscroll {
    bottom: 0;
    width: 90px;
    height: 90px;
    border-width: 0;
    border-style: none;
    transform: translate(-50%,calc(+50% - (var(--border-width) / 2)));
}
.calltoscroll .mouse {
    width: 35px;
    height: 55px;
    margin: 0 auto;
    display: block;
    position: relative;
    border-radius: 23px;
    border: 3px solid var(--CI-color-brown);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
#section-neueroeffnung .calltoscroll .mouse > * {
    top: 29%;
    left: 50%;
    width: 8px;
    height: 8px;
    display: block;
    position: absolute;
    border-radius: 50%;
    margin: -4px 0 0 -4px;
    background: var(--CI-color-brown);
    -webkit-animation: mouse-scroll-down 2.5s linear infinite;
    -moz-animation: mouse-scroll-down 2.5s linear infinite;
    animation: mouse-scroll-down 2.5s linear infinite;
}

#section-einladung {
    font-size: clamp(8px, calc(8px + (34 - 8) * ((100vw - 320px) / 1320)), 28px);
}

#section-einladung .calltoscroll .mouse > * {
    bottom: 29%;
    left: 50%;
    width: 8px;
    height: 8px;
    display: block;
    position: absolute;
    border-radius: 50%;
    margin: -4px 0 0 -4px;
    background: var(--CI-color-brown);
    -webkit-animation: mouse-scroll-up 2.5s linear infinite;
    -moz-animation: mouse-scroll-up 2.5s linear infinite;
    animation: mouse-scroll-up 2.5s linear infinite;
}
@-webkit-keyframes mouse-scroll-up {
    0% {
        opacity: 1;
        top: 50%;
    } 15% {
        opacity: 1;
        top: 29%;
    } 50% {
        opacity: 0;
        top: 29%;
    } 100% {
        opacity: 0;
        top: 50%;
    }
}
@-webkit-keyframes mouse-scroll-down {
    0% {
        opacity: 1;
        top: 29%;
    } 15% {
        opacity: 1;
        top: 50%;
    } 50% {
        opacity: 0;
        top: 50%;
    } 100% {
        opacity: 0;
        top: 29%;
    }
}
@-moz-keyframes mouse-scroll-up {
    0% {
        opacity: 1;
        top: 50%;
    } 15% {
        opacity: 1;
        top: 29%;
    } 50% {
        opacity: 0;
        top: 29%;
    } 100% {
        opacity: 0;
        top: 50%;
    }
}
@-moz-keyframes mouse-scroll-down {
    0% {
        opacity: 1;
        top: 29%;
    } 15% {
        opacity: 1;
        top: 50%;
    } 50% {
        opacity: 0;
        top: 50%;
    } 100% {
        opacity: 0;
        top: 29%;
    }
}
@keyframes mouse-scroll-up {
    0% {
        opacity: 1;
        top: 50%;
    } 15% {
        opacity: 1;
        top: 29%;
    } 50% {
        opacity: 0;
        top: 29%;
    } 100% {
        opacity: 0;
        top: 50%;
    }
}
@keyframes mouse-scroll-down {
    0% {
        opacity: 1;
        top: 29%;
    } 15% {
        opacity: 1;
        top: 50%;
    } 50% {
        opacity: 0;
        top: 50%;
    } 100% {
        opacity: 0;
        top: 29%;
    }
}

html[breakpoint="xs"] #section-einladung .calltoscroll { transform: translate(-50%,calc(-50% + (var(--border-width) / 2))) scale(0.52); }
html[breakpoint="sm"] #section-einladung .calltoscroll { transform: translate(-50%,calc(-50% + (var(--border-width) / 2))) scale(0.72); }
html[breakpoint="md"] #section-einladung .calltoscroll { transform: translate(-50%,calc(-50% + (var(--border-width) / 2))) scale(0.92); }
html[breakpoint="xs"] #section-neueroeffnung .calltoscroll { transform: translate(-50%,calc(+50% - (var(--border-width) / 2))) scale(0.52); }
html[breakpoint="sm"] #section-neueroeffnung .calltoscroll { transform: translate(-50%,calc(+50% - (var(--border-width) / 2))) scale(0.72); }
html[breakpoint="md"] #section-neueroeffnung .calltoscroll { transform: translate(-50%,calc(+50% - (var(--border-width) / 2))) scale(0.92); }