/* ============================================================
   bestAnimalCARE — Design 2026, Teil 3: Kopf- und Fußzeile (chrome.css)
   E6: Mega-Menü bleibt, wird nur angeglichen (Linie, Schrift, Hover, Pillen-Button).
   E5: Fußzeile bleibt Raspberry-Fläche, nur ruhiger. Die Farbe #a81858 selbst kommt
   aus den Tokens in base.css ([data-theme="accent"] und [data-theme="primary"]).
   Struktur im Theme: Topbar (div[data-theme=light]) > header.mega-nav >
   footer.main-footer[data-theme=accent] > Balken div[data-theme=primary].
   ============================================================ */

/* ---------- Topbar ("Ansprechpartner") ruhiger ---------- */
body.bac-design > div[data-theme="light"].display\@md {
  background-color: #eef1f3;
  font-size: 0.8125rem;
  line-height: 1.4;
}
body.bac-design > div[data-theme="light"].display\@md .text-sm { font-size: inherit; }
body.bac-design > div[data-theme="light"].display\@md a {
  color: rgba(46, 54, 64, 0.7);
  text-decoration: none;
  transition: color 200ms ease;
}
body.bac-design > div[data-theme="light"].display\@md a:hover { color: #a81858; }

/* ---------- Kopfzeile ---------- */
body.bac-design .mega-nav {
  background-color: #fff;
  border-bottom: 1px solid var(--bac-line, rgba(46, 54, 64, 0.12));
}

/* Menülabels: Mulish 500 (ohne Versalien), Hover Raspberry statt grauer Fläche */
body.bac-design .mega-nav__control {
  font-family: var(--font-primary);
  font-weight: 500;
}
body.bac-design .mega-nav--desktop .mega-nav__control {
  font-size: 0.9375rem;
  color: #2e3640;
}
body.bac-design .mega-nav--desktop .mega-nav__control:hover,
body.bac-design .mega-nav--desktop .mega-nav__item--expanded .mega-nav__control {
  background-color: transparent;
  color: #a81858;
}
body.bac-design .mega-nav--desktop .mega-nav__control::after { background-color: #a81858; }
body.bac-design .mega-nav--desktop .mega-nav__item--expanded .mega-nav__control::after { height: 2px; }

/* Beschriftungen im Dropdown und im mobilen Menü: ohne Versalien */
body.bac-design .mega-nav__label {
  font-family: var(--font-primary);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(46, 54, 64, 0.65);
}
body.bac-design .mega-nav--desktop .mega-nav__sub-link,
body.bac-design .mega-nav--desktop .mega-nav__quick-link { color: #2e3640; transition: color 200ms ease; }
body.bac-design .mega-nav--desktop .mega-nav__sub-link:hover,
body.bac-design .mega-nav--desktop .mega-nav__quick-link:hover {
  color: #a81858;
  text-decoration: none;
}
body.bac-design .mega-nav--mobile .mega-nav__sub-link:hover,
body.bac-design .mega-nav--mobile .mega-nav__quick-link:hover { color: #a81858; }

/* Dropdown-Fläche: Haarlinie und weicher Schatten statt hartem Schatten */
body.bac-design .mega-nav--desktop .mega-nav__sub-nav-wrapper,
body.bac-design .mega-nav--desktop .mega-nav__search {
  border-top: 1px solid var(--bac-line, rgba(46, 54, 64, 0.12));
  box-shadow: 0 18px 40px -24px rgba(46, 54, 64, 0.35);
}

/* Icons (Suche, Konto, Warenkorb) */
body.bac-design .mega-nav__icon-btn { color: #2e3640; }
body.bac-design .mega-nav--desktop .mega-nav__icon-btn:hover,
body.bac-design .mega-nav--desktop .mega-nav__icon-btn--state-b {
  background-color: #eef1f3;
  color: #a81858;
}

/* Button "Geräte für Praxen" (wird per Skript als li.bac-header-cta-item eingesetzt):
   kleine Raspberry-Pille wie "Demo vereinbaren" auf der Landingpage. Unter 64rem aus. */
body.bac-design .bac-header-cta-item,
body.bac-design .bac-header-cta { display: none; }
@media (min-width: 64rem) {
  body.bac-design .bac-header-cta-item { display: flex; align-items: center; }
  body.bac-design .bac-header-cta {
    display: inline-flex;
    align-items: center;
    margin: 0 0.5rem 0 var(--space-sm, 1rem);
    padding: 0.625rem 1.25rem;
    border-radius: 999px;
    background-color: #a81858;
    color: #fff;
    font-family: var(--font-primary);
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    transition: transform 160ms var(--bac-ease, ease), background-color 200ms ease;
  }
  body.bac-design .bac-header-cta:hover,
  body.bac-design .bac-header-cta:focus-visible { background-color: #7c1241; color: #fff; }
}
@media (min-width: 64rem) and (prefers-reduced-motion: no-preference) {
  body.bac-design .bac-header-cta:active { transform: scale(0.97); }
}
/* Mobiles Menü: "Geräte für Praxen" als erster Punkt, Raspberry-Pille (Desktop-Button siehe oben) */
body.bac-design .bac-header-cta-item-m { display: block; padding: 0.25rem var(--space-sm, 1rem) 0.5rem; }
body.bac-design .bac-header-cta-m {
  display: inline-flex;
  align-items: center;
  padding: 0.625rem 1.25rem;
  border-radius: 999px;
  background-color: #a81858;
  color: #fff;
  font-family: var(--font-primary);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 200ms ease;
}
body.bac-design .bac-header-cta-m:hover,
body.bac-design .bac-header-cta-m:focus-visible { background-color: #7c1241; color: #fff; }
@media (min-width: 64rem) {
  body.bac-design .bac-header-cta-item-m { display: none; }
}
/* Zwischen 64 und 80rem ist die Zeile eng: Menüabstände und Button etwas kompakter */
@media (min-width: 64rem) and (max-width: 79.99rem) {
  body.bac-design .mega-nav--desktop .mega-nav__control { padding-left: 0.5rem; padding-right: 0.5rem; font-size: 0.8125rem; white-space: nowrap; }
  body.bac-design .mega-nav--desktop .mega-nav__logo { margin-right: 0; }
  body.bac-design .bac-header-cta { margin: 0 0.25rem 0 0.5rem; padding: 0.5rem 0.9rem; font-size: 0.8125rem; }
}

/* ---------- Fußzeile ---------- */
/* Überschriften: Poppins, Satzschreibung */
body.bac-design .main-footer h4 {
  font-family: var(--font-secondary);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
  color: #fff;
}
/* Links: Weiß 80 %, Hover Weiß */
body.bac-design .main-footer a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  transition: color 200ms ease;
}
body.bac-design .main-footer a:hover,
body.bac-design .main-footer a:focus-visible { color: #fff; text-decoration: underline; text-underline-offset: 0.2em; }
body.bac-design .main-footer p { color: rgba(255, 255, 255, 0.85); }
/* Kleingedrucktes (Sternchen-Hinweise): kleiner und zurückgenommen */
body.bac-design .main-footer .text-xs {
  font-size: 0.75rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.75);
}
body.bac-design .main-footer .text-xs p { color: inherit; }

/* Unterer Balken: Raspberry dunkel #7c1241 (aus dem Token [data-theme="primary"]), Links ruhig */
body.bac-design footer.main-footer + div[data-theme="primary"] { background-color: #7c1241; }
body.bac-design footer.main-footer + div[data-theme="primary"] a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  transition: color 200ms ease;
}
body.bac-design footer.main-footer + div[data-theme="primary"] a:hover { color: #fff; text-decoration: underline; text-underline-offset: 0.2em; }
body.bac-design footer.main-footer + div[data-theme="primary"] .color-contrast-high { color: rgba(255, 255, 255, 0.8); }