/*
---------------------------------------------
custom typograpgy - v 2.1.0
---------------------------------------------
 */
@import url("../../../../_Fonts/barlow/barlow.css");


:root{
    --fontSize: 1.4vw;
    --fsS: 1.5;
    --fsM: 1;
    --fsL: 0.8;

    --zab: 0.4vw;
    --fontScaler: 0.3vw;

    --fontSizeDesktopS: calc(var(--fontSize) * var(--fsS));
    --fontSizeDesktop: var(--fontSize);
    --fontSizeDesktopL: calc(var(--fontSize) * var(--fsL));

    /* --- Font-Size Large Desktop ---*/
    --fsL-H1: calc(var(--fontSizeDesktopL) + (var(--fontScaler) * 5));
    --fsL-H2: calc(var(--fontSizeDesktopL) + (var(--fontScaler) * 4));
    --fsL-H3: calc(var(--fontSizeDesktopL) + (var(--fontScaler) * 3));
    --fsL-H4: calc(var(--fontSizeDesktopL) + (var(--fontScaler) * 2));
    --fsL-H5: calc(var(--fontSizeDesktopL) + (var(--fontScaler) * 3));
    --fsL-H6: var(--fontSizeDesktopL);
    --fsL-P: var(--fontSizeDesktopL);

    --fsL-H1-zab: calc(var(--fsL-H1) + var(--zab));
    --fsL-H2-zab: calc(var(--fsL-H2) + var(--zab));
    --fsL-H3-zab: calc(var(--fsL-H3) + var(--zab));
    --fsL-H4-zab: calc(var(--fsL-H4) + var(--zab));
    --fsL-H5-zab: calc(var(--fsL-H5) + var(--zab));
    --fsL-H6-zab: calc(var(--fsL-H6) + var(--zab));
    --fsL-P-zab: calc(var(--fsL-P) + var(--zab));

    /* --- Font-Size Standard Desktop -> 1025px - 1440px ---*/
    --fsM-H1: calc(var(--fontSizeDesktop) + (var(--fontScaler) * 5));
    --fsM-H2: calc(var(--fontSizeDesktop) + (var(--fontScaler) * 4));
    --fsM-H3: calc(var(--fontSizeDesktop) + (var(--fontScaler) * 3));
    --fsM-H4: calc(var(--fontSizeDesktop) + (var(--fontScaler) * 2));
    --fsM-H5: calc(var(--fontSizeDesktop) + (var(--fontScaler) * 3));
    --fsM-H6: var(--fontSizeDesktop);
    --fsM-P: var(--fontSizeDesktop);

    --fsM-H1-zab: calc(var(--fsM-H1) + var(--zab));
    --fsM-H2-zab: calc(var(--fsM-H2) + var(--zab));
    --fsM-H3-zab: calc(var(--fsM-H3) + var(--zab));
    --fsM-H4-zab: calc(var(--fsM-H4) + var(--zab));
    --fsM-H5-zab: calc(var(--fsM-H5) + var(--zab));
    --fsM-H6-zab: calc(var(--fsM-H6) + var(--zab));
    --fsM-P-zab: calc(var(--fsM-P) + var(--zab));

    /* --- Font-Size Small Desktop ---*/
    --fsS-H1: calc(var(--fontSizeDesktopS) + (var(--fontScaler) * 5));
    --fsS-H2: calc(var(--fontSizeDesktopS) + (var(--fontScaler) * 4));
    --fsS-H3: calc(var(--fontSizeDesktopS) + (var(--fontScaler) * 3));
    --fsS-H4: calc(var(--fontSizeDesktopS) + (var(--fontScaler) * 2));
    --fsS-H5: calc(var(--fontSizeDesktopS) + (var(--fontScaler) * 3));
    --fsS-H6: var(--fontSizeDesktopS);
    --fsS-P: var(--fontSizeDesktopS);

    --fsS-H1-zab: calc(var(--fsS-H1) + var(--zab));
    --fsS-H2-zab: calc(var(--fsS-H2) + var(--zab));
    --fsS-H3-zab: calc(var(--fsS-H3) + var(--zab));
    --fsS-H4-zab: calc(var(--fsS-H4) + var(--zab));
    --fsS-H5-zab: calc(var(--fsS-H5) + var(--zab));
    --fsS-H6-zab: calc(var(--fsS-H6) + var(--zab));
    --fsS-P-zab: calc(var(--fsS-P) + var(--zab));

}


body, textarea, label, input {
    font-family: 'Barlow', sans-serif;
}

#breadcrumb-nav li,
footer li,
#rwform li,
.language-navi li,
nav li,
.news-prev a,
.news-back a,
.news-next a {
    list-style-type: none;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6{
    padding: 0 0 10px 0;
    font-family: 'Barlow', sans-serif;
    font-weight: 500;
}

h5, .h5{
    padding: 0 0 10px 0;
    font-family: 'Barlow', sans-serif;
    font-weight: 300;
}

.btn {
    font-family: 'Barlow', sans-serif !important;
}

/* Formular Datenschutztext */

.text-content ul{
    margin: 0 0 0 20px;
}

.text-content ul li:last-child{
    margin: 0 0 10px 0;
}

.text-content p{
    padding: 0 0 5px 0;
}

.box-content ul,
.teaser-content ul,
.box-content ol{
    margin: 0 0 0 40px;
}
.text-content ul,
.text-content p{
    float: left;
}

input[type=text]{
    color: #333;
    font-weight: 500 !important;
}

input[type="checkbox"] {
    margin: 0 3px 0 0 !important;
}

.box-content ul li,
.box-content ol li,
.text-content ul li{
    margin: 5px 0;
    list-style-position: outside;
}


header .box-content p{
    padding: 0;
}

a {
    text-decoration: none;
}

nav li,
#nav > ul > li > a,
#nav li ul a{
    font-size: 16px;
}

/* -------------------  Standard Type Size  ---------------------*/
.big-button,
.lead-button,
.info-button-big,
.info-button-big-hback,
.lead-button-big,
.lead-button-big-hback,
a.button, a.button-1,
.button-file,
.ts-skin tbody td,
.ts-skin thead th,
.news .content-box-1 p,
footer h2 {
    font-size: 18px;
}

/* ------------------- 12 px Type Size ---------------------*/
footer label,
.teaser-category-flag,
.teaser-date-flag,
.teaser-box-1 .teaser-content,
.teaser-box-2 .teaser-content,
.teaser-box-3 .teaser-content,
.teaser-box-4 .teaser-content,
.teaser-box-6 .teaser-content,
.news-prev a,
.news-back a,
.news-next a,
.ts-skin tbody td .lead-button-big,
.header-navi ul li a,
#breadcrumb-nav li a {
    font-size: 14px;
    line-height: 16px;
}

/* -------------------  Uppercase  ---------------------*/

.big-button,
    /*.info-button-big,*/
    /*.lead-button-big,*/
a.button, a.button-1,
.button-file,
    /*nav li a,*/
.teaser-category-flag,
.ts-skin thead th {
    text-transform: uppercase;
}

/* -------------------  Font Weight 700  ---------------------*/
.big-button,
.info-button-big,
.info-button-big-hback,
.lead-button-big,
.lead-button-big-hback,
a.button, a.button-1,
.button-file,
#nav ul li,
.ts-skin thead th,
b, strong, .box-content a{
    font-weight: 700;
}

/* --------------  smartphone ---------------------------------------------------- */
@media screen and (min-width: 0px) and (max-width: 720px) {
    h1, .h1 {
        font-size: 34px;
        line-height: 36px;
    }

    h2, .h2 {
        font-size: 30px;
        line-height: 32px;
    }

    h3, .h3, .contact {
        font-size: 26px;
        line-height: 28px;
    }

    h4, .h4 {
        font-size: 23px;
        line-height: 25px;
    }

    h5, .h5 {
        font-size: 21px;
        line-height: 22px;
    }

    h6, .h6 {
        font-size: 18px;
        line-height: 20px;
        font-weight: 700;
    }

    .kliste-headline{
        width: 80%;
    }

    .kliste-headline h6{
        font-size: 16px;
        line-height: 18px;
        font-weight: 500;
    }

    .box-content p,
    .teaser-content p,
    .news-text-wrap p,
    .box-content li {
        font-size: 18px;
        line-height: 22px;
    }

    .box-content p,
    .teaser-content p,
    .news-text-wrap p{
        padding: 0 0 15px 0;
    }

    .teaser-content h5,
    .teaser-content h6{
        font-size: 18px;
        line-height: 19px;
        font-weight: 500;
    }

    a{
        overflow-wrap: break-word;
        word-wrap: break-word;
    }

}



/* --------------  Tablet landscape  ---------------------------------------------------- */
@media screen and (min-width: 721px) and (max-width: 1024px) {

    h1, .h1 {
        font-size: var(--fsS-H1);
        line-height: var(--fsS-H1-zab);
    }

    h2, .h2 {
        font-size: var(--fsS-H2);
        line-height: var(--fsS-H2-zab);
    }

    h3, .h3, .contact  {
        font-size: var(--fsS-H3);
        line-height: var(--fsS-H3-zab);
    }

    h4, .h4 {
        font-size: var(--fsS-H4);
        line-height: var(--fsS-H4-zab);
    }

    h5, .h5, .teaser-content h5 {
        font-size: var(--fsS-H5);
        line-height: var(--fsS-H5-zab);

    }

    h6, .h6, .teaser-content h6 {
        font-size: var(--fsS-H6);
        line-height: var(--fsS-H6-zab);
        font-weight: bold;
    }

    .box-content p,
    .box-content li,
    .teaser-content p,
    .news-text-wrap p{
        font-size: var(--fsS-P);
        line-height: var(--fsS-P-zab);
    }

    nav li,
    #nav > ul > li > a,
    #nav li ul a{
        font-size: 1.6vw;
        font-weight: 500;
    }


    .teaser-content h5,
    .teaser-content h6{
        font-size: 16px;
        line-height: 18px;
        font-weight: 500;
    }
}

/* --------------  small-Size Desktop  ---------------------------------------------------- */
@media screen and (min-width: 1025px) and (max-width: 1440px) {

    h1, .h1 {
        font-size: var(--fsM-H1);
        line-height: var(--fsM-H1-zab);
    }

    h2, .h2 {
        font-size: var(--fsM-H2);
        line-height: var(--fsM-H2-zab);
    }

    h3, .h3, .contact  {
        font-size: var(--fsM-H3);
        line-height: var(--fsM-H3-zab);
    }

    h4, .h4 {
        font-size: var(--fsM-H4);
        line-height: var(--fsM-H4-zab);
    }

    h5, .h5, .teaser-content h5 {
        font-size: var(--fsM-H5);
        line-height: var(--fsM-H5-zab);

    }

    h6, .h6, .teaser-content h6 {
        font-size: var(--fsM-H6);
        line-height: var(--fsM-H6-zab);
        font-weight: bold;
    }

    .box-content p,
    .box-content li,
    .teaser-content p,
    .news-text-wrap p{
        font-size: var(--fsM-P);
        line-height: var(--fsM-P-zab);
    }

    nav li,
    #nav > ul > li > a,
    #nav li ul a{
        font-size: 1.2vw;
        font-weight: 500;
    }


    /*   .box-content p,
       .box-content li,
       .news-text-wrap p{
           font-size: 18px;
           line-height: 22px;
       }

       .teaser-content h5,
       .teaser-content h6{
           font-size: 18px;
           line-height: 19px;
           font-weight: 500;
       }

       .teaser-content p{
           font-size: 16px;
           line-height: 18px;
           font-weight: 400;
       }*/

}

/* --------------  Mid-Size Desktop  ----------------------------------------------------  */
@media screen and (min-width: 1441px) and (max-width: 1920px) {
    /*Mid-Size Desktop*/


    h1, .h1 {
        font-size: var(--fsL-H1);
        line-height: var(--fsL-H1-zab);
    }

    h2, .h2 {
        font-size: var(--fsL-H2);
        line-height: var(--fsL-H2-zab);
    }

    h3, .h3, .contact  {
        font-size: var(--fsL-H3);
        line-height: var(--fsL-H3-zab);
    }

    h4, .h4 {
        font-size: var(--fsL-H4);
        line-height: var(--fsL-H4-zab);
    }

    h5, .h5, .teaser-content h5 {
        font-size: var(--fsL-H5);
        line-height: var(--fsL-H5-zab);

    }

    h6, .h6, .teaser-content h6 {
        font-size: var(--fsL-H6);
        line-height: var(--fsL-H6-zab);
        font-weight: bold;
    }

    .box-content p,
    .box-content li,
    .teaser-content p,
    .news-text-wrap p{
        font-size: var(--fsL-P);
        line-height: var(--fsL-P-zab);
    }

    nav li,
    #nav > ul > li > a,
    #nav li ul a{
        font-size: 1.1vw;
        font-weight: 500;
    }


    /* .box-content p,
     .box-content li,
     .teaser-content p,
     .news-text-wrap p{
         font-size: 18px;
         line-height: 22px;
     }

     .teaser-content h5,
     .teaser-content h6{
         font-size: 20px;
         line-height: 22px;
         font-weight: 500;
     }*/
}

/* --------------  big-Size Desktop  ---------------------------------------------------- */

@media screen and (min-width: 1921px) and (max-width: 5200px) {

    h1, .h1 {
        font-size: var(--fsL-H1);
        line-height: var(--fsL-H1-zab);
    }

    h2, .h2 {
        font-size: var(--fsL-H2);
        line-height: var(--fsL-H2-zab);
    }

    h3, .h3, .contact  {
        font-size: var(--fsL-H3);
        line-height: var(--fsL-H3-zab);
    }

    h4, .h4 {
        font-size: var(--fsL-H4);
        line-height: var(--fsL-H4-zab);
    }

    h5, .h5, .teaser-content h5 {
        font-size: var(--fsL-H5);
        line-height: var(--fsL-H5-zab);

    }

    h6, .h6, .teaser-content h6 {
        font-size: var(--fsL-H6);
        line-height: var(--fsL-H6-zab);
        font-weight: bold;
    }

    .box-content p,
    .box-content li,
    .teaser-content p,
    .news-text-wrap p{
        font-size: var(--fsL-P);
        line-height: var(--fsL-P-zab);
    }

    nav li,
    #nav > ul > li > a,
    #nav li ul a{
        font-size: 1.1vw;
        font-weight: 500;
    }


    /*.box-content p,
    .box-content li,
    .teaser-content p,
    .news-text-wrap p{
        font-size: 18px;
        line-height: 22px;
    }*/
}

/* --------------  Desktop General  ---------------------------------------------------- */
@media screen and (min-width: 1025px) and (max-width: 5200px) {

    /*  h1, h2 {
          letter-spacing: -1px;
      }

      h3, h4 {
          letter-spacing: -0.5px;
      }

      h1, .h1 {
          font-size: 48px;
          line-height: inherit;
      }

      h2, .h2, h1 .h2 {
          font-size: 38px;
          line-height: inherit;
      }

      h1 .h2 {
          font-size: 38px;
          line-height: inherit;
          display: inline-block;
      }

      h3, .h3, .contact  {
          font-size: 34px;
          line-height: 36px;
      }

      h4, .h4 {
          font-size: 30px;
          line-height: 32px;
      }

      h5, .h5 {
          font-size: 22px;
          line-height: 26px;
      }

      h6, .h6 {
          font-size: 20px;
          line-height: 24px;
      }

      .box-content p,
      .box-content li,
      .teaser-content p,
      .content-box-1 label{
          font-size: 20px;
          line-height: 24px;
          font-weight: 400;
          padding: 0 0 15px 0;
      }*/

    footer h1, footer h2 {
        letter-spacing: -1px;
    }

    footer h3, footer h4 {
        letter-spacing: -0.5px;
    }

    footer h1, footer .h1 {
        font-size: 36px;
        line-height: 38px;
    }

    footer h2, footer .h2 {
        font-size: 32px;
        line-height: 44px;
    }

    footer h3, footer .h3, .contact  {
        font-size: 28px;
        line-height: 30px;
    }

    footer h4, footer .h4 {
        font-size: 24px;
        line-height: 26px;
    }

    footer h5, footer .h5 {
        font-size: 18px;
        line-height: 22px;
    }

    footer h6, footer .h6 {
        font-size: 16px;
        line-height: 20px;
    }

    footer .box-content p,
    footer .box-content li,
    footer .teaser-content p,
    footer .content-box-1 label{
        font-size: 16px;
        line-height: 20px;
        font-weight: 400;
        padding: 0 0 15px 0;
    }
}


.box-content p,
.box-content li,
.teaser-content p,
.news-text-wrap p{
    padding: 0 0 15px 0;
}