/*
 Theme Name: Koffermarkt - Divi
 Theme URI: https://www.koffermarkt.com/
 Description: Divi Child Theme für die Webseite des Koffermarktes
 Author: stepbyweb//
 Author URI: https://www.stepbyweb.de
 Template: Divi
 Version: 1.0.0
*/
/* =Theme customization starts here
------------------------------------------------------- */
:root {
  --gray-100: #F2F2F2;
  --primary: #0098d8;
}

.et_pb_section h2 {
  font-size: 1.375rem;
  font-weight: bold;
}

.banner-bg-grey::before {
  position: absolute;
  display: block;
  content: "";
  width: 100vw;
  height: calc(460px + 50vw);
  background: var(--gray-100);
  border-bottom-right-radius: calc(12rem + 25vw);
  translate: -5% -200px;
}

.banner-bg-grey .et_pb_image_wrap img {
  display: blocK;
  max-width: min(600px, 100%);
  margin-left: auto;
}

.footer-bg-grey::before {
  position: absolute;
  bottom: 0;
  left: calc(-5% - 4px);
  right: calc(-5% - 4px);
  display: block;
  content: "";
  width: auto;
  height: 120%;
  background: var(--gray-100);
  border-top-left-radius: 9rem;
  translate: 0 -3rem;
}

/* Link boxes */
.link-boxes .et_pb_blurb_position_left .et_pb_main_blurb_image,
.link-boxes .et_pb_blurb_position_right .et_pb_main_blurb_image {
  width: 80px;
}

.link-boxes .et_pb_blurb_position_left .et_pb_main_blurb_image img,
.link-boxes .et_pb_blurb_position_right .et_pb_main_blurb_image img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  overflow: hidden;
}

/* Info-Texte */
.et_pb_blurb .et_pb_main_blurb_image:has(.et-pb-icon) {
  vertical-align: middle;
}

.et_pb_blurb .et_pb_blurb_container {
  vertical-align: middle;
}

  /* Back to top */
.et_pb_scroll_top.et-pb-icon {
  bottom: 48px;
  right: 32px;
  font-size: 36px;
  background-color: var(--primary);
  color: white;
  border-radius: 50%;
}

/* screen - sm */
@media (min-width: 768px) {
  .et_pb_blurb .et_pb_main_blurb_image:has(.et-pb-icon) {
    padding-right: 0.5rem;
  }

  .footer-bg-grey::before {
    height: 130%;
  }
}

/* screen - md */
@media (min-width: 981px) {
  .banner-bg-grey::before {
    width: 70vw;
    height: 1200px;
    border-bottom-right-radius: 9rem;
    translate: calc(-50% + 20vw) -50%;
  }

  .footer-bg-grey::before {
    content: unset;
  }

  footer:has(.footer-bg-grey) .et_pb_section_0_tb_footer::before {
    position: absolute;
    bottom: -1px;
    right: 0;
    display: block;
    content: "";
    width: 50%;
    height: 135%;
    background: var(--gray-100);
    border-top-left-radius: 9rem;
    /*translate: 0 -3rem;*/
  }
}
/* screen - lg */
@media (min-width: 1200px) {}

/* screen - xl */
@media (min-width: 1400px) {
  .banner-bg-grey::before {
    translate: calc(-50% + 10vw) -50%;
  }
}
/* screen - xxl */
/* screen - xxxl */
@media (min-width: 2000px) {
  .banner-bg-grey::before {
    translate: -50% -50%;
  }
}



/* Utilities */
.round-image img {
  aspect-ratio: 1 !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}

/* Padding */
.pt-0 {
  padding-top: 0 !important;
}

.pb-0 {
  padding-bottom: 0 !important;
}

.py-0 {
  padding-block: 0 !important;
}

.px-0 {
  padding-inline: 0 !important;
}

/* Margin */
.mt-0 {
  margin-top: 0 !important;
}

.mb-0 {
  margin-bottom: 0 !important;
}

.mb-1 {
  margin-bottom: 0.5rem !important;
}

.mb-2 {
  margin-bottom: 0.75rem !important;
}

.mb-3 {
  margin-bottom: 1rem !important;
}

.my-0 {
  margin-block: 0 !important;
}

.mx-0 {
  margin-inline: 0 !important;
}

.mx-auto {
  margin-inline: auto !important;
}