@font-face {
  font-family: "Poppins";
  src: url("/content/websites/assets/fonts/Poppins/Poppins-Thin.ttf") format("truetype");
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: "Poppins";
  src: url("/content/websites/assets/fonts/Poppins/Poppins-ThinItalic.ttf") format("truetype");
  font-weight: 100;
  font-style: italic;
}

@font-face {
  font-family: "Poppins";
  src: url("/content/websites/assets/fonts/Poppins/Poppins-ExtraLight.ttf") format("truetype");
  font-weight: 200;
  font-style: normal;
}

@font-face {
  font-family: "Poppins";
  src: url("/content/websites/assets/fonts/Poppins/Poppins-ExtraLightItalic.ttf") format("truetype");
  font-weight: 200;
  font-style: italic;
}

@font-face {
  font-family: "Poppins";
  src: url("/content/websites/assets/fonts/Poppins/Poppins-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "Poppins";
  src: url("/content/websites/assets/fonts/Poppins/Poppins-LightItalic.ttf") format("truetype");
  font-weight: 300;
  font-style: italic;
}

@font-face {
  font-family: "Poppins";
  src: url("/content/websites/assets/fonts/Poppins/Poppins-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Poppins";
  src: url("/content/websites/assets/fonts/Poppins/Poppins-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: "Poppins";
  src: url("/content/websites/assets/fonts/Poppins/Poppins-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "Poppins";
  src: url("/content/websites/assets/fonts/Poppins/Poppins-MediumItalic.ttf") format("truetype");
  font-weight: 500;
  font-style: italic;
}

@font-face {
  font-family: "Poppins";
  src: url("/content/websites/assets/fonts/Poppins/Poppins-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: "Poppins";
  src: url("/content/websites/assets/fonts/Poppins/Poppins-SemiBoldItalic.ttf") format("truetype");
  font-weight: 600;
  font-style: italic;
}

@font-face {
  font-family: "Poppins";
  src: url("/content/websites/assets/fonts/Poppins/Poppins-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Poppins";
  src: url("/content/websites/assets/fonts/Poppins/Poppins-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
}

@font-face {
  font-family: "Poppins";
  src: url("/content/websites/assets/fonts/Poppins/Poppins-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family: "Poppins";
  src: url("/content/websites/assets/fonts/Poppins/Poppins-ExtraBoldItalic.ttf") format("truetype");
  font-weight: 800;
  font-style: italic;
}

@font-face {
  font-family: "Poppins";
  src: url("/content/websites/assets/fonts/Poppins/Poppins-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
}

@font-face {
  font-family: "Poppins";
  src: url("/content/websites/assets/fonts/Poppins/Poppins-BlackItalic.ttf") format("truetype");
  font-weight: 900;
  font-style: italic;
}

/*--------------color_variables----------------*/
:root {
  --color-1: #1c69dd;
  --color-2: #a6ebc5;
  --color-4: #ffffff;
  --color-5: #1d1d1d;
  --color-7: #000000;
  --color-8: #ffffff;
  --color-9: #1d1d1d;
  --color-10: #1d1d1d;
  --color-11: #1d1d1d;
  --color-12: #ffffff;
  --color-13: #020381;
  /* 
  Allgemeine Farben:
  color-1 = Hauptfarbe (Buttons, Icons, wichtige Elemente) 
  color-2 = Nebenfarbe -> (Hintergrundflächen, Stilelemente)
  color-3 = Akzentfarbe (only in some templates with 3 primary used colors needed) -> (Stilelemente, Links)
  color-4 = Hintergrundfarbe (Allgemein)

  Texte:
  color-5 = Textfarbe (Überschriften/Headlines)
  color-6 = Textfarbe (Unterzeilen/Sublines)
  color-7 = Textfarbe (Fließtexte)
  color-8 = Textfarbe (Buttons)

  Navigation:
  color-9 = Navigation (Hintergrundfarbe)
  color-10 = Navigation (Textfarbe)

  Footer:
  color-11 = Footer (Hintergrundfarbe)
  color-12 = Footer (Textfarbe)
  */
  --c-padding: 1rem;
  --grid-gap: 2rem;
  --inner-padding: 1rem;
  --inner-gap: 1rem;
  --header-height: 56px;
  --footer-height: 32px;
  --br: 1rem;
  --br-full: 999vw;
  --transition: 200ms ease-out;
}

@media (min-width: 1024px) {
  :root {
    --c-padding: 1.5rem;
    --inner-padding: 1.5rem;
    --inner-gap: 1.5rem;
  }
}