@charset "UTF-8";
:root {
  --hao-primary-color: #f7a855;
  --hao-main-hero-font-color: #1b1b1b;
  --hao-light-text-color: #E9E9E9;
  --hao-dark-bg-color: #444444;
  --hao-dark-text-color: #1b1b1b;
  --hao-light-bg-color: #f0f0f0;
  --hao-navbar-item-link-hover-color: var(--hao-primary-color);
  --hao-navbar-burger-hover-background-color: rgba(247, 168, 85, 0.67); }

/*
    Kleiner Exkurs:
    
    '#' zum Adressieren von 'id'
    '.' zum Adressieren von 'class'

    '.hero.is-main-hero .has-shadow' heisst, dass die 'has-shadow' class nur 
    innerhalb einer parent class gültig ist, die 'hero' UND 'is-main-hero' gesetzt hat.
*/
.hao-navbar a.navbar-item:hover,
.hao-navbar a.navbar-item:focus {
  color: var(--hao-primary-color);
  background-color: inherit;
  text-decoration: none; }

.hao-navbar {
  border-bottom: 1px solid #ebeaeb; }

.hao-navbar .navbar-item,
.hao-navbar .navbar-link {
  color: var(--hao-dark-text-color);
  font-size: 16px; }

.hao-navbar .hao-burger:hover {
  background-color: var(--hao-navbar-burger-hover-background-color); }

.hao-navbar .hao-burger {
  color: var(--hao-navbar-burger-color); }

.navbar-link:not(.is-arrowless)::after {
  border-color: var(-hao-dark-text-color); }

.hero.is-main-hero {
  background-color: var(--hao-primary-color);
  color: var(--hao-main-hero-font-color); }

.is-main-hero .subtitle {
  color: var(--hao-main-hero-font-color);
  font-size: 20px;
  line-height: 30px; }

.hero.is-main-hero img {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  border-radius: 4px; }

section.vst-compatible-info {
  background-color: var(--hao-dark-bg-color);
  color: var(--hao-light-text-color); }

section.features {
  background-color: var(--hao-light-bg-color);
  color: var(hao-dark-text-color); }

section.legal-information {
  background-color: var(--hao-light-bg-color); }

section.demo-song {
  background-image: url("/assets/demo-song/hardware-render-dark-bd45cbcfd7b447d396b1a61e9eea669a.jpg");
  background-size: cover; }

.footer {
  background-color: var(--hao-dark-bg-color);
  color: var(--hao-light-text-color);
  font-size: 16px;
  line-height: 22px; }

.footer strong {
  color: var(--hao-light-text-color);
  display: block;
  font-weight: 600;
  margin-bottom: 12px; }

.footer a {
  color: var(--hao-light-text-color); }

.footer a:hover {
  text-decoration: underline; }