/* =============================================================
   fb-autoteile.overrides.css
   Forces: centered nav, inline phone/email, visible footer separator
   ============================================================= */

/* NAVIGATION: center links across full row */
header .main-nav .nav-links,
.main-nav .nav-links{
  display: flex !important;
  width: 100% !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 28px !important;
  text-align: center !important;
}

/* HEADER CONTACT: phone & email side by side, no wrap */
.header-top .contact-info,
.header-top .header-info{
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
  flex-wrap: nowrap !important;
}
.header-top .contact-info p,
.header-top .header-info p{
  margin: 0 !important;
  white-space: nowrap !important;
}
.header-top .contact-info a,
.header-top .header-info a{
  white-space: nowrap !important;
}

/* SEPARATOR BEFORE FOOTER: centered & clearly visible */
.section-sep{
  display: block !important;
  width: 100% !important;
  margin: 40px auto !important;
  height: 0 !important;
  border: 0 !important;
  border-top: 3px solid #cfd6e0 !important;
  background: transparent !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}


/* Active link highlight */
.nav-links a.active {
  font-weight: 700;
  color: var(--brand, #0d5cab) !important;
  border-bottom: 2px solid var(--brand, #0d5cab);
}

/* FAQ basic styles */
.faq-list{ display:grid; gap:14px; }
.faq-item summary{ cursor:pointer; padding:12px 14px; border:1px solid var(--gray-300,#d1d5db); border-radius:10px; }
.faq-item[open] summary{ border-color: var(--brand,#0d5cab); }
.faq-item .faq-answer{ padding:12px 14px; border:1px solid var(--gray-200,#e5e7eb); border-top:none; border-radius:0 0 10px 10px; background:#fff; }


/* Footer nebeneinander */
.footer-flex {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  flex-wrap: wrap; /* bricht bei kleinen Bildschirmen um */
}

.footer-flex .footer-column {
  flex: 1 1 200px; /* alle Spalten gleich breit */
  min-width: 180px;
}

.footer-flex h4 {
  margin-bottom: 10px;
}

/* Footer Schriftgröße allgemein etwas kleiner */
.site-footer {
  font-size: 0.9rem; /* Standard ist meist 1rem, hier ca. 10% kleiner */
}

.site-footer h4 {
  font-size: 1rem; /* Überschriften im Footer auch eine Stufe kleiner */
  margin-bottom: 8px;
}


/* --- Force brand logos to show in color by default --- */
#brands .brand img,
.brands .brand img{
  filter: none !important;
  opacity: 1 !important;
}
#brands .brand:hover img,
.brands .brand:hover img{
  filter: none !important;
  opacity: 1 !important;
}


/* --- Brands carousel: ensure side-by-side tiles & smooth wrapping --- */
#brands .brand-track, .brands .brand-track{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(140px, 1fr);
  gap: 12px;
  overflow: auto;
  scroll-snap-type: x mandatory;
  padding: 6px;
  border: 1px dashed #e5e7eb;
  border-radius: 16px;
}
#brands .brand, .brands .brand{
  min-width: 140px;
  height: 72px;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(#ffffff,#ffffff) padding-box,
             linear-gradient(135deg,#dfe8f6,#eef3fb) border-box;
  border: 1px solid transparent; border-radius: 12px;
  box-shadow: 0 2px 8px rgba(17,24,39,0.05);
  padding: 10px;
}
@media (max-width: 720px){
  #brands .brand-track, .brands .brand-track{ grid-auto-columns: minmax(120px, 1fr); }
  #brands .brand, .brands .brand{ min-width: 120px; height: 64px; }
}


/* --- Hersteller-Carousel (autoplay + farbige Logos) --- */
.brands{ text-align:center; }
.brand-carousel{
  display:grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items:center;
}
.bc-nav{
  width:44px; height:44px; border-radius:9999px; cursor:pointer;
  border:1px solid #cbd5e1; background:#fff;
  display:grid; place-items:center;
  transition: transform .12s ease, background .12s ease;
}
.bc-nav::before{ content:''; width:14px; height:14px; border-top:2px solid #111827; border-right:2px solid #111827; display:block; transform: rotate(135deg); }
.bc-nav.next::before{ transform: rotate(-45deg); }
.bc-nav:hover{ transform: translateY(-1px); background:#f8fafc; }
.brand-track{
  display:grid; grid-auto-flow: column; grid-auto-columns: minmax(140px, 1fr);
  gap: 12px; overflow: auto; scroll-snap-type: x mandatory;
  padding: 6px; border:1px dashed #e5e7eb; border-radius: 16px;
  scrollbar-width: thin;
}
.brand{
  min-width: 140px; height: 72px; scroll-snap-align: center;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(#ffffff,#ffffff) padding-box,
             linear-gradient(135deg,#dfe8f6,#eef3fb) border-box;
  border: 1px solid transparent; border-radius: 12px;
  box-shadow: 0 2px 8px rgba(17,24,39,0.05);
  transition: transform .12s ease, box-shadow .12s ease;
  padding: 10px;
}
.brand:hover{ transform: translateY(-2px); box-shadow: 0 8px 18px rgba(17,24,39,0.10); }
.brand img{ max-height: 38px; max-width: 100%; object-fit: contain; filter: none !important; opacity: 1 !important; }
@media (max-width: 720px){
  .brand-track{ grid-auto-columns: minmax(120px, 1fr); }
  .brand{ min-width: 120px; height: 64px; }
  .brand img{ max-height: 34px; }
}