/* ____________________________________ @Font-Face ____________________________________ */
@font-face {
font-family: 'GrotaSansAltRd-SemiBold';
font-style: normal;
font-weight: 600;
font-display: auto;
src: 	local('GrotaSansAltRd-SemiBold'),
      	url('../fonts/grota_sans_alt_rd_bold/grota_sans_alt_rd_bold.otf') format('opentype');
  		unicode-range: U+000-5FF; 
}

@font-face {
font-family: 'GrotaSansAltRd-Light';
font-style: normal;
font-weight: 300;
font-display: auto;
src: 	local('GrotaSansAltRd-Light'),
      	url('../fonts/grota_sans_alt_rd_light/grota_sans_alt_rd_light.otf') format('opentype');
  		unicode-range: U+000-5FF; 
}

@font-face {
font-family: 'TT Autonomous ExtraLight';
font-style: normal;
font-weight: 200;
font-display: auto;
src: 	local('TT Autonomous ExtraLight'),
      	url('../fonts/tt_autonomous_light/tt_autonomous_light.ttf') format('truetype');
  		unicode-range: U+000-5FF; 
}

/* ____________________________________ Schriftart ____________________________________ */
.gro_bol{
font-family: var(--font_gro_bol);
}

.gro_lig{
font-family: var(--font_gro_lig);
}

.tta_lig{
font-family: var(--font_tta_lig);
}

/* ____________________________________ Schriftgröße EM ____________________________________ */
body{
font-size: 22px;
}

.fs_1_5{
font-size: 1.5em;
}

.fs_1{
font-size: 1em;
}

.fs_0_8{
font-size: 0.8em;
}

/* ____________________________________ Schriftgröße VW ____________________________________ */
.fs_15_vw{
font-size: 15vw;
}

.fs_9_vw{
font-size: 9vw;
}


.fs_4_4_vw{
font-size: 4.4vw;
}

/* ____________________________________ Buchstabenabstand ____________________________________ */
.ls_1{
letter-spacing: 1em;
}

/* ____________________________________ Zeilenabstand ____________________________________ */
.lh150{
line-height: 150%;
}

.lh120{
line-height: 120%;
}

.lh100{
line-height: 100%;
}

/* ____________________________________ Schriftfarbe ____________________________________ */
.yellow{
color: var(--color_yellow);
}

.white{
color: var(--color_white);
}

.black{
color: var(--color_black);
}

.ci{
color: inherit;
}

/* ____________________________________ BG Color ____________________________________ */
.bg_yellow{
background-color: var(--color_yellow);
}

.bg_white{
background-color: var(--color_white);
}

.bg_black{
background-color: var(--color_black);
}

.bg_black_gra_tt{
background: var(--color_black_gra_tt);
}

.bg_black_gra_tb{
background: var(--color_black_gra_tb);
}

/* ____________________________________ Button ____________________________________ */
.button{
padding: 2vh 4vh;
border-radius: 3vh;
}

.button.black{
border: 2px solid var(--color_black);
}

.button.white{
border: 2px solid var(--color_white);
}

.button.yellow{
border: 2px solid var(--color_yellow);
}

.button.white:hover, .button.bg_black:hover{
color:var(--color_black);
background-color: var(--color_white);
}

.button.yellow:hover{
color: var(--color_black);
background-color: var(--color_yellow);
}

/* ____________________________________ Form ____________________________________ */
::-moz-placeholder{
opacity: 1;
}

.form input[type=text], .form input[type=email], .form textarea{
width: 100%;
border-bottom: 1px solid var(--color_black);
padding: 1vh 0px;
margin-top:1vh;
}

.form textarea{
resize: none;
height: 15vh;
}

/* ____________________________________ Extras ____________________________________ */
.ta_center{
text-align: center;
}

.ta_right{
text-align: right;
}

.tt_up{
text-transform: uppercase;
}

.td_ul{
text-decoration: underline;
}

.cu_po{
cursor: pointer;
}

.wb{
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}