/* Screen Sizes https://tailwindcss.com/docs/responsive-design
xs	25rem (400px)	@media (width >= 40rem) { ... }
sm	40rem (640px)	@media (width >= 40rem) { ... }
md	48rem (768px)	@media (width >= 48rem) { ... }
lg	64rem (1024px)	@media (width >= 64rem) { ... }
xl	80rem (1280px)	@media (width >= 80rem) { ... }
2xl	96rem (1536px)	@media (width >= 96rem) { ... }
*/
/* 
only for stuff which is easier to write in sass than tailwind

@include lg() {}

*/
:root {
  --height-navbar: 80px;
  --height-navbar-sticky: 64px;
  --btn-attention-gap: 4px;
  --btn-attention-width: 6px;
}
@media (width >= 48rem) {
  :root {
    --height-navbar: 80px;
    --height-navbar-sticky: 64px;
    --btn-attention-gap: 6px;
    --btn-attention-width: 8px;
  }
}
@media (width >= 80rem) {
  :root {
    --height-navbar: 110px;
    --height-navbar-sticky: 80px;
  }
}

.navbar {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.bg-center-center {
  background-position: center;
}

.bg-left-center {
  background-position: left center;
}

.bg-right-center {
  background-position: right center;
}

h1 em, h2 em, h3 em, h4 em, h5 em, h6 em {
  font-style: normal;
  font-weight: 400;
}

h2::after, .columntitle::after {
  content: "";
  display: block;
  margin-top: 1rem;
  margin-bottom: -1rem;
  height: 4px;
  width: 3em;
  background-color: var(--color-primary);
  transform: skewX(-35deg);
}
h2:only-child::after, .columntitle:only-child::after {
  margin-bottom: 0;
}

.columntitle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.text-img-top {
  position: relative;
  z-index: 10;
  margin-bottom: -3.5rem;
}
@media (width >= 48rem) {
  .text-img-top {
    margin-bottom: -4.5rem;
  }
}
@media (width >= 80rem) {
  .text-img-top {
    margin-bottom: -6rem;
  }
}

.text-img-bottom {
  position: relative;
  z-index: 20;
}

.quote h5 {
  text-transform: none;
}
.quote p {
  color: var(--color-secondary);
}
.quote p::before, .quote p::after {
  content: "";
  display: inline-block;
  height: 3px;
  width: 3rem;
  margin: 0 0.5rem;
  background-color: var(--color-secondary);
  transform: translateY(-150%);
}

.btn-primary.attention {
  display: flex;
  align-items: stretch;
  gap: var(--btn-attention-gap);
  background-color: transparent;
  padding: 0;
}
.btn-primary.attention .before, .btn-primary.attention .after {
  display: block;
  align-self: stretch;
  width: var(--btn-attention-width);
  background-color: var(--color-primary);
  transform: skew(-35deg);
  transition: 0.3s all ease-out;
}
.btn-primary.attention .content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding-inline: 1.5rem;
  padding-block: 0.375rem;
  color: white;
  position: relative;
}
.btn-primary.attention .content::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-primary);
  transform: skew(-35deg);
  transition: 0.3s transform ease-out;
}
.btn-primary.attention:hover .content::before {
  background-color: white;
  transform: skew(-25deg);
}
.btn-primary.attention:hover .content {
  color: var(--color-secondary);
}
.btn-primary.attention:hover .before, .btn-primary.attention:hover .after {
  background-color: white;
  transform: skew(-25deg);
}

span.attention {
  --btn-attention-gap: 8px;
  --btn-attention-width: 15px;
  --attention-content-padding-inline: 2rem;
  --attention-stripes-width: calc((var(--btn-attention-width) * 3) + (var(--btn-attention-gap) * 2));
  --attention-decoration-offset: calc(var(--attention-content-padding-inline) + var(--btn-attention-gap));
  display: inline-flex;
  align-items: center;
  background-color: transparent;
  padding: 0;
  position: relative;
}
@media (width >= 64rem) {
  span.attention {
    --attention-content-padding-inline: 3rem;
  }
}
@media (width < 40rem) {
  span.attention {
    transform: scale(0.75);
    transform-origin: center;
  }
}
span.attention .before, span.attention .after {
  display: block;
  height: 100%;
  position: absolute;
  top: 0;
  width: var(--btn-attention-width);
  background-color: var(--color-secondary);
  transform: skew(-35deg);
  transition: 0.3s all ease-out;
  z-index: 0;
}
span.attention .before-1 {
  left: calc((var(--attention-decoration-offset) + var(--attention-stripes-width)) * -1);
}
span.attention .before-2 {
  left: calc((var(--attention-decoration-offset) + var(--btn-attention-width) * 2 + var(--btn-attention-gap)) * -1);
}
span.attention .before-3 {
  left: calc((var(--attention-decoration-offset) + var(--btn-attention-width)) * -1);
}
span.attention .after-1 {
  right: calc((var(--attention-decoration-offset) + var(--btn-attention-width)) * -1);
}
span.attention .after-2 {
  right: calc((var(--attention-decoration-offset) + var(--btn-attention-width) * 2 + var(--btn-attention-gap)) * -1);
}
span.attention .after-3 {
  right: calc((var(--attention-decoration-offset) + var(--attention-stripes-width)) * -1);
}
span.attention .content {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.5rem;
  padding-block: 1rem;
  padding-inline: 0;
  color: white;
  position: relative;
  z-index: 1;
}
span.attention .content .text {
  position: relative;
  z-index: 1;
}
span.attention .content::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: calc(var(--attention-content-padding-inline) * -1);
  top: 0;
  width: calc(100% + var(--attention-content-padding-inline) * 2);
  height: 100%;
  background-color: var(--color-secondary);
  transform: skew(-35deg);
  transition: 0.3s transform ease-out;
}

body {
  overflow-x: hidden;
}

body.home .hatch-bottom-footer {
  display: none;
}

.car-overlay {
  --margin: 6rem;
}
.car-overlay .layout-grid {
  position: relative;
  z-index: 60;
}
@media (width >= 48rem) {
  .car-overlay .layout-grid {
    margin-bottom: calc(var(--margin) * -1);
  }
}
.car-overlay .layout-grid .image-text {
  align-items: flex-end;
}
.car-overlay .layout-grid .text-col h4 {
  text-align: center;
}
@media (width >= 48rem) {
  .car-overlay .layout-grid .text-col {
    margin-bottom: calc(var(--margin) * 2);
  }
  .car-overlay .layout-grid .text-col h4 {
    text-align: left;
  }
}
.car-overlay .layout-grid .img-col {
  transform-origin: bottom left;
  transform: scale(1.1) translateY(-10%);
}
@media (width >= 48rem) {
  .car-overlay .layout-grid .img-col {
    transform: scale(1.3) translateX(-20%) translateY(-30%);
  }
}
@media (width >= 80rem) {
  .car-overlay .layout-grid .img-col {
    transform: scale(1.3) translateX(-10%) translateY(-10%);
  }
}
.car-overlay .hatch-bottom {
  margin-top: 0;
  background-color: var(--color-primary);
}
.car-overlay .hatch-bottom .schraffur__pattern {
  --schraffur-color: var(--color-secondary) !important;
}

.swiper-container {
  --offsetY: 80px;
}
.swiper-container .swiper-slide-prev, .swiper-container .swiper-slide-next {
  filter: blur(4px);
  transition-property: all;
}
.swiper-container .swiper-slide-active {
  filter: blur(0);
}
.swiper-container .swiper-slide .card {
  transform: translateY(0);
  transition: transform 0.4s ease-out;
}
.swiper-container .swiper-slide-active .card {
  transform: translateY(var(--offsetY));
}
.swiper-container .nav-wrapper {
  margin-top: var(--offsetY);
}
.swiper-container.swiper-is-resetting .card {
  transition: none;
}