/**
 * LICENSE
 *
 * This software and its source code is protected by copyright law (Sec. 69a ff. UrhG).
 * It is not allowed to make any kinds of modifications, nor must it be copied,
 * or published without explicit permission. Misuse will lead to persecution.
 *
 * @copyright  2023 infomax websolutions GmbH
 * @link       https://www.infomax-online.de
 * @author     Benjamin Hofmann <hofmann@infomax-it.de>
 * @since      2023-09-28
 */

/*  =========================================================
basic config
button
pageHeader - general structure setup
pageHeader - hht
pageHeader - ship bow
pageHeader - logo
abstract selector - background
========================================================== */

/*  =========================================================
basic config
========================================================= */
@import url("./fonts/Gotham/fonts.css");
@import url("./fonts/Icomoon/style.css");

/*  =========================================================
button
========================================================= */
@media (min-width: 700.1px) {
  .button.button-cta {
    padding: 14px 20px;
  }

  .button.button-default {
    padding: 10px 15px;
  }
}

@media (max-width: 700px) {
  .button.button-cta {
    padding: 12px 15px;
  }

  .button.button-default {
    padding: 10px;
  }
}

/*  =========================================================
pageHeader - general structure setup
========================================================= */
.pageHeader {
  background-color: rgb(var(--color_page_header_background));
  box-shadow: 0 6px 10px 0 rgba(var(--color_black), 0.05);
  gap: clamp(15px, calc(93vw / 19.2), 93px);

  .pageHeader__icon {
    position: relative;
    z-index: 0;
  }
}

@media (min-width: 700.1px) {
  .pageHeader__icon {
    flex: max(227px, calc((2 * 100% / 12) - clamp(15px, calc(93vw / 19.2), 93px))) 0 0;
  }
}

@media (max-width: 700px) {
  .pageHeader__icon {
    flex: 147px 0 1;
  }
}

/*  =========================================================
pageHeader - fwtm
========================================================= */
.pageHeader {
  .pageHeader__icon::before {
    aspect-ratio: 100/33.8;
    background-image: url("/assets/fwtm/logo/logo.fwtm.svg");
    background-repeat: no-repeat;
    content: "";
    position: absolute;
    top: 50%;
  }
}

@media (min-width: 700.1px) {
  .pageHeader__icon::before {
    background-size: contain;
    left: 100px;
    transform: translateY(calc(-50% + 2px));
    width: min(calc(calc(100% * 145) / 227), 145px);
  }
}

@media (max-width: 700px) {
  .pageHeader__icon::before {
    background-size: contain;
    left: calc(100% / 12);
    transform: translateY(calc(-50% + 4px));
    width: min(calc(calc(100% * 112.4) / 147), 112.4px);
  }
}

/*  =========================================================
pageHeader - logo
========================================================= */
.pageHeader {
  .pageHeader__logo__image {
    background-image: url("/assets/fwtm/logo/logo.imxplatform.black.svg");
  }
}

/*  =========================================================
abstract selector - background
========================================================= */
.app--color {
  background-color: rgba(var(--color_global_background));
}