:root{
  --primaryDefaultColor:#F94224;
  --primaryDefaultColorHover:#d3371d;
  --primaryColor:var(--primaryDefaultColor);
  --primaryColorHover:var(--primaryDefaultColorHover);
}
:root .competence{
  --primaryColor:#4DD9FF;
  --primaryColorHover:#3dd5ff;
}
:root .sustainability{
  --primaryColor:#BBCF33;
  --primaryColorHover:#b2c62f;
}
:root .ecosystem{
  --primaryColor:#F1B300;
  --primaryColorHover:#e0a800;
}
:root .products{
  --primaryColor:var(--primaryDefaultColor);
  --primaryColorHover:var(--primaryDefaultColorHover);
}

.tooltip{
  z-index:100;
  min-width:400px;
  padding:0.5em;
  background-color:hsl(0, 0%, 100%);
}
.tooltip__arrow{
  width:8px;
  height:8px;
  -webkit-transform:rotate(45deg);
          transform:rotate(45deg);
  background-color:hsl(0, 0%, 100%);
}
.tooltip__content{
  font-size:0.75em;
  color:hsl(0, 0%, 0%);
}
.tooltip__content-title{
  padding-right:2em;
  padding-bottom:0.75em;
  font-size:0.75em;
}
.tooltip__close-btn{
  cursor:pointer;
  top:-10px;
  right:0;
}
.tooltip--large{
  padding-left:1em;
  padding-right:1em;
  padding-top:1em;
  padding-bottom:1em;
}
.tooltip--large .tooltip__content{
  font-size:0.875em;
}
.tooltip a{
  color:hsl(0, 0%, 100%);
}
.tooltip a svg{
  fill:hsl(0, 0%, 100%);
}
.tooltip a:hover svg{
  fill:hsl(0, 0%, 100%);
}
.tooltip--warning{
  background-color:false;
}
.tooltip--warning .tooltip__content{
  color:hsl(0, 0%, 0%);
}
.tooltip--warning .tooltip__arrow{
  background-color:false;
}
.tooltip--warning .tooltip__close-btn{
  fill:hsl(0, 0%, 0%);
}
.tooltip--warning a{
  color:var(--linkColor);
}
.tooltip--warning a svg{
  fill:var(--linkColor);
}
.tooltip--warning a:hover svg{
  fill:var(--linkColor);
}
.tooltip__overlay{
  position:absolute;
  top:-100vh;
  right:-100vw;
  bottom:-100vh;
  left:-100vw;
  background-color:rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter:blur(4px);
          backdrop-filter:blur(4px);
  z-index:5;
}