@charset "utf-8";
/* CSS Document dynamic-duo webdesign/-publishing */
/* Zentrale Variablen für Farben und Schriften
- 2. Position eingebunden. Zuerst kommet Bootstrap Custom Farben usw, damit die hier die Variablen gefüllt werden können */

:root{
--font-main       : 'Lato', Helvetica, Arial, sans-serif;
--font-size-main  : 1.0rem;
--font-weight-main: 300;
--line-height-main: 1.5rem;

--text-w  : #f8f9fa;
--text-s  : #495057;
  
--link-main       : var(--farbe-6);
--link-main-hover : var(--farbe-2);
--link-main-active: var(--farbe-2);
--link-main-focus : var(--farbe-2);
	
--h1-font-family  : 'Lato', Helvetica, Arial, sans-serif;
--h1-font-size    : 1.5rem;
--h1-font-weight  : 300;
--h1-line-height  : 2.4rem;
--h1-color        : #495057;
--h1-margin       : 0.3rem;
  
--maxBreite       : 1199px
}
body {
    margin: 0;
    font-family: var(--font-main);
    font-size:   var(--font-size-main);
    font-weight: var(--font-weight-main);
    line-height: var(--line-height-main);
    color: var(--text-s);
    background-color: var(--farbe-6);
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    hyphens: auto;
}
.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6 {
   font-family:var(--h1-font-family);
   font-weight:var(--h1-font-weight);
   line-height:var(--h1-line-height);
   margin-top:var(--h1-margin);
   margin-bottom:var(--h1-margin);
   text-align:center;
   hyphens: auto;
    /*color: var(--h1-color);
    nicht eingesetzt, da Farbwechsel in den Sektionen*/
}
.h1,h1,
.h2,h2{
   font-size:var(--h1-font-size);
    /*color: var(--h1-color);
    nicht eingesetzt, da Farbwechsel in den Sektionen*/
}
.h3,h3 {
   font-size: calc(var(--h1-font-size) - 0.3rem);
    /*color: var(--h1-color);
    nicht eingesetzt, da Farbwechsel in den Sektionen*/
}
h4, .h4{
  font-size: calc(var(--h1-font-size) - 0.4rem);
  color:var(--farbe-1);
}
.h5,h5 {
  font-size: calc(var(--h1-font-size) - 0.5rem);
  color:var(--farbe-1);
}
.h6,h6 {
  font-size: calc(var(--h1-font-size) - 0.6rem);
  line-height:calc(var(--h1-line-height) - 0.4rem);
  text-align:left;
  color:var(--farbe-2);
}
.headline{
  font-size: calc(var(--h1-font-size) + 0.5rem);
  margin-top:calc(var(--h1-margin) + 2.0rem);
  margin-bottom:calc(var(--h1-margin) + 2.0rem);
  text-align:left;
  color:var(--farbe-6);
}
img{
  max-width:100%!important;
}
/* Brackpoints festlegen Standard https://getbootstrap.com/docs/5.0/layout/breakpoints/ */
/* X-Small devices (portrait phones, less than 576px)
 No media query for `xs` since this is the default in Bootstrap */

/* Small devices (landscape phones, 576px and up) 
@media (min-width: 567px) and (max-width: 767.98px) {}
*/
/* Medium devices (tablets, 768px and up) 
@media (min-width: 768px) and (max-width: 991.98px) {}
*/
/* Large devices (desktops, 992px and up) 
@media (min-width: 992px) and (max-width: 1199.98px) {}
*/
/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
body{
  font-size:calc(var(--font-size-main) + 0.2rem);
}
.h1,h1,
.h2,h2{
   font-size:calc(var(--h1-font-size) + 1.0rem);
   line-height:calc(var(--h1-line-height) + 0.4rem);
   text-align:left;
}
.h3,h3 {
   font-size: calc(var(--h1-font-size) + 0.1rem);
   text-align:left;
}
.h4,h4 {
   font-size: calc(var(--h1-font-size) + 0.4rem);
   text-align:left;
}
.h5,h5 {
   font-size: calc(var(--h1-font-size) + 0.3rem);
   text-align:left;
   /*line-height  : calc(2.5rem - .3vw);*/
}
.h6,h6 {
  font-size: calc(var(--h1-font-size) + 0.2rem);
  line-height:calc(var(--h1-line-height) + 0.1rem);
}
.headline{
  font-size: calc(var(--h1-font-size) + 3.0rem);
  margin-top:calc(var(--h1-margin) + 2.0rem);
  margin-bottom:calc(var(--h1-margin) + 2.0rem);
}
}
/* XX-Large devices (larger desktops, 1400px and up) 
@media (min-width: 1400px) {}
*/

a, a:hover, a:focus, a:active {
    color: var(--link-main);
    text-decoration: none;
  }
a:hover {
    color: var(--link-main-hover);
  }
.fa{
  color:var(--farbe-6)
}