/* =========================
   Roboto Font Einbindung
   ========================= */

/* Black (900) */
@font-face {
  font-family: 'Roboto';
  src: url('/font/Roboto-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* Bold (700) */
@font-face {
  font-family: 'Roboto';
  src: url('/font/Roboto-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Medium (500) */
@font-face {
  font-family: 'Roboto';
  src: url('/font/Roboto-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Regular (400) */
@font-face {
  font-family: 'Roboto';
  src: url('/font/Roboto-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Light (300) */
@font-face {
  font-family: 'Roboto';
  src: url('/font/Roboto-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}


/* =========================
   Globale Nutzung
   ========================= */

body {
  font-family: 'Roboto', Arial, sans-serif;
  font-weight: 400;
}


/* =========================
   Hilfsklassen
   ========================= */

.roboto-light   { font-weight: 300; }
.roboto-regular { font-weight: 400; }
.roboto-medium  { font-weight: 500; }
.roboto-bold    { font-weight: 700; }
.roboto-black   { font-weight: 900; }


/* =========================
   Beispiel Nutzung
   ========================= */

h1, h2, h3 {
  font-weight: 700;
}

strong {
  font-weight: 700;
}

small {
  font-weight: 300;
}