/* Dezente Goldakzente verbinden Logo, Wagen und das Bordeaux-Farbkonzept. */
:root {
  --gold: #c6a34f;
  --gold-soft: #f1d47c;
  --gold-ink: #846025;
  --gold-line: #d6b25966;
}

.brand-dot,
.wine-dot,
.step-number,
.hero-note .icon,
.about-values .icon,
.quote-band .icon,
.round-seal .seal-glass {
  color: var(--gold-ink);
}

.small-line,
.faq-plus::before,
.faq-plus::after {
  background: var(--gold-ink);
}

.ribbon-star,
.button:not(.button-secondary) > .icon,
.contact-note .icon {
  color: var(--gold-soft);
}

.header-inner,
.footer-top,
.circle-arrow,
.round-seal {
  border-color: var(--gold-line);
}

.underline-link,
.occasion-footnote a,
.legal-home-link {
  border-bottom-color: var(--gold);
}

.contact-copy h2 em {
  color: var(--gold-soft);
}

.contact-direct a {
  border-bottom-color: #d3b57480;
}

.legal-callout {
  border-left-color: var(--gold);
}

/* Schwarzer Kopfbereich mit dem goldenen Band des Ausschankwagens. */
.site-header {
  background: #000;
  color: var(--paper);
  border-bottom: 5px solid var(--gold);
}

.site-header .header-inner {
  border-bottom: 0;
}

.site-header .brand {
  color: var(--gold-soft);
}

.site-header .brand-dot,
.site-header .main-nav > a:not(.button):hover,
.site-header .legal-header-nav a:hover,
.site-header .legal-header-nav a[aria-current="page"] {
  color: var(--gold-soft);
}

.site-header .button {
  border-color: var(--gold);
}

.site-header a:focus-visible,
.site-header button:focus-visible {
  outline-color: var(--gold-soft);
}

.site-header .menu-toggle {
  border-color: var(--gold-line);
}

.site-header .menu-toggle span {
  background: var(--gold-soft);
}

.site-footer {
  background: #000;
  color: var(--paper);
  border-top: 5px solid var(--gold);
}

.site-footer .brand,
.site-footer .brand-dot,
.site-footer .back-top:hover,
.site-footer .inline-button:hover {
  color: var(--gold-soft);
}

.site-footer .footer-top > p {
  color: #e3dac7;
}

.site-footer .footer-bottom {
  color: #b9b1a0;
}

.site-footer a:focus-visible,
.site-footer button:focus-visible {
  outline-color: var(--gold-soft);
}

@media (max-width: 820px) {
  .site-header .main-nav {
    top: calc(100% + 5px);
    background: #000;
    border-color: var(--gold-line);
    box-shadow: 0 15px 25px #00000026;
  }
}

@media (max-width: 620px) {
  .site-header {
    border-bottom-width: 4px;
  }

  .site-footer {
    border-top-width: 4px;
  }

  .site-header .main-nav {
    top: calc(100% + 4px);
  }
}