.site-logo {
  fill: var(--text-color);
  width: auto;
  height: 10rem;
}
@media (min-width: 768px) {
  .site-logo {
    height: 5rem;
  }
}
.site-logo .glueck-zu {
  fill: var(--bg-color);
  transform-box: fill-box;
  transform-origin: center;
  z-index: 10000;
}
.site-logo:hover .drop {
  fill: hsl(from var(--bg-color) h s calc(l - 10));
  transition: all 0.3s ease;
}
.site-logo:hover .glueck-zu {
  fill: var(--text-color);
  transition: all 0.3s ease;
}

.site-branding {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: var(--Spacing-06);
}
@media (min-width: 768px) {
  .site-branding {
    flex-direction: row;
    align-items: center;
  }
}
.site-branding .site-name {
  text-underline-offset: 6px;
  text-decoration-thickness: 3px;
}
.site-branding:hover .site-name {
  text-underline-offset: 8px;
}
.site-branding:hover .site-logo .drop {
  fill: hsl(from var(--bg-color) h s calc(l - 10));
  transition: all 0.3s ease;
}
.site-branding:hover .site-logo .glueck-zu {
  fill: var(--text-color);
  transition: all 0.3s ease;
}

/*# sourceMappingURL=site-branding.css.map */