/*                                                                                                      */
/* #################################################################################################### */
/* # Datei css/standard.css 3.40                                                 */
/* #################################################################################################### */
/* # Copyright © 05.2024 ISS-Oberlausitz (www.iss-ol.de)                                                   */
/* # Author: T.Hojenski                                                                                 */
/* # Email:  info@iss-ol.de                                                                             */
/* # URL:    http://www.bluepage-cms.com                                                                  */
/* #################################################################################################### */
/*                                                                                                      */
@import url("./layout.css");
@import url("./basis.css"); 
@import url("./addon.css"); 
@import url("./dsgvo.css"); 

:root {
  --main-text-color: #000000;
  --main-txt-size: 20px;
  
  --main-h2-color: #ec680f;
  --main-link-color: #000000;
  --main-link-hover-color: #000000;
  --main-nav-color: #333333;
  --main-nav-hover: #ec680f;
  --main-nav-aktiv: #ec680f;

  --main-bl-color: #037f99;   
  --main-or-color: #ec680f;   
  --main-wrt-color: #b51702;   
  --_main-gn2-color: #747c36;    
  --main-rt-color: #ec680f;	/* #ff0000 */
  --main-ws-color: #ffffff;
  --main-sw-color: #333333;

  --nav1-font-size: 20px;
  --nav2-font-size: 18px;

  --main-font-size: 20px;
  --main-red-size: 18px;
  --main-exp-size: 22px;
  --main-small-size: 16px;
  --main-link-size: 22px;
  --flex-size: 20px; 

  --main-h1-size: 20px;
  --main-titel-size: 28px;
  --main-h2-size: 28px;
  --main-h4-size: 28px;

  --main-btn-color: #ffffff;
  --main-btn-bgcolor: #ec680f; 
  --main-btn-bordercolor: #ec680f;
  --main-btn-hover-color: #ffffff; 
  --main-btn-hover-bgcolor: #b74d06; 
  --main-btn-hover-bordercolor: #b74d06;
  --main-btn-border-radius: 0;

}
@media screen and (max-width: 1690px){
         :root {
      --main-font-size: calc(9px + (20 - 9) * ((100vw - 820px) / (1690 - 820)));
      --main-h1-size: calc(13px + (20 - 13) * ((100vw - 820px) / (1690 - 820)));
      --main-titel-size: calc(18.2px + (28 - 18.2) * ((100vw - 820px) / (1690 - 820)));
      --main-txt-size: calc(15px + (20 - 15) * ((100vw - 820px) / (1690 - 820)));
      --main-red-size: calc(13.5px + (18 - 13.5) * ((100vw - 820px) / (1690 - 820)));
      --flex-size: 0.99em;
      /** /
      --_main-font-size:  clamp(0.75rem, 0.2438rem + 0.9877vw, 1.25rem);
      --_main-txt-size: calc(10px + (20 - 15) * ((100vw - 820px) / (1690 - 820)));
       --_flex-size: calc(10px + (20 - 10) * (100vw - 820px) / (1690 - 820 + 45)); 
      --_flex-size: calc(10px + (20 - 10) * ((100vw - 820px) / (1690 - 820)));
      --_flex-size: calc(clamp(0.75rem, 0.1288rem + 1.2121vw, 1.25rem) / 2);;  
      
      --_flex-size: clamp(0.75rem, 0.2438rem + 0.9877vw, 1.25rem);  
      --_flex-size: 102.424242424;
      x--flex-size: calc((100vw * 1930) / 100)%;
      --_flex-size: calc(10px + (20 - 10) * (100vw - 820px) / (1690 - 820 + 20));
      --_flex-size: calc(1px + (20 - 1) * ((100vw - 820px) / (1690 - 820)));
   	*/
   }                    
}
/*
@media (min-width:400px) and (max-width:800px){
.test {font-size: calc(12px + (24 - 12) * ((100vw - 400px) / (800 - 400)));}
}
*/
@media screen and (max-width: 820px){
            :root {

      --main-font-size: calc(13.5px + (18 - 13.5) * ((100vw - 480px) / (820 - 480)));
      --main-txt-size: calc(13.5px + (18 - 13.5) * ((100vw - 480px) / (820 - 480)));
      --main-red-size: calc(12px + (16 - 12) * ((100vw - 480px) / (820 - 480)));
      --main-titel-size: calc(18.2px + (21 - 18.2) * ((100vw - 480px) / (820 - 480)));

      --flex-size: calc(6px + (20 - 6) * (100vw - 480px) / (1690 - 480 + 20));          
      /*
      --_main-h1-size: calc(8.1px + (13 - 8.1) * ((100vw - 480px) / (820 - 480)));
      --main-red-size: calc(13.5px + (18 - 13.5) * ((100vw - 480px) / (820 - 480)));
      --main-exp-size: calc(16.5px + (22 - 16.5) * ((100vw - 480px) / (820 - 480)));
      --main-small-size: calc(12px + (16 - 12) * ((100vw - 480px) / (820 - 480)));

      --main-titel-size: calc(14px + (28 - 14) * ((100vw - 480px) / (820 - 480)));
      --main-link-size: calc(11px + (18 - 11) * ((100vw - 480px) / (820 - 480)));
      --main-h4-size: calc(21px + (28 - 21) * ((100vw - 480px) / (820 - 480)));
		*/
   }
}
@media screen and (max-width: 480px){
            :root {
      
      --main-font-size:20px;
      --main-h1-size: 10.5px;
      --main-txt-size: calc(13px + (20 - 13) * ((100vw - 320px) / (480 - 320)));
      --main-red-size: calc(13.5px + (18 - 13.5) * ((100vw - 320px) / (480 - 320)));
      --main-titel-size: calc(18.2px + (23.8 - 18.2) * ((100vw - 320px) / (480 - 320)));
/*
      --main-font-size:20px;
      --main-h1-size: 10.5px;
      
      --_main-font-size: calc(15px + (20 - 15) * ((100vw - 320px) / (480 - 320)));
      --main-txt-size: calc(17px + (20 - 17) * ((100vw - 320px) / (480 - 320)));
      --main-red-size: calc(13.5px + (18 - 13.5) * ((100vw - 320px) / (480 - 320)));
      --main-titel-size: calc(18.2px + (23.8 - 18.2) * ((100vw - 320px) / (480 - 320)));
*/
      --flex-size: calc(4px + (20 - 4) * ((100vw - 320px) / (1690 - 320)));     

      /*
      --_nav1-font-size: calc(16px + (20 - 16) * ((100vw - 320px) / (480 - 320)));
      --_nav2-font-size: calc(13px + (15 - 13) * ((100vw - 320px) / (480 - 320)));
		* /
      --main-font-size: calc(15px + (20 - 15) * ((100vw - 320px) / (480 - 320)));
      --main-txt-size: calc(15px + (20 - 15) * ((100vw - 320px) / (480 - 320)));
      --main-red-size: calc(13.5px + (18 - 13.5) * ((100vw - 320px) / (480 - 320)));
      --main-exp-size: calc(16.5px + (22 - 16.5) * ((100vw - 320px) / (480 - 320)));
      --main-small-size: calc(12px + (16 - 12) * ((100vw - 320px) / (480 - 320)));

      --main-h1-size: calc(5.625px + (7.5 - 5.625) * ((100vw - 320px) / (480 - 320)));
      --main-titel-size: calc(21px + (28 - 21) * ((100vw - 320px) / (480 - 320)));
      --main-link-size: calc(16.5px + (22 - 16.5) * ((100vw - 320px) / (480 - 320)));;
      --main-h4-size: calc(21px + (28 - 21) * ((100vw - 320px) / (480 - 320)));

      --flex-size: calc(4px + (20 - 4) * ((100vw - 480px) / (1690 - 480)));          
		*/
   }
}
