/*sizes nav*/

body {
  --burger-line-height: clamp(2px, 0.11rem + 0.06vw, 3px);
  --nav-icon-height: clamp(14px, 0.568rem + 0.78vw, 24px);
  --nav-icon-width: clamp(32px, 5vw, 44px);
  --nav-icon-padding-X: 2.4vw;
  --nav-icon-padding-Y: calc(
    var(--nav-bar-pad) + (var(--height-logo-wappen) / 2)
  );
  --heigt-icon: 25px;
  --height-logo-wappen: clamp(60px, 15vw, 78px);
  --height-logo-txt: clamp(28px, 4.2vw, 38px);
  --gap-logo: 13px;
  --nav-bar-pad: 24px;
  --trans-dur: 0.8s;
}

/*sizes,pad,marg*/

:root {
  --h1-font-size: min(
    calc(20px + (33 - 20) * ((100vw - 375px) / (1720 - 375))),
    35px
  );
  --h2-font-size: min(
    calc(18px + (20 - 18) * ((100vw - 375px) / (1720 - 375))),
    20px
  );
  --h3-font-size: min(
    calc(16px + (23 - 16) * ((100vw - 375px) / (1720 - 375))),
    27px
  );
  /* wie H1 */
  --h4-font-size: min(
    calc(15px + (18 - 15) * ((100vw - 375px) / (1720 - 375))),
    30px
  );
  --h5-font-size: min(
    calc(15px + (16 - 15) * ((100vw - 375px) / (1720 - 375))),
    16px
  );
  --h6-font-size: 15px;
  /* bleibt gleich */
  --btn-font-size: min(
    calc(14px + (16 - 14) * ((100vw - 375px) / (1720 - 375))),
    16px
  );
  /* gleiche Größe wie H5 */
  --base-font-size: min(
    calc(14px + (17 - 14) * ((100vw - 375px) / (1720 - 375))),
    17px
  );
  --base-font-size-small: min(
    calc(14px + (15 - 14) * ((100vw - 375px) / (1720 - 375))),
    15px
  );
  --base-font-size-large: min(
    calc(19px + (19 - 18) * ((100vw - 375px) / (1720 - 375))),
    19px
  );
  /* Fließtext */
  --btn-small-font-size: min(
    calc(14px + (15 - 14) * ((100vw - 375px) / (1720 - 375))),
    15px
  );
  /* bleibt gleich */

  /**spacing*/
  --gap-s: min(calc(10px + (15 - 10) * ((100vw - 375px) / (1720 - 375))), 10px);
  --gap-m: min(calc(15px + (30 - 15) * ((100vw - 375px) / (1720 - 375))), 30px);
  --gap-l: min(calc(30px + (50 - 30) * ((100vw - 375px) / (1720 - 375))), 50px);
  --gap-xl: min(
    calc(50px + (80 - 50) * ((100vw - 375px) / (1720 - 375))),
    80px
  );
  --gap-2xl: min(
    calc(80px + (150 - 80) * ((100vw - 375px) / (1720 - 375))),
    150px
  );
  --cont-gap: min(
    calc(100px + (250 - 100) * ((100vw - 375px) / (1720 - 375))),
    250px
  );
}

/* Border Color */

/* :root {
    --ast-border-color : #dddddd;
} */
:root {
  --ast-border-color: #a31717 !important;
}

/*fonts*/

:root {
  --mainfont: "Avenir Light";
  --headlinefont: "Daubenton";
}

/*VC*/

@media (min-width: 1720px) {
  /*----------------- ELEMENT -------------*/
  /*----------------- END ELEMENT ---------*/
}

@media (max-width: 1500px) {
  :root {
    --polaroid-gap: 6vw;
  }
}

@media (max-width: 1200px) {
  /*----------------- ELEMENT -------------*/
  /*----------------- END ELEMENT ---------*/
}

@media (max-width: 1024px) {
  :root {
    --polaroid-gap: 8vw;
  }
}

@media (max-width: 990px) {
  /*----------------- ELEMENT -------------*/
  /*----------------- END ELEMENT ---------*/
}

@media (max-width: 768px) {
  /*----------------- ELEMENT -------------*/
  /*----------------- END ELEMENT ---------*/
}

@media (max-width: 576px) {
}

@media (max-width: 420px) {
  /*----------------- ELEMENT -------------*/
  /*----------------- END ELEMENT ---------*/
}

@media (max-width: 320px) {
  /*----------------- ELEMENT -------------*/
  /*----------------- END ELEMENT ---------*/
}
