@import url("../fonts/mbed.css");
@import url("typo.css");
@import url("input.css");
@import url("elements.css");
@import url("maps.css");
@import url("cntnrs.css");
@import url("oxgn.css");
@import url("header.css");
@import url("nav.css");
@import url("popup.css");
@import url("woo.css");
@import url("charts.css");
@import url("slider.css");
@import url("menu.css");
@import url("individual.css");
@import url("chat.css");
@import url("osm.css");
@import url("lp-fluestermatte.css");

:root {

  /*== FONT-SIZES ==*/

  --font-size__smallest: clamp(0.33rem, 0.33rem + ((1vw - 0.2rem) * 0.667), 0.65rem);
  --font-size__x-small: clamp(0.5rem, 0.5rem + ((1vw - 0.2rem) * 0.667), 0.55rem);
  --font-size__small: clamp(0.6rem, 0.6rem + ((1vw - 0.2rem) * 0.667), 0.85rem);
  --font-size__small-reg:  clamp(0.8rem, 0.8rem + ((1vw - 0.2rem) * 0.767), 1rem);
  --font-size__regular: clamp(1rem, 1rem + ((1vw - 0.2rem) * 0.767), 1.2rem);
  --font-size__medium: clamp(1rem, 1rem + ((1vw - 0.2rem) * 0.667), 1.75rem);
  --font-size__medium-large: clamp(1.375rem, 1.375rem + ((1vw - 0.2rem) * 0.767), 2rem);
  --font-size__large: clamp(2rem, 2rem + ((100vw - 400px) * 0.04), 3.0rem);
  --font-size__x-large: clamp(2.5rem, 2.5rem + ((100vw - 400px) * 0.04), 5rem);

  /* == FONT WEIGHTS == */

  --font-weight__light: 300;
  --font-weight__regular: 400;
  --font-weight__bold: 600;
  --font-weight__black: 900;

  --grid-inner-small: 5px 20px 5px 20px;
  --border-width-keyvisual: clamp(1.25rem, 0.182rem + 3.568vw, 3.75rem);

  /* == PAGE SIZE == */

  --pagesize__large: 1800px;
  --pagesize__medium: 1200px;

  /* == RADII == */

  --radius-medium: 24px;

  /*== GRIDS ==*/

  --grid__large: clamp(2.5rem, -1.071rem + 11.429vw, 7.5rem);
  --grid__medium: clamp(1.25rem, -1.429rem + 8.571vw, 5rem);
  --grid__small: clamp(0.625rem, -0.714rem + 4.286vw, 2.5rem);
  --grid__x-small: clamp(0.625rem, 0.179rem + 1.429vw, 1.25rem);

  /* == COLORS == */

  --brand-color-main: #bc0c27;
  --brand-color-main-subtile: #bc0c2733;
  --brand-color-sec: #434343;
  --brand-color-thrd: #E8E8E8FF;
  --main-dark: #434343;
  --main-darkest: #212121;
  --main-medium: #efefef;
  --main-lightest: #fbfbfb;
  --main-light: #f0f0f0;
  --main-dark-subtile: #43434343;
  --main-light-subtile: #ffffff43;
  --main-dark-grad:linear-gradient(30deg,var(--main-dark) 0%,var(--main-dark-trans) 100%);
  --main-light-grad:linear-gradient(30deg,var(--main-light) 0%,var(--main-light-trans) 100%);
  --color-accept: rgb(116, 187, 87);
  --color-accept-subtile: #85AB4444;
  --color-decline: #C45D2D;

}

html {
    background-image: 
      linear-gradient(var(--bckgrnd-overlay-dark), var(--bckgrnd-overlay-dark)),
      url("/wp-content/uploads/2025/12/composyst_CONTENT__WEB_0036.png");
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    /*background-blend-mode: overlay;*/
    scroll-behavior: smooth;
  }

body.oxygen {
  width: 100vw;
  text-rendering: geometricPrecision;
  /*background: transparent;*/
}

.main {
  width: 100vw;
  background: transparent;
}