/* gabriela-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Gabriela";
  font-style: normal;
  font-weight: 400;
  src: url("../assets/fonts/gabriela/gabriela-v23-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "hitch-hike";
  font-style: normal;
  font-weight: 400;
  src: url("../assets/fonts/hitch_hike/hitch-hike-webfont.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/************************* ROBOTO FONT *************************/
/* roboto-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  src: url("../assets/fonts/roboto/roboto-v50-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Roboto";
  font-style: normal;
  font-weight: 500;
  src: url("../assets/fonts/roboto/roboto-v50-latin-500.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Roboto";
  font-style: normal;
  font-weight: 600;
  src: url("../assets/fonts/roboto/roboto-v50-latin-600.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700;
  src: url("../assets/fonts/roboto/roboto-v50-latin-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Roboto";
  font-style: normal;
  font-weight: 800;
  src: url("../assets/fonts/roboto/roboto-v50-latin-800.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Roboto";
  font-style: normal;
  font-weight: 900;
  src: url("../assets/fonts/roboto/roboto-v50-latin-900.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/************************* VARS *************************/
/************************* FUNCTIONS *************************/
/************************* BODY *************************/
body {
  font-family: "Gabriela";
}

/************************* FONT-FAMILIES *************************/
.hitch-hike {
  font-family: "hitch-hike";
}

.gabriela {
  font-family: "Gabriela";
}

.roboto {
  font-family: "Roboto";
}

.roboto-700 {
  font-family: "Roboto";
  font-weight: 700;
}

.fluid-h1 {
  font-size: clamp(48px, 38.8571428571px + 2.8571428571vw, 80px);
}

.fluid-h3 {
  font-size: clamp(24px, 21.7142857143px + 0.7142857143vw, 32px);
}

.fluid-mail {
  font-size: clamp(20px, 16.5714285714px + 1.0714285714vw, 32px);
}

.fluid-h4 {
  font-size: clamp(17px, 12.7142857143px + 1.3392857143vw, 32px);
}

.fluid-paragraph {
  font-size: clamp(17px, 16.4285714286px + 0.1785714286vw, 19px);
}

.fluid-icon-m {
  width: clamp(72px, 65.1428571429px + 2.1428571429vw, 96px);
}

.fluid-w-30 {
  width: clamp(20px, 17.1428571429px + 0.8928571429vw, 30px);
}

.fluid-w-200 {
  width: clamp(200px, 185.7142857143px + 4.4642857143vw, 250px);
}

.fluid-w-304 {
  width: clamp(250px, -20px + 22.5vw, 304px);
}

.fluid-w-347 {
  width: clamp(275px, -85px + 30vw, 347px);
}

.fluid-h-110 {
  height: clamp(90px, 44.5454545455px + 4.5454545455vw, 110px);
}

.fluid-h-250 {
  height: clamp(80px, 31.4285714286px + 15.1785714286vw, 250px);
}

.fluid-icon-w-s {
  width: clamp(30px, 24.2857142857px + 1.7857142857vw, 50px);
}

/************************* TEXT WRAPPING *************************/
.nowrap {
  white-space: nowrap;
}

/************************* Nav *************************/
nav {
  z-index: 1;
}

.navbar-nav .nav-link {
  white-space: nowrap;
}

.navbar-brand img {
  height: clamp(60px, 40px + 4vw, 88px);
}

/************************* ABF Img *************************/
.abf-bg {
  background-image: url("../assets/img/sandra_leica_bg_img.webp");
  background-size: cover;
  background-position: 30% top;
  min-height: 1200px;
  opacity: 60%;
  margin-top: -200px;
}

@media (max-width: 1024px) {
  .abf-bg {
    background-image: url("../assets/img/sandra_leica_bg_middle.webp");
    margin-top: -200px;
  }
}
@media (max-width: 600px) {
  .abf-bg {
    background-image: url("../assets/img/sandra_leica_bg_small.webp");
    margin-top: -250px;
  }
}
/************************* Section Devider *************************/
.section-divider-top {
  position: absolute;
  top: -70px;
  left: 0;
  width: 100%;
  height: 82px;
}

.section-divider-bottom {
  position: absolute;
  bottom: -70px;
  left: 0;
  width: 100%;
  height: 82px;
  transform: scaleY(-1);
}

.section-divider-fill {
  fill: #6b2b55;
}

/************************* Hero Section *************************/
.hero-section {
  position: relative;
  background-color: #6b2b55;
  margin-top: -28px;
}

/************************* Hero Section Cards Icon *************************/
.icon-max-width {
  max-width: 96px;
  width: 100%;
}

/************************* CARDS WRAPPER *************************/
.cards-wrapper img {
  max-width: 90px;
}

.card {
  min-height: 550px;
}

@media (width < 1400px) {
  .card {
    min-height: 350px;
  }
}
@media (width < 1200px) {
  .card {
    min-height: 250px;
  }
}
/************************* FOOTER *************************/
.relative-moving {
  position: relative;
  right: 50px;
}

footer {
  position: relative;
  z-index: 1;
}

/************************* ANCHOR *************************/
#philosophy {
  height: 0.1px;
}

.anchor-catcher {
  bottom: 240px;
}

/************************* CUSTOM SHADOWS *************************/
.shadow-divider {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
}

.shadow-divider-up {
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
}

.shadow-card {
  box-shadow: -1px 1px 10px 5px rgba(0, 0, 0, 0.3);
  position: relative;
  z-index: 1;
}

/************************* HOVER *************************/
.hover-75:hover {
  opacity: 75%;
}

/************************* ROTATE BURGER-M *************************/
.burger-icon {
  transition: transform 200ms ease;
  transform-origin: center;
}

#navToggler.is-open .burger-icon {
  transform: rotate(-90deg);
}

/************************* DIALOG *************************/
.dialog-bg {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 9999;
}

.card-wrapper {
  z-index: 99999;
}

/************************* CUSOM WIDTH *************************/
.fluid-w-500 {
  width: clamp(300px, 200px + 31.25vw, 650px);
}

.w-fit-content {
  width: fit-content;
}

/************************* CUSTOM HEIGHTS *************************/
.max-h-500 {
  max-height: 700px;
}

.overflow-y {
  overflow-y: auto;
}

.overflow-visible {
  overflow-y: visible;
}

.h-fit-content {
  height: fit-content;
}

/************************* SCROLLING *************************/
.no-overscroll {
  overscroll-behavior: contain; /* verhindert Scroll-Chaining */
}

/************************* WORKAROUND *************************/
.no-stretch {
  height: auto;
  min-height: 0;
  max-height: none;
  flex: 0 0 auto;
  align-self: center;
}

.fade {
  opacity: 0;
  transition: opacity 200ms ease;
  pointer-events: none;
}

.fade.is-visible {
  opacity: 1;
  pointer-events: auto;
}