/* ===== Schubertbund – einfache Tara-Overrides ===== */

/* Farbpalette aus dem Logo */
:root {
  --sb-braun:       #5E4632;
  --sb-braun-hell:  #8a6f57;
  --sb-beige:       #E9E1D6;
  --sb-beige-d:     #C9B8A6;
}

/* --- Header-Bereich (Logo + Menü-Hintergrund) --- */
.header-top,
.header-mid {
  background-color: var(--sb-beige);
  border-bottom: 2px solid var(--sb-braun);
}

/* Hauptmenübalken (Desktop + Mobil) */
.navbar,
.region-primary-menu {
  background-color: var(--sb-beige);
  border-top: 1px solid var(--sb-beige-d);
  border-bottom: 2px solid var(--sb-braun);
}

/* Links im Menü */
.navbar a,
.region-primary-menu a {
  color: var(--sb-braun);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: none;
}

.navbar a:hover,
.region-primary-menu a:hover,
.region-primary-menu li.is-active > a {
  color: var(--sb-braun-hell);
}

/* Logo in vernünftiger Größe – ohne Layout-Tricks */
.site-logo img,
.logo img,
.navbar-brand img {
  max-height: 90px;
  height: auto;
  width: auto;
  display: block;
}

/* Kleine Optimierungen für Mobil, aber KEINE Strukturänderung */
@media (max-width: 768px) {
  .navbar,
  .region-primary-menu {
    border-bottom-width: 1px;
  }
}

/* ============================================
 * STAGING: Bessere Lesbarkeit Mobile-Navigation
 * Nur für kleine Viewports (Smartphone).
 * ============================================ */
@media (max-width: 768px) {

  /* Hauptmenü-Liste mobil: keine Bullets, saubere Kante */
  .menu--main {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
  }

  /* Links im Hauptmenü: dunkle Schrift statt weiß */
  .menu--main a {
    color: #333333;
  }

  /* Aktiver / hovernder Menüpunkt: Braun (Kontrast + Corporate) */
  .menu--main a.is-active,
  .menu--main a:hover,
  .menu--main a:focus {
    color: #7a3b1c;
  }
}

/* ============================================
 * STAGING: Mobile-Navigation – harte Overrides
 * ============================================ */
@media (max-width: 768px) {

  /* Liste bereinigen, falls Theme-Klassen verschachtelt sind */
  .menu--main,
  .menu--main .menu {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  /* Links: dunkle Grundfarbe, guter Kontrast */
  .menu--main a,
  .menu--main .menu__link {
    color: #333333 !important;
  }

  /* Aktiver / hovernder Menüpunkt: Braun */
  .menu--main a.is-active,
  .menu--main .menu__link.is-active,
  .menu--main a:hover,
  .menu--main .menu__link:hover,
  .menu--main a:focus,
  .menu--main .menu__link:focus {
    color: #7a3b1c !important;
  }
}

/* ============================================
 * STAGING: Test + bessere Mobile-Navigation
 * ============================================ */
@media (max-width: 1024px) {

  /* TEST: Badge, damit wir sehen, dass dieses CSS aktiv ist */
  body::after {
    content: 'STAGING-CSS aktiv';
    position: fixed;
    bottom: 8px;
    right: 8px;
    background: rgba(122, 59, 28, 0.9);
    color: #ffffff;
    padding: 4px 8px;
    font-size: 11px;
    z-index: 9999;
  }

  /* Navigationslisten: Bullets weg, Kanten sauber */
  header nav ul,
  header nav ul li,
  .region-primary-menu ul,
  .region-primary-menu ul li {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  /* Links in der Hauptnavigation: dunkle Schrift für Kontrast */
  header nav a,
  .region-primary-menu a,
  .region-primary-menu .menu__link {
    color: #333333 !important;
  }

  /* Aktiver / hovernder Menüpunkt: Braun aus dem bestehenden Farbschema */
  header nav a.is-active,
  .region-primary-menu a.is-active,
  .region-primary-menu .menu__link.is-active,
  header nav a:hover,
  .region-primary-menu a:hover,
  .region-primary-menu .menu__link:hover,
  header nav a:focus,
  .region-primary-menu a:focus,
  .region-primary-menu .menu__link:focus {
    color: #7a3b1c !important;
  }
}

/* ============================================
 * STAGING: Mobile-Navigation optimiert
 * (Kontrast + Listen-Darstellung)
 * ============================================ */
@media (max-width: 1024px) {

  /* Test-Badge wieder ausblenden */
  body::after {
    display: none !important;
  }

  /* Mobile-Hauptmenü: saubere Liste ohne Bullets */
  .region-primary-menu ul.menu,
  .region-primary-menu .menu--main,
  .region-primary-menu .menu--main li {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  /* Hintergrund der mobilen Liste (hell/beige) */
  .region-primary-menu {
    background-color: #f5f2e8;
  }

  .region-primary-menu .menu--main > li {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  }

  .region-primary-menu .menu--main > li:last-child {
    border-bottom: none;
  }

  /* Links: dunkle Schrift für guten Kontrast */
  .region-primary_menu .menu__link,
  .region-primary-menu a,
  .menu--main a {
    color: #333333 !important;
  }

  /* Aktiver/hovernder Menüpunkt: Braun aus Farbschema */
  .region-primary-menu .menu__link.is-active,
  .region-primary-menu .menu__link:hover,
  .region-primary-menu .menu__link:focus,
  .menu--main a.is-active,
  .menu--main a:hover,
  .menu--main a:focus {
    color: #7a3b1c !important;
  }
}