.font-standard-settings {
  font-family: ${font.standard.font-family};
  font-size: ${font.standard.font-size};
  font-weight: ${font.standard.font-weight};
  font-style: ${font.standard.font-style};
}
.font-h1-settings {
  font-size: ${font.h1.font-size};
  font-family: ${font.h1.font-family};
  font-weight: ${font.h1.font-weight};
  font-style: ${font.h1.font-style};
}
.font-h2-settings {
  font-size: ${font.h2.font-size};
  font-family: ${font.h2.font-family};
  font-weight: ${font.h2.font-weight};
  font-style: ${font.h2.font-style};
}
.font-h3-settings {
  font-size: ${font.h3.font-size};
  font-family: ${font.h3.font-family};
  font-weight: ${font.h3.font-weight};
  font-style: ${font.h3.font-style};
}
.font-title-settings {
  font-family: ${font.title.font-family};
  font-size: ${font.title.font-size};
  font-weight: ${font.title.font-weight};
  font-style: ${font.title.font-style};
}
.font-navigation-settings {
  font-size: ${font.navigation.font-size};
  font-family: ${font.navigation.font-family};
  font-weight: ${font.navigation.font-weight};
  font-style: ${font.navigation.font-style};
}
body {
  background-color: ${color.content.background-color};
  font-family: ${font.standard.font-family};
  font-size: ${font.standard.font-size};
  font-weight: ${font.standard.font-weight};
  font-style: ${font.standard.font-style};
}
#content_main,
#content_sidebar {
  font-family: ${font.standard.font-family};
  font-size: ${font.standard.font-size};
  font-weight: ${font.standard.font-weight};
  font-style: ${font.standard.font-style};
  color: ${color.content.color};
}
#title,
#subtitle,
#title_separator_normal,
#page_wrapper h1,
#page_wrapper h2,
#page_wrapper h3,
#page_wrapper h4,
#page_wrapper h5,
#page_wrapper h6 {
  color: ${color.header.title.color};
}
#title {
  font-family: ${font.title.font-family};
  font-size: ${font.title.font-size};
  font-weight: ${font.title.font-weight};
  font-style: ${font.title.font-style};
}
#page_wrapper h1,
.cm-h1 {
  font-size: ${font.h1.font-size};
  font-family: ${font.h1.font-family};
  font-weight: ${font.h1.font-weight};
  font-style: ${font.h1.font-style};
}
#page_wrapper h2,
#content_sidebar h2,
#subtitle {
  font-size: ${font.h2.font-size};
  font-family: ${font.h2.font-family};
  font-weight: ${font.h2.font-weight};
  font-style: ${font.h2.font-style};
}
#page_wrapper h3 {
  font-size: ${font.h3.font-size};
  font-family: ${font.h3.font-family};
  font-weight: ${font.h3.font-weight};
  font-style: ${font.h3.font-style};
}
/* ################################################## */
/* ################ INPUT ELEMENTS ################## */
/* ################################################## */
.cm_widget input[type='text'],
.cm_widget input[type='date'],
.cm_widget input[type='datetime'],
.cm_widget input[type='email'],
.cm_widget input[type='number'],
.cm_widget input[type='password'],
.cm_widget input[type='search'],
.cm_widget input[type='tel'],
.cm_widget input[type='time'],
.cm_widget input[type='url'],
.cm_widget textarea,
.cm_widget select,
.cm_widget button,
.cm_widget input[type='button'],
.cm_widget input[type='submit'],
.cm_widget input[type='reset'] {
  border: none;
  border: 1px solid rgba(${color.content.color.red},${color.content.color.green},${color.content.color.blue},0.45);
  border: 1px solid rgba(${color.content.color.rgb},0.45);
  color: ${color.content.color};
  border-radius: 2px;
  padding: 11px 12px;
  background-color: rgba(${color.content.color.red},${color.content.color.green},${color.content.color.blue},0.03);
  background-color: rgba(${color.content.color.rgb},0.03);
  transition: border 0.3s, box-shadow 0.3s;
  font-family: ${font.standard.font-family};
  font-size: ${font.standard.font-size};
  font-weight: ${font.standard.font-weight};
  font-style: ${font.standard.font-style};
}
.cm_widget input[type='text']:hover,
.cm_widget input[type='date']:hover,
.cm_widget input[type='datetime']:hover,
.cm_widget input[type='email']:hover,
.cm_widget input[type='number']:hover,
.cm_widget input[type='password']:hover,
.cm_widget input[type='search']:hover,
.cm_widget input[type='tel']:hover,
.cm_widget input[type='time']:hover,
.cm_widget input[type='url']:hover,
.cm_widget textarea:hover,
.cm_widget select:hover,
.cm_widget button:hover,
.cm_widget input[type='button']:hover,
.cm_widget input[type='submit']:hover,
.cm_widget input[type='reset']:hover {
  border: 1px solid rgba(${color.content.color.red},${color.content.color.green},${color.content.color.blue},0.8);
  border: 1px solid rgba(${color.content.color.rgb},0.8);
}
.cm_widget input[type='text']:focus,
.cm_widget input[type='date']:focus,
.cm_widget input[type='datetime']:focus,
.cm_widget input[type='email']:focus,
.cm_widget input[type='number']:focus,
.cm_widget input[type='password']:focus,
.cm_widget input[type='search']:focus,
.cm_widget input[type='tel']:focus,
.cm_widget input[type='time']:focus,
.cm_widget input[type='url']:focus,
.cm_widget textarea:focus,
.cm_widget select:focus,
.cm_widget button:focus,
.cm_widget input[type='button']:focus,
.cm_widget input[type='submit']:focus,
.cm_widget input[type='reset']:focus {
  outline: none;
  border: 1px solid ${color.content.color};
  box-shadow: 0 0 6px rgba(${color.content.color.red},${color.content.color.green},${color.content.color.blue},0.4);
  box-shadow: 0 0 6px rgba(${color.content.color.rgb},0.4);
}
.cm_widget button,
.cm_widget input[type='button'],
.cm_widget input[type='submit'],
.cm_widget input[type='reset'] {
  background-color: rgba(${color.content.color.red},${color.content.color.green},${color.content.color.blue},0.08);
  background-color: rgba(${color.content.color.rgb},0.08);
  border: 1px solid rgba(${color.content.color.red},${color.content.color.green},${color.content.color.blue},0.35);
  border: 1px solid rgba(${color.content.color.rgb},0.35);
  color: ${color.content.color};
  padding: 10px 14px;
  border-radius: 2px;
  box-shadow: 0 3px 3px -2px rgba(${color.content.color.red},${color.content.color.green},${color.content.color.blue},0.5);
  box-shadow: 0 3px 3px -2px rgba(${color.content.color.rgb},0.5);
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.2s, border 0.2s;
}
.cm_widget button:hover,
.cm_widget input[type='button']:hover,
.cm_widget input[type='submit']:hover,
.cm_widget input[type='reset']:hover {
  border: 1px solid rgba(${color.content.color.red},${color.content.color.green},${color.content.color.blue},0.8);
  border: 1px solid rgba(${color.content.color.rgb},0.8);
}
.cm_widget button:focus,
.cm_widget input[type='button']:focus,
.cm_widget input[type='submit']:focus,
.cm_widget input[type='reset']:focus {
  outline: none;
  transform: translateY(2px);
  box-shadow: 0 2px 3px -2px rgba(${color.content.color.red},${color.content.color.green},${color.content.color.blue},0.4);
  box-shadow: 0 2px 3px -2px rgba(${color.content.color.rgb},0.4);
}
/* ========================================================
	3 - Navigation
=========================================================== */
#navigation_background,
#navigation_wrapper {
  background-color: ${color.navigation.background-color};
}
/** 1st Level **/
#nav-mobile-heading a {
  font-size: ${font.navigation.font-size};
  font-family: ${font.navigation.font-family};
  font-weight: ${font.navigation.font-weight};
  font-style: ${font.navigation.font-style};
  color: ${color.navigation.color} !important;
}
#cm_navigation a {
  font-size: ${font.navigation.font-size};
  font-family: ${font.navigation.font-family};
  font-weight: ${font.navigation.font-weight};
  font-style: ${font.navigation.font-style};
}
#page_wrapper #cm_navigation > ul > li {
  background-color: ${color.navigation.background-color};
}
#page_wrapper #cm_navigation > ul > li > a {
  color: ${color.navigation.color};
}
#page_wrapper #cm_navigation > ul > li.cm_current,
#page_wrapper #cm_navigation > ul > li:hover {
  background-color: ${color.navigation.color};
}
#page_wrapper #cm_navigation > ul > li.cm_current > a,
#page_wrapper #cm_navigation ul > li:hover > a,
#page_wrapper #navigation_wrapper #nav-mobile-heading a,
#page_wrapper #navigation_wrapper #nav-mobile-heading a:hover {
  color: ${color.navigation.background-color};
}
/** 2nd Level **/
#page_wrapper #cm_navigation > ul > li > ul > li {
  background-color: ${color.subnavigation.background-color};
}
#page_wrapper #cm_navigation > ul > li > ul > li.cm_current,
#page_wrapper #cm_navigation > ul > li > ul > li:hover {
  background-color: ${color.subnavigation.color};
}
#page_wrapper #cm_navigation > ul > li > ul > li > a {
  color: ${color.subnavigation.color};
}
#page_wrapper #cm_navigation > ul > li > ul > li:hover > a,
#page_wrapper #cm_navigation > ul > li > ul > li.cm_current > a {
  color: ${color.subnavigation.background-color};
}
/** 3rd Level **/
#page_wrapper #cm_navigation > ul > li > ul > li > ul > li {
  background-color: ${color.subnavigation.background-color};
}
#page_wrapper #cm_navigation > ul > li > ul > li > ul > li.cm_current,
#page_wrapper #cm_navigation > ul > li > ul > li > ul > li:hover {
  background-color: ${color.subnavigation.color};
}
#page_wrapper #cm_navigation > ul > li > ul > li > ul > li > a {
  color: ${color.subnavigation.color};
}
#page_wrapper #cm_navigation > ul > li > ul > li > ul > li:hover > a,
#page_wrapper #cm_navigation > ul > li > ul > li > ul > li.cm_current > a {
  color: ${color.subnavigation.background-color};
}
/* ========================================================
	4 - Title
=========================================================== */
#header_wrapper {
  background-color: ${color.header.background-color};
}
/* ========================================================
	5 - Inhaltsbereich
=========================================================== */
#content_wrapper {
  color: ${color.content.color};
  background-color: ${color.content.background-color};
}
#page_wrapper h1,
.cm-h1,
#page_wrapper h2,
#page_wrapper h3 {
  color: ${color.content.headline.color};
}
#page_wrapper a {
  color: ${color.content.link.color};
  text-decoration: underline;
}
#page_wrapper a:hover {
  color: ${color.content.link.hover.color};
  text-decoration: underline;
}
/* ========================================================
	6 - Sidebar
=========================================================== */
#content_sidebar {
  color: ${color.content.color};
  background-color: ${color.content.background-color};
}
/* ========================================================
	7 - Footer
=========================================================== */
#footer_wrapper {
  color: ${color.footer.color};
  background-color: ${color.footer.background-color};
}
#footer_wrapper a,
#footer_wrapper a:hover {
  color: ${color.footer.color};
  font-family: ${font.h1.font-family};
  font-weight: normal;
}
#footer_wrapper a {
  text-decoration: none;
}
#footer_wrapper a:hover {
  text-decoration: underline;
}