/* montserrat-200 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 200;
  src: url('../fonts/montserrat-v25-latin-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/montserrat-v25-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/montserrat-v25-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}



@media print { 
  a[href]:after {
    content: none;
  }
}

*::-moz-selection 											{ background: none repeat scroll 0 0 rgba(49, 66, 83, 1); color: #fff; text-shadow: none; }
*::-webkit-selection										{ background: none repeat scroll 0 0 rgba(49, 66, 83, 1); color: #fff; text-shadow: none; }
*::selection 												{ background: none repeat scroll 0 0 rgba(49, 66, 83, 1); color: #fff; text-shadow: none; }


/* Reset ############################################################################################### */
figure 														{ margin: 0; padding: 0; }
button 														{ margin: 0; padding: 0; }

#wrapper                                                    { overflow-x: hidden; }

/* Allgemeine Farben ############################################################################################### */
:root {
--weiss: #fff;
--grau1: rgba(20,20,20,1);
--grau2: rgba(50,50,50,1);
--grau3: rgba(100,100,100,1);
--grau4: rgba(190,190,190,1);
--grau5: rgba(240,240,240,1);
    
--headline_size1: 2.4rem;
--headline_lineheight1: 2.8rem;

--headline_size2: 2.0rem;
--headline_lineheight2: 2.4rem;

--headline_size3: 1.6rem;
--headline_lineheight3: 1.8rem;

--headline_size4: 1.2rem;
--headline_lineheight4: 1.7rem;
    
--padding_container: 100px 0 100px 0;
--padding_top: 100px;
    
--margin_container: 100px 0 100px 0;
--margin_top: 100px;
    
--font_weight_light: 300;
--font_weight_normal: 400;
--font_weight_bold: 800; 
}


/* Struktur ---------------------------------------------------------- */
html                                                        { overflow-x: hidden; } 
html, body													{ font-family: 'Montserrat'; font-size: 16px; line-height: 24px; font-weight: 400; color: var(--text_farbe) !important; }      
.invisible													{ display: none !important; }


.container-fluid                                            { max-width: 1300px; }

/* Buttons */
.btn {
  border: none;
  display: block;

  cursor: pointer;
  text-transform: uppercase;

  overflow: hidden;
  position: relative;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  background-color: var(--farbe1);
  

  box-shadow: 0 5px 15px rgba(0,0,0,0.20);
}

.btn a,
.btn span {
  position: relative; 
  z-index: 1; color: #fff;
  display: block; padding: 17px 60px;
}
.btn:hover  {
  text-decoration: none;
}

.btn:after {
  content: "";
  position: absolute;
  left: -75px;
  top: 0;
  height: 600%;
  width: 140%;
  background: var(--farbe2);
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
  -webkit-transform: translateX(-98%) translateY(-25%) rotate(45deg);
  transform: translateX(-98%) translateY(-25%) rotate(45deg);
}
button.btn:after {
  left: 0px;
  height: 490%;
}
.btn a:hover {text-decoration: none; }
.btn:hover:after {
  -webkit-transform: translateX(-9%) translateY(-25%) rotate(45deg);
  transform: translateX(-9%) translateY(-25%) rotate(45deg); text-decoration: none;
}

.btn2                                                       { transition: all ease .4s; font-weight: 400; color: var(--farbe1); display: inline-block; border: 0; cursor: pointer; }
.btn2:hover                                                 { transition: all ease .4s; text-decoration: none; }
.btn2 svg                                                   { width: 20px; height: auto; margin-left: 5px; position: relative; top: 2px; }
.btn2 svg .st0                                              { fill:var(--farbe1); }

.btn3                                                       { background-color: var(--farbe1); padding: 5px 10px; border-bottom-right-radius: 15px; transition: all ease .4s; font-weight: 400;
                                                              color: #fff; display: inline-block; margin-bottom: 0; margin-top: 0; }
.btn3:hover                                                 { border-bottom-right-radius: 0; transition: all ease .4s; text-decoration: none; color: #fff; }
.btn3 svg                                                   { width: 15px; height: auto; margin-left: 10px; position: relative; top: 0; }
.btn3 svg .st0                                              { fill:#FFFFFF; }

.bg_weiss                                                   { background-color: var(--weiss); }
.bg_farbe_1                                                 { background-color: var(--farbe1); }
.bg_farbe_2                                                 { background-color: var(--farbe2); }
.bg_farbe_3                                                 { background-color: var(--farbe3); }
.bg_farbe_4                                                 { background-color: var(--farbe4); }
.bg_farbe_5                                                 { background-color: var(--farbe5); }
.bg_grau1                                                   { background-color: var(--grau1); }
.bg_grau2                                                   { background-color: var(--grau2); }
.bg_grau3                                                   { background-color: var(--grau3); }
.bg_grau4                                                   { background-color: var(--grau4); }
.bg_grau5                                                   { background-color: var(--grau5); }

.svg_weiss svg                                                   { fill: var(--weiss); }
.svg_farbe_1 svg                                                 { fill: var(--farbe1); }
.svg_farbe_2 svg                                                 { fill: var(--farbe2); }
.svg_farbe_3 svg                                                 { fill: var(--farbe3); }
.svg_farbe_4 svg                                                 { fill: var(--farbe4); }
.svg_farbe_5  svg                                                { fill: var(--farbe5); }
.svg_grau1 svg                                                   { fill: var(--grau1); }
.svg_grau2 svg                                                   { fill: var(--grau2); }
.svg_grau3 svg                                                   { fill: var(--grau3); }
.svg_grau4 svg                                                   { fill: var(--grau4); }
.svg_grau5 svg                                                   { fill: var(--grau5); }

.fill_weiss                                                    { fill: var(--weiss); }
.fill_farbe_1                                                  { fill: var(--farbe1); }
.fill_farbe_2                                                  { fill: var(--farbe2); }
.fill_farbe_3                                                  { fill: var(--farbe3); }
.fill_farbe_4                                                  { fill: var(--farbe4); }
.fill_farbe_5                                                  { fill: var(--farbe5); }
.fill_grau1                                                    { fill: var(--grau1); }
.fill_grau2                                                    { fill: var(--grau2); }
.fill_grau3                                                    { fill: var(--grau3); }
.fill_grau4                                                    { fill: var(--grau4); }
.fill_grau5                                                    { fill: var(--grau5); }

.stroke_weiss                                                    { stroke: var(--weiss); }
.stroke_farbe_1                                                  { stroke: var(--farbe1); }
.stroke_farbe_2                                                  { stroke: var(--farbe2); }
.stroke_farbe_3                                                  { stroke: var(--farbe3); }
.stroke_farbe_4                                                  { stroke: var(--farbe4); }
.stroke_farbe_5                                                  { stroke: var(--farbe5); }
.stroke_grau1                                                    { stroke: var(--grau1); }
.stroke_grau2                                                    { stroke: var(--grau2); }
.stroke_grau3                                                    { stroke: var(--grau3); }
.stroke_grau4                                                    { stroke: var(--grau4); }
.stroke_grau5                                                    { stroke: var(--grau5); }

.border_weiss                                                    { border-color: var(--weiss); }
.border_farbe_1                                                  { border-color: var(--farbe1); }
.border_farbe_2                                                  { border-color: var(--farbe2); }
.border_farbe_3                                                  { border-color: var(--farbe3); }
.border_farbe_4                                                  { border-color: var(--farbe4); }
.border_farbe_5                                                  { border-color: var(--farbe5); }
.border_grau1                                                    { border-color: var(--grau1); }
.border_grau2                                                    { border-color: var(--grau2); }
.border_grau3                                                    { border-color: var(--grau3); }
.border_grau4                                                    { border-color: var(--grau4); }
.border_grau5                                                    { border-color: var(--grau5); }

.txt_weiss, .txt_weiss a, .hightlight_weiss                      { color: var(--weiss); }
.txt_farbe_1, .txt_farbe_1 a, .hightlight_farbe_1                { color: var(--farbe1); }
.txt_farbe_2, .txt_farbe_2 a, .hightlight_farbe_2                { color: var(--farbe2); }
.txt_farbe_3, .txt_farbe_3 a .hightlight_farbe_3                 { color: var(--farbe3); }
.txt_farbe_4, .txt_farbe_4 a, .hightlight_farbe_4                { color: var(--farbe4); }
.txt_farbe_5, .txt_farbe_5 a, .hightlight_farbe_5                { color: var(--farbe5); }
.txt_grau1, .txt_grau1 a, .hightlight_grau1                      { color: var(--grau1); }
.txt_grau2, .txt_grau2 a, .hightlight_grau2                      { color: var(--grau2); }
.txt_grau3, .txt_grau3 a, .hightlight_grau3                      { color: var(--grau3); }
.txt_grau4, .txt_grau4 a, .hightlight_grau4                      { color: var(--grau4); }
.txt_grau5, .txt_grau5 a, .hightlight_grau5                      { color: var(--grau5); }

.headline_weiss h1, .headline_weiss h2, .headline_weiss h3, .headline_weiss h4, .headline_weiss h5, .headline_weiss h6 { color: var(--weiss); }
.headline_farbe_1 h1, .headline_farbe_1 h2, .headline_farbe_1 h3, .headline_farbe_1 h4, .headline_farbe_1 h5, .headline_farbe_1 h6 { color: var(--farbe1); }
.headline_farbe_2 h1, .headline_farbe_2 h2, .headline_farbe_2 h3, .headline_farbe_2 h4, .headline_farbe_2 h5, .headline_farbe_2 h6 { color: var(--farbe2); }
.headline_farbe_3 h1, .headline_farbe_3 h2, .headline_farbe_3 h3, .headline_farbe_3 h4, .headline_farbe_3 h5, .headline_farbe_3 h6 { color: var(--farbe3); }
.headline_farbe_4 h1, .headline_farbe_4 h2, .headline_farbe_4 h3, .headline_farbe_4 h4, .headline_farbe_4 h5, .headline_farbe_4 h6 { color: var(--farbe4); }
.headline_farbe_5 h1, .headline_farbe_5 h2, .headline_farbe_5 h3, .headline_farbe_5 h4, .headline_farbe_5 h5, .headline_farbe_5 h6 { color: var(--farbe5); }
.headline_grau1 h1, .headline_grau1 h2, .headline_grau1 h3, .headline_grau1 h4, .headline_grau1 h5, .headline_grau1 h6 { color: var(--grau1); }
.headline_grau2 h1, .headline_grau2 h2, .headline_grau2 h3, .headline_grau2 h4, .headline_grau2 h5, .headline_grau2 h6 { color: var(--grau2); }
.headline_grau3 h1, .headline_grau3 h2, .headline_grau3 h3, .headline_grau3 h4, .headline_grau3 h5, .headline_grau3 h6 { color: var(--grau3); }
.headline_grau4 h1, .headline_grau4 h2, .headline_grau4 h3, .headline_grau4 h4, .headline_grau4 h5, .headline_grau4 h6 { color: var(--grau4); }
.headline_grau5 h1, .headline_grau5 h2, .headline_grau5 h3, .headline_grau5 h4, .headline_grau5 h5, .headline_grau5 h6 { color: var(--grau5); }

.btn_farbe_1                                                { background-color: var(--farbe1); }
.btn_farbe_2                                                { background-color: var(--farbe2); } 
.btn_farbe_3                                                { background-color: var(--farbe3); }
.btn_farbe_4                                                { background-color: var(--farbe4); }
.btn_farbe_5                                                { background-color: var(--farbe5); }
.btn_grau1                                                  { background-color: var(--grau1); }
.btn_grau2                                                  { background-color: var(--grau2); }
.btn_grau3                                                  { background-color: var(--grau3); }
.btn_grau4                                                  { background-color: var(--grau4); }
.btn_grau5                                                  { background-color: var(--grau5); color: var(--text_farbe); }
.btn_grau5.btn1 svg .st0                                    { fill:var(--text_farbe); }

.dots_farbe_1 .slick-dots li button                         { background-color: var(--farbe1); }
.dots_farbe_2 .slick-dots li button                         { background-color: var(--farbe2); } 
.dots_farbe_3 .slick-dots li button                         { background-color: var(--farbe3); }
.dots_farbe_4 .slick-dots li button                         { background-color: var(--farbe4); }
.dots_farbe_5 .slick-dots li button                         { background-color: var(--farbe5); }
.dots_grau1 .slick-dots li button                           { background-color: var(--grau1); }
.dots_grau2 .slick-dots li button                           { background-color: var(--grau2); }
.dots_grau3 .slick-dots li button                           { background-color: var(--grau3); }
.dots_grau4 .slick-dots li button                           { background-color: var(--grau4); }
.dots_grau5 .slick-dots li button                           { background-color: var(--grau5); }

.marginTop_50                                               { margin-top: 50px; }
.marginTop_100                                              { margin-top: 100px; }
.marginTop_150                                              { margin-top: 150px; }
.marginTop_200                                              { margin-top: 200px; }


a                                                           { color: #171717; transition: all ease .4s; } 
main .text_wrapper a                                        { text-decoration: underline; }  
main .text_wrapper a:hover                                  { color: inherit; } 

h1, h2, h3, h4, h5, h6				                        { font-weight: 200; }
h1:after, h2:after, h3:after, h4:after, h5:after, h6:after	{ background: var(--farbe1); width: 100px; height: 2px; content: ''; display: block; margin-top: 20px; }



@media (min-width: 1460px) {

}

@media (min-width: 1200px) {

}

@media (min-width: 992px) and  (max-width: 1200px) {

}

@media (min-width: 768px) and  (max-width: 992px) {

}

@media (max-width: 767px) {
html, body								{ font-size: 16px; line-height: 21px; }  

}