/*
================================================================================
  WERBEAUF – CHILD THEME STYLES
================================================================================
  Theme Name:     WERBEAUF
  Theme URI:      https://www.werbeauf.com
  Description:    Werbeauf Child Theme
  Template:       Divi
  Author:         Ronald
  Author URI:     https://www.werbeauf.com
================================================================================
*/


@media (min-width:981px) {

    body.admin-bar #desktopHeader.sticky-active {
        top: 32px !important;
    }

    /* Basiszustand des Sticky-Headers */
    #desktopHeader.sticky-active {
        position: fixed !important;
        top: 0;
        left: 50%;
        transform: translateX(-50%) translateY(-20px);
        width: 95% !important;
        max-width: 1200px !important;

        background: rgba(241, 241, 241, 0.6);
        backdrop-filter: blur(14px);

        padding: 20px 0 !important;
        opacity: 0;

        z-index: 999999;
        pointer-events: none;

        transition:
            opacity .35s ease,
            transform .45s cubic-bezier(.25, .1, .25, 1),
            padding .35s ease,
            background .45s ease,
            backdrop-filter .45s ease;
    }

    /* Sticky aktiv beim Scroll */
    #desktopHeader.sticky-active.is-sticky {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
        pointer-events: auto;
    }

    /* Menülink Animationen */
    #desktopHeader.sticky-active .desktop-menu-wrap ul li a {
        transition: font-size .35s ease, opacity .35s ease, transform .35s ease;
    }

    /* Sticky → Menülinks verkleinern */
    #desktopHeader.sticky-active.is-sticky .desktop-menu-wrap ul li a {
        font-size: 14px !important;
    }

    /* Logo Transition */
    #desktopHeader .menu-logo img {
        transition: width .35s ease, height .35s ease, transform .35s ease;
    }

    /* Sticky → Logo verkleinern */
    #desktopHeader.sticky-active.is-sticky .menu-logo img {
        height: 30px !important;
        width: auto !important;
    }
}

  .global-mobile-menu .mobile_nav.opened .et_mobile_menu {
    opacity: 1;
    transform: translateY(0);
  }

  .global-mobile-menu .et_mobile_menu {
    margin: 0 auto !important;
    left: 0 !important;
    right: 0 !important;
  }*/
}
@media (min-width:981px) {

  *,
  *::before,
  *::after {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
  }

  .desktop-menu-wrapper,
  .desktop-menu-wrap ul li a {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .home .desktop-menu-wrapper {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
    height: auto !important;
  }

  .desktop-menu-wrapper {
    display: flex !important;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 0 auto;
  }

  .desktop-menu-wrap {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr;
    align-items: center !important;
    width: 100%;
    box-sizing: border-box;
  }

  .desktop-menu-item {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 0 1.5rem;
    padding-bottom: 7px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 430px;
  }

  .desktop-menu-item::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: #000;
  }

  .desktop-menu-wrap ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }

  .desktop-menu-wrap ul li,
  .desktop-menu-wrap ul li a {
    font-family: "Cormorant Unicase", serif !important;
    text-transform: uppercase !important;
    color: #000 !important;
    font-size: 16px !important;
    line-height: 1.2em !important;
    font-weight: 400 !important;
    display: flex;
    align-items: center;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
  }

  .desktop-menu-wrap ul li a:hover {
    color: #d05916 !important;
  }

  .desktop-menu-wrap ul li a:active {
    color: #d05916 !important;
    opacity: 1 !important;
  }

  .menu-logo {
    display: flex !important;
    justify-content: center;
    align-items: center;
    margin: 0 2rem;
  }

  .menu-logo a {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .menu-logo img {
    width: 100px !important;
    height: auto !important;
    max-width: none !important;
    display: block !important;
  }

  .desktop-menu-wrap li a {
    transition: color .28s cubic-bezier(.25, .1, .25, 1),
                opacity .28s cubic-bezier(.25, .1, .25, 1),
                transform .28s cubic-bezier(.25, .1, .25, 1);
  }

  .desktop-menu-wrap li a:hover {
    color: #d05916 !important;
    opacity: .8;
    transform: scale(1.04);
  }
}

@media (min-width:981px) {

  body.admin-bar #desktopHeaderSticky.sticky-active {
      top: 32px !important;
  }

  #desktopHeaderSticky.sticky-active {
      position: fixed !important;
      top: 0;
      left: 50%;
      transform: translateX(-50%) translateY(-20px);
      width: 95% !important;
      max-width: 1200px !important;

      background: rgba(241, 241, 241, 0.6);
      backdrop-filter: blur(14px);

      padding: 20px 0 !important;
      opacity: 0;

      z-index: 999999;
      pointer-events: none;

      transition:
          opacity .35s ease,
          transform .45s cubic-bezier(.25, .1, .25, 1),
          padding .35s ease,
          background .45s ease,
          backdrop-filter .45s ease;
  }

  #desktopHeaderSticky.sticky-active.is-sticky {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
      pointer-events: auto;
  }

  /* Menülinks Animation */
  #desktopHeaderSticky.sticky-active .desktop-menu-wrap ul li a {
      transition: font-size .35s ease, opacity .35s ease, transform .35s ease;
  }

  #desktopHeaderSticky.sticky-active.is-sticky .desktop-menu-wrap ul li a {
      font-size: 14px !important;
  }

  /* Logo Animation */
  #desktopHeaderSticky .menu-logo img {
      transition: width .35s ease, height .35s ease, transform .35s ease;
  }

  #desktopHeaderSticky.sticky-active .menu-logo img {
      height: 30px !important;
      width: auto !important;
  }
}

@media (min-width:981px) {
  .home .hero-mainpage-customs .et_pb_header_content_wrapper {
    width: 45%;
    margin-left: auto;
    margin-right: 0;
    transform-origin: top right
  }

  .home .hero-mainpage-customs .et_pb_header_content_wrapper p {
    text-align: left !important
  }

  .home .hero-mainpage-customs .et_pb_button_one {
    margin-left: 210px !important
  }

  .home .main-menu-row {
    height: 260px !important;
    min-height: 260px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important
  }
}

@font-face {
  font-family: 'MyCustomIcons';
  src: url('/wp-content/themes/Divi-child/fonts/ElegantIcons.eot');
  src: url('/wp-content/themes/Divi-child/fonts/ElegantIcons.eot?#iefix') format('embedded-opentype'),
    url('/wp-content/themes/Divi-child/fonts/ElegantIcons.woff') format('woff'),
    url('/wp-content/themes/Divi-child/fonts/ElegantIcons.ttf') format('truetype'),
    url('/wp-content/themes/Divi-child/fonts/ElegantIcons.svg#ElegantIcons') format('svg');
  font-weight: normal;
  font-style: normal
}

.et_pb_button,
.et_pb_module .et_pb_button,
.et_pb_header_button_wrapper .et_pb_button {
  all: unset !important;
  display: inline-block !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  font-family: 'Forum', serif !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  font-size: 17px !important;
  line-height: 1.2em !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-decoration: none !important;
  color: #D05916 !important;
  border: 1px solid #D05916 !important;
  background: transparent !important;
  border-radius: 0 !important;
  position: relative !important;
  padding: .5em 2.8em .5em 1.3em !important;
  transition: background .3s, color .3s !important
}

.et_pb_button:hover,
.et_pb_module .et_pb_button:hover,
.et_pb_header_button_wrapper .et_pb_button:hover {
  padding: .5em 2.8em .5em 1.3em !important;
  background: rgba(208, 89, 22, .5) !important;
  color: #fff !important;
  border: 1px solid #D05916 !important
}

.et_pb_button::after,
.et_pb_module .et_pb_button::after,
.et_pb_header_button_wrapper .et_pb_button::after {
  content: "\50" !important;
  font-family: 'MyCustomIcons', 'ETmodules', sans-serif !important;
  font-weight: 400 !important;
  display: inline-block !important;
  position: absolute !important;
  right: .8em !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 17px !important;
  color: inherit !important
}

.et_pb_button:hover::after {
  color: #fff !important
}

.et_pb_button:active,
.et_pb_module .et_pb_button:active,
.et_pb_header_button_wrapper .et_pb_button:active {
  background-color: #D05916 !important
}

.et_pb_button::before,
.et_pb_module .et_pb_button::before {
  display: none !important
}

.et_pb_button.et_pb_button_white,
.et_pb_module .et_pb_button.et_pb_button_white,
.et_pb_header_button_wrapper .et_pb_button.et_pb_button_white {
  background: rgba(255, 255, 255, .1) !important;
  border-color: #fff !important;
  color: #fff !important
}

.et_pb_button.et_pb_button_white:hover,
.et_pb_module .et_pb_button.et_pb_button_white:hover,
.et_pb_header_button_wrapper .et_pb_button.et_pb_button_white:hover {
  background: rgba(255, 255, 255, .2) !important;
  color: #fff !important;
  border-color: #fff !important
}

@media (max-width:980px) {

  .et_pb_button,
  .et_pb_module .et_pb_button,
  .et_pb_header_button_wrapper .et_pb_button {
    font-size: 16px !important;
    padding: .5em 2.5em .5em 1.1em !important
  }

  .et_pb_button:hover,
  .et_pb_module .et_pb_button:hover,
  .et_pb_header_button_wrapper .et_pb_button:hover {
    padding: .5em 2.5em .5em 1.1em !important
  }

  .et_pb_button::after,
  .et_pb_module .et_pb_button::after,
  .et_pb_header_button_wrapper .et_pb_button::after {
    right: .6em !important
  }
}

@media (max-width:767px) {

  .et_pb_button,
  .et_pb_module .et_pb_button,
  .et_pb_header_button_wrapper .et_pb_button {
    font-size: 15px !important;
    padding: .45em 2.2em .45em .9em !important
  }

  .et_pb_button:hover,
  .et_pb_module .et_pb_button:hover,
  .et_pb_header_button_wrapper .et_pb_button:hover {
    padding: .45em 2.2em .45em .9em !important
  }

  .et_pb_button::after,
  .et_pb_module .et_pb_button::after,
  .et_pb_header_button_wrapper .et_pb_button::after {
    right: .5em !important
  }
}

h2.ellipse {
  font-family: "Cormorant Unicase", serif;
  text-transform: uppercase;
  color: #1a1a1a;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 35px 50px;
  border: 1px solid #d05e29;
  border-radius: 50%/50%;
  background: transparent;
  box-sizing: border-box;
  text-align: center;
  font-size: 34px
}

@media (max-width:980px) {
  h2.ellipse {
    font-size: 30px;
    padding: 30px 43px
  }
}

@media (max-width:767px) {
  h2.ellipse {
    font-size: 28px;
    padding: 26px 37px
  }
}

.legal-menu {
  width: 100%;
  text-align: center
}

.legal-menu ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex !important
}

.legal-menu li+li::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 16px;
  background: rgba(95, 120, 140, .35);
  margin: 0 14px;
  vertical-align: middle;
  transform: translateY(1px)
}

.legal-menu a {
  font-family: "Cormorant Unicase", serif;
  font-weight: 400 !important;
  font-size: 16px !important;
  text-transform: uppercase;
  text-decoration: none;
  color: #1a1a1a;
  transition: opacity .25s ease;
  display: inline-block;
  padding: 4px 0 0
}

.legal-menu a:hover {
  opacity: 1;
  color: #d05916
}

.legal-menu a.active {
  color: #d05916 !important;
  opacity: 1 !important
}

@media (max-width:980px) {
  .legal-menu a {
    font-size: 15px !important
  }
}

@media (max-width:767px) {
  .legal-menu {
    text-align: center
  }

  .legal-menu a {
    font-size: 14px !important
  }
}

@media (max-width:300px) {
  .legal-menu ul {
    flex-direction: column !important;
    gap: 10px !important
  }

  .legal-menu li+li::before {
    display: none !important
  }
}

.footer-copyright-info {
  font-family: "Forum", serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.2 !important
}

@media (max-width:980px) {
  .footer-copyright-info {
    font-size: 15px
  }
}

@media (max-width:767px) {
  .footer-copyright-info {
    font-size: 14px;
    margin-left: auto;
    margin-right: auto;
    text-align: center !important
  }
}