/* ============================================================
   NORTEK24 — brand-style.css
   Stile für alle Marken-Landingpages (marken/*.html)
   Klassen-Inventar aus bosch, meyle, ate, skf, sachs, continental,
   mahle, febi, hella und allen Sub-Brand-Seiten.
   ============================================================ */

/* ── CSS Custom Properties (Fallback falls style.css nicht geladen) ── */
:root {
  --orange:       #D4621A;
  --orange-dark:  #B8521A;
  --orange-light: #F07830;
  --orange-bg:    #FFF4EE;
  --dark:         #1A1A1A;
  --dark-2:       #222222;
  --dark-3:       #333333;
  --mid:          #555555;
  --light:        #F5F5F5;
  --lighter:      #FAFAFA;
  --white:        #FFFFFF;
  --border:       #E8E8E8;
  --shadow:       0 2px 8px rgba(0,0,0,0.07);
  --shadow-lg:    0 4px 16px rgba(0,0,0,0.12);
  --radius:       0;
  --radius-sm:    0;
  --transition:   all 0.3s ease;
}

/* ============================================================
   TOPBAR (OLD template — class="topbar-left/right")
   ============================================================ */
.topbar {
  background: var(--dark-2);
  color: rgba(255,255,255,0.75);
  font-size: 0.82rem;
  padding: 0;
  position: relative;
  z-index: 100;
}
.topbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 8px;
  padding-bottom: 8px;
  flex-wrap: wrap;
  gap: 8px;
}
.topbar-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  width: 100%;
}
.topbar-left {
  display: flex;
  align-items: center;
  gap: 16px;
}
.topbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.topbar-link {
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color 0.2s;
}
.topbar-link:hover { color: var(--orange); }
.topbar-whatsapp {
  color: #25d366;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
.topbar-item {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(255,255,255,0.65);
}
.topbar-wa { color: #25d366 !important; }
.topbar-wa:hover { color: #1aaf55 !important; }

/* ============================================================
   OLD HEADER-BLOCK ENTFERNT (2026-10-Cleanup)
   Entfernte Regeln: .header { background: var(--white); position: sticky; top: 0 },
   .header .container, .header-inner { height: 70px }, .logo, .logo-img,
   .nav-list, .nav-link (light-theme), .burger (dark bars).
   Begründung: style.css (Z. 374–444) definiert bereits .header mit
   position:sticky/top:0/dark-background; der HARMONIZATION-Block (Z. 162ff.)
   überschreibt alle verbleibenden Werte per !important. Kein Property des
   OLD-Blocks hatte nach der Kaskade noch Netto-Wirkung.
   ============================================================ */

/* ============================================================
   HEADER HARMONIZATION — override the fallback block above
   Forces all brand pages to exactly match the homepage header
   (index.html reference: style.css lines 365–439)
   ============================================================ */

/* 1. Header background + z-index — dark like homepage */
.header {
  background: var(--dark-2) !important;
  box-shadow: 0 2px 16px rgba(0,0,0,0.3) !important;
  z-index: 1000 !important;
}
.header.scrolled {
  background: rgba(26,26,26,0.98) !important;
  backdrop-filter: blur(12px) !important;
}

/* 2. Header-inner — use padding rhythm, not fixed height */
.header-inner {
  height: auto !important;
  padding: 14px 0 !important;
  gap: 20px !important;
}

/* 3. Logo — 52px matching homepage */
.logo-img {
  height: 52px !important;
  width: auto !important;
  object-fit: unset !important;
}

/* 4. Nav links — light text on dark background, homepage sizing */
.nav-link {
  color: rgba(255,255,255,0.85) !important;
  font-size: 0.93rem !important;
  padding: 8px 14px !important;
}
.nav-link:hover,
.nav-link.active {
  color: var(--orange-dark) !important; /* BUG-12 Fix: #B8521A=4.89:1 WCAG AA PASS */
  background: rgba(184,82,26,0.10) !important;
}

/* 5. Burger bars — white, homepage dimensions */
.burger span {
  width: 26px !important;
  height: 2.5px !important;
  background: var(--white) !important;
}

/* 6. Mobile: logo height override (brand-style had height:60px fixed on header-inner) */
@media (max-width: 768px) {
  .header-inner {
    height: auto !important;
    padding: 10px 0 !important;
  }
  .logo-img {
    height: 42px !important;
  }
}

/* ============================================================
   BRAND HERO  (.brand-hero, .bh-*)
   ============================================================ */
.brand-hero {
  position: relative;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 55%, #0f3460 100%);
  padding: 100px 0 64px;
  overflow: hidden;
}
.bh-bg,
.bh-overlay,
.bh-glow,
.bh-pattern {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.bh-overlay { background: rgba(0,0,0,0.25); }
.bh-glow {
  background: radial-gradient(ellipse at 70% 50%, rgba(212,98,26,0.18) 0%, transparent 65%);
}
.bh-pattern {
  background-image: radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 32px 32px;
}
.bh-content {
  position: relative;
  z-index: 2;
}
.bh-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.5);
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.bh-breadcrumb a {
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  transition: color 0.2s;
}
.bh-breadcrumb a:hover { color: var(--orange-dark); } /* BUG-12 Fix: WCAG AA auf hellem BG */
.bh-breadcrumb span { color: rgba(255,255,255,0.8); }
.bh-breadcrumb i { font-size: 0.65rem; color: rgba(255,255,255,0.3); }

.bh-inner {
  display: flex;
  align-items: center;
  gap: 48px;
  flex-wrap: wrap;
}
.bh-logo-wrap {
  background: rgba(255,255,255,0.08);
  border-radius: 0;
  border: 1px solid rgba(255,255,255,0.15);
  border-left: 3px solid var(--orange);
  padding: 28px 36px;
  box-shadow: none;
  flex-shrink: 0;
  min-width: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bh-logo-img {
  max-width: 180px;
  max-height: 80px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.bh-text { flex: 1; min-width: 280px; }
.bh-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(212,98,26,0.2);
  border: 1px solid rgba(212,98,26,0.4);
  border-left: 3px solid var(--orange);
  color: var(--orange-light);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 0;
  margin-bottom: 16px;
  letter-spacing: 0.5px;
  /* Layout-Guard: langer Badge-Text wrappen statt overflow */
  flex-wrap: wrap;
  max-width: 100%;
  line-height: 1.4;
  white-space: normal;
}
.bh-text h1 {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 800;
  color: white;
  margin: 0 0 16px;
  line-height: 1.2;
}
.bh-highlight { color: var(--orange-light); }
.bh-lead {
  color: rgba(255,255,255,0.78);
  font-size: 1.05rem;
  line-height: 1.7;
  /* Kein hartes max-width: langer Fließtext wie Sachs-Beschreibung darf volle Spaltenbreite nutzen */
  max-width: 640px;
  margin: 0 0 28px;
}
.bh-stats {
  display: flex;
  gap: 20px 28px;
  flex-wrap: wrap;
  margin-bottom: 32px;
  align-items: flex-start;
}
.bh-stat { text-align: center; min-width: 70px; max-width: 160px; word-break: normal; }
.bh-stat strong {
  display: block;
  font-size: 1.7rem;
  font-weight: 900;
  color: var(--orange-light);
  line-height: 1;
}
.bh-stat span {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
  display: block;
  font-family: 'Barlow Condensed', 'Oswald', sans-serif;
  font-weight: 500;
}
.bh-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.bh-btn-outline {
  color: white !important;
  border-color: rgba(255,255,255,0.35) !important;
}
.bh-btn-outline:hover {
  background: rgba(255,255,255,0.18) !important; /* KP-4 FIX: Hover-Fill auf System-Standard angehoben */
  border-color: rgba(255,255,255,0.6) !important;
}

/* BH alternate layout (jpgroup, psa etc. use .bh-badge, .bh-content, .bh-sub) */
.bh-content .bh-inner { flex-wrap: wrap; }
.bh-badge-wrap { display:flex; align-items:center; }
.bh-badge { flex-shrink:0; }
.bh-sub {
  color: rgba(255,255,255,0.72);
  font-size: 1rem;
  line-height: 1.7;
  max-width: 520px;
  margin: 0 0 24px;
}
.bh-ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* ============================================================
   SECTION HEAD  (.section-head, .section-tag, .section-title, .section-sub)
   ============================================================ */
.section-head {
  text-align: center;
  margin-bottom: 48px;
}
.section-tag {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  gap: 5px;
  background: #FFF0E6;
  color: #8B3A0A;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 4px 11px;
  border-radius: 0;
  border: 1px solid rgba(139,58,10,0.18);
  border-left: 3px solid var(--orange);
  margin-bottom: 14px;
  line-height: 1;
  white-space: nowrap;
}
.section-tag--light {
  background: rgba(255,255,255,0.13);
  color: #ffffff;
  border-color: rgba(255,255,255,0.22);
}
.section-title {
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 800;
  color: var(--orange);
  margin: 0 0 12px;
  line-height: 1.25;
  display: inline-block;
  background: rgba(212,98,26,0.09);
  padding: 2px 8px;
  border-radius: 0;
}
.section-sub {
  color: var(--mid);
  font-size: 1rem;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}
.highlight {
  color: var(--orange);
}

/* ============================================================
   PRODUKT-GRID  (.brand-products, .prod-grid, .prod-card)
   ============================================================ */
.brand-products {
  padding: 80px 0;
  background: var(--light);
}
.prod-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 24px;
  /* Karten gleiche Höhe — verhindert Top-Heavy-Grid bei unterschiedlicher Textmenge */
  align-items: stretch;
}
.prod-card {
  background: var(--white);
  border-radius: 0;
  border-left: 3px solid transparent;
  padding: 28px 24px;
  border: 1.5px solid var(--border);
  border-left: 3px solid transparent;
  transition: border-left-color .2s;
  cursor: default;
  /* Layout-Stabilität: Text nie am Rand, kein Overflow */
  overflow: hidden;
  word-break: break-word;
  hyphens: auto;
}
.prod-card:hover {
  border-left-color: var(--orange);
  box-shadow: none;
  transform: none;
}
a.prod-card { cursor: pointer; text-decoration: none; color: inherit; }
.prod-icon {
  font-size: 2rem;
  color: var(--orange);
  margin-bottom: 16px;
}
.prod-card h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--dark);
  margin: 0 0 10px;
  line-height: 1.35;
}
.prod-card p {
  font-size: 0.88rem;
  color: var(--mid);
  line-height: 1.6;
  margin: 0 0 12px;
}
.prod-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.prod-list li {
  font-size: 0.83rem;
  color: var(--mid);
  padding: 3px 0;
  padding-left: 14px;
  position: relative;
}
.prod-list li::before {
  content: '›';
  position: absolute;
  left: 0;
  color: var(--orange-dark); /* BUG-12 Fix: WCAG AA auf weißem Karten-BG */
  font-weight: 700;
}

/* ============================================================
   ÜBER MARKE  (.brand-about-section, .bat-*)
   ============================================================ */
.brand-about-section {
  position: relative;
  padding: 80px 0;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 60%, #0f3460 100%);
  overflow: hidden;
}
.bat-bg {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}
.bat-content { position: relative; z-index: 2; }
.bat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}
.bat-left h2 {
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 800;
  color: white;
  margin: 0 0 20px;
  line-height: 1.25;
}
.bat-left p {
  color: rgba(255,255,255,0.72);
  font-size: 0.98rem;
  line-height: 1.7;
  margin: 0 0 14px;
}
.bat-features {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 24px;
}
.bat-feature {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: rgba(255,255,255,0.8);
  font-size: 0.9rem;
  line-height: 1.55;
}
.bat-feature i { color: var(--orange-light); margin-top: 2px; flex-shrink: 0; }
.bat-right {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.bat-info-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-left: 3px solid var(--orange);
  border-radius: 0;
  padding: 24px;
}
.bat-nortek-card {
  background: rgba(212,98,26,0.12);
  border-color: rgba(212,98,26,0.3);
}
.bic-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  color: white;
  font-size: 1rem;
}
.bic-header i { color: var(--orange-light); font-size: 1.2rem; }
.bic-row {
  display: flex;
  justify-content: space-between;
  /* Bei langen Werten (ZF Friedrichshafen AG) umbrechen statt overflow */
  align-items: flex-start;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  font-size: 0.85rem;
  line-height: 1.45;
}
.bic-row:last-child { border-bottom: none; }
.bic-row span {
  color: rgba(255,255,255,0.55);
  /* Label linksbündig, nie breiter als Hälfte */
  flex-shrink: 0;
  max-width: 45%;
}
.bic-row strong {
  color: rgba(255,255,255,0.9);
  text-align: right;
  word-break: break-word;
}
.bat-info-card p { color: rgba(255,255,255,0.7); font-size:0.88rem; line-height:1.6; margin:0 0 16px; }
.bat-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--orange);
  color: white;
  padding: 10px 20px;
  border-radius: 0;
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 600;
  transition: var(--transition);
}
.bat-cta-btn:hover { background: var(--orange-dark); }

/* brand-about alternate layout (lemfoerder, sachs etc.) */
.brand-about { padding: 80px 0; background: var(--white); }
.bat-text h2 {
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  font-weight: 800;
  color: var(--dark);
  margin: 0 0 16px;
}
.bat-text p { color: var(--mid); line-height: 1.7; margin: 0 0 12px; font-size: 0.97rem; }
.bat-list {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
}
.bat-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  color: var(--dark-3);
  font-size: 0.9rem;
}
.bat-list li i { color: var(--orange); }
.bat-visual {
  background: linear-gradient(135deg, #1a1a2e 0%, #0f3460 100%);
  border-radius: 0;
  border-left: 3px solid var(--orange);
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.bat-icon-box { color: white; }
.bat-big-icon { font-size: 3.5rem; color: var(--orange-light); margin-bottom: 20px; display: block; }
.bat-icon-box h3 { font-size: 1.2rem; font-weight: 700; color: white; margin: 0 0 12px; }
.bat-icon-box p { color: rgba(255,255,255,0.65); font-size: 0.9rem; line-height: 1.6; margin: 0; }

/* ============================================================
   CTA SECTION  (.brand-cta-section, .bcs-*)
   ============================================================ */
.brand-cta-section {
  padding: 80px 0;
  background: var(--white);
  border-top: 1px solid var(--border);
}
.bcs-inner {
  display: flex;
  gap: 32px 40px;
  align-items: flex-start;
  flex-wrap: wrap;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 60%, #0f3460 100%);
  border-radius: 0;
  border-left: 3px solid var(--orange);
  padding: 48px 40px;
}
.bcs-icon {
  font-size: 2.5rem;
  color: var(--orange-light);
  flex-shrink: 0;
  margin-top: 4px;
}
.bcs-text { flex: 1; min-width: 260px; min-width: min(260px, 100%); }
.bcs-text h2 {
  font-size: clamp(1.3rem, 3vw, 1.8rem);
  font-weight: 800;
  color: white;
  margin: 0 0 12px;
}
.bcs-text p { color: rgba(255,255,255,0.7); font-size: 0.97rem; line-height: 1.7; margin: 0 0 16px; }
.bcs-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bcs-list li {
  display: flex;
  /* Icon sitzt an Textmitte — bei langem Text muss Icon oben fixiert bleiben */
  align-items: flex-start;
  gap: 10px;
  color: rgba(255,255,255,0.78);
  font-size: 0.88rem;
  line-height: 1.6;
}
.bcs-list li i {
  color: var(--orange-light);
  /* Icon bleibt oben fixiert auch bei mehrzeiligen Listitems */
  flex-shrink: 0;
  margin-top: 3px;
}
.bcs-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-shrink: 0;
  justify-content: flex-start;
  min-width: 180px;
  /* Button-Labels nie abschneiden */
  align-items: stretch;
}
.bcs-btn-outline {
  color: white !important;
  border-color: rgba(255,255,255,0.3) !important;
}
.bcs-btn-outline:hover {
  background: rgba(255,255,255,0.1) !important;
}
.bcs-wa-btn {
  background: #25d366;
  color: white !important;
  font-weight: 600;
  border-radius: 0;
  text-align: center;
}
.bcs-wa-btn:hover { background: #1aaf55; }

/* brand-cta alternate (dark section) */
.brand-cta {
  padding: 80px 0;
  background: var(--dark);
  text-align: center;
}
.brand-cta h2 { font-size: 2rem; font-weight: 800; color: white; margin: 0 0 16px; }
.brand-cta p { color: rgba(255,255,255,0.7); margin: 0 0 32px; }

/* ============================================================
   FAQ  — globales Akkordeon-System (_voorl.html-konform)
   details/summary-Pattern, scharfe Geometrie, Oswald-Fragen
   Gilt für: .brand-faq, .faq-grid, .faq-list, .faq-item
   ============================================================ */
.brand-faq {
  padding: 80px 0;
  background: var(--light, #FAF8F4);
}

/* ── Layout-Wrapper ── */
.faq-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 0;
  max-width: 860px;
}
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 860px;
  margin: 0 auto;
}

/* ── Details/Summary-Basis (alle Seiten) ── */
details.faq-item {
  background: var(--white, #fff);
  border-right: 1px solid var(--border, #E0DCD3);
  border-bottom: 1px solid var(--border, #E0DCD3);
  border-top: none;
  border-left: 3px solid transparent;
  border-radius: 0 !important;
  cursor: pointer;
  transition: border-left-color .2s;
}
details.faq-item:first-of-type,
.faq-list details.faq-item:first-child {
  border-top: 1px solid var(--border, #E0DCD3);
}
details.faq-item[open] {
  border-left: 3px solid var(--orange, #D4621A) !important;
}
details.faq-item:hover {
  border-left: 3px solid var(--orange, #D4621A) !important;
}

/* ── Summary (Frage-Zeile) ── */
summary.faq-question {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  cursor: pointer;
  font-family: 'Oswald', sans-serif;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: var(--dark, #0F1017);
  user-select: none;
}
summary.faq-question::-webkit-details-marker { display: none; }
summary.faq-question::after {
  content: '+';
  font-family: 'Roboto Mono', monospace;
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--orange, #D4621A);
  flex-shrink: 0;
  line-height: 1;
  width: 24px;
  text-align: center;
}
details.faq-item[open] summary.faq-question::after { content: '–'; }

/* Frage-Icon links (optional, FA-Klasse) */
summary.faq-question .faq-icon-q {
  color: var(--orange, #D4621A);
  font-size: .85rem;
  flex-shrink: 0;
  margin-right: 2px;
}

/* ── Antwort-Body ── */
.faq-answer {
  padding: 0 20px 18px;
  border-top: 1px solid var(--border, #E0DCD3);
}
.faq-answer p {
  font-size: .9rem;
  color: var(--mid, #5a5a6e);
  line-height: 1.7;
  margin: 14px 0 0;
}
.faq-answer strong { color: var(--dark, #0F1017); }

/* ── Legacy: li.faq-item + button.faq-question (profipartner alt) ──
   Wird durch details/summary ersetzt; Klassen bleiben für Übergänge ── */
li.faq-item {
  list-style: none;
  border: 1px solid var(--border, #E0DCD3);
  border-top: none;
  border-left: 3px solid transparent;
  border-radius: 0;
  transition: border-left-color .2s;
}
li.faq-item:first-child { border-top: 1px solid var(--border, #E0DCD3); }
li.faq-item.open { border-left-color: var(--orange, #D4621A); }

/* ── Statische .faq-item-Karten (ohne Akkordeon, z. B. brand-faq-grid) ── */
.faq-grid .faq-item:not(details):not(li) {
  background: var(--white, #fff);
  border: 1px solid var(--border, #E0DCD3);
  border-radius: 0;
  border-left: 3px solid transparent;
  padding: 24px;
  transition: border-left-color .2s;
}
.faq-grid .faq-item:not(details):not(li):hover {
  border-left-color: var(--orange, #D4621A);
  box-shadow: var(--shadow, 0 1px 2px rgba(15,16,23,.05));
}
.faq-item h3 {
  font-family: 'Oswald', sans-serif;
  font-size: 0.97rem;
  font-weight: 500;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: var(--dark, #0F1017);
  margin: 0 0 12px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.faq-item h3 i { color: var(--orange, #D4621A); margin-top: 2px; flex-shrink: 0; }
.faq-item p {
  font-size: 0.88rem;
  color: var(--mid, #5a5a6e);
  line-height: 1.65;
  margin: 0;
}

/* ============================================================
   DELIVERY GRID  (.ta-delivery-grid, .ta-delivery-card)
   ============================================================ */
.brand-delivery { padding: 80px 0; background: var(--white); }
.ta-delivery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 24px;
}
.ta-delivery-card {
  background: var(--lighter);
  border-radius: 0;
  border-left: 3px solid transparent;
  padding: 28px 24px;
  border: 1.5px solid var(--border);
  border-left: 3px solid transparent;
  transition: border-left-color .2s;
  position: relative;
  /* Kein Text am Rand */
  overflow: hidden;
  word-break: break-word;
}
.ta-delivery-card:hover {
  border-left-color: var(--orange);
  box-shadow: none;
}
.ta-delivery-card--featured {
  border-color: var(--orange);
  background: var(--orange-bg);
}
.ta-delivery-icon,
.tdc-icon {
  font-size: 1.8rem;
  color: var(--orange);
  margin-bottom: 16px;
}
.ta-delivery-card h3 {
  font-size: 0.97rem;
  font-weight: 700;
  color: var(--dark);
  margin: 0 0 10px;
}
.ta-delivery-card p {
  font-size: 0.85rem;
  color: var(--mid);
  line-height: 1.6;
  margin: 0;
}
.tdc-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--orange);
  color: white;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 0;
  margin-top: 12px;
}

/* ============================================================
   BRAND CROSS-LINKING  (.brand-crosslink, .bcl-*)
   ============================================================ */
.brand-crosslink { padding: 80px 0; background: var(--light); }
.bcl-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 40px;
  align-items: start;
}
.bcl-brands h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--dark);
  margin: 0 0 20px;
}
.bcl-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.bcl-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: white;
  border: 1.5px solid var(--border);
  border-radius: 0;
  padding: 12px 16px;
  text-decoration: none;
  transition: border-color .2s;
  min-width: 80px;
}
.bcl-link:hover { border-color: var(--orange); }
.bcl-link img { width: 60px; height: 30px; object-fit: contain; }
.bcl-link span { font-size: 0.72rem; color: var(--mid); }

/* ============================================================
   SECTION (generic)
   ============================================================ */
.section { padding: 64px 0; }

/* ============================================================
   BRAND HERO ALTERNATE (bh-badge, bh-content, bh-inner, bh-sub styles for new-template pages)
   ============================================================ */
.bh-inner .bh-badge {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-left: 3px solid var(--orange);
  border-radius: 0;
  padding: 28px;
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bh-inner .bh-badge img {
  width: 80px;
  height: 80px;
  object-fit: contain;
  border-radius: 0;
}
/* override for pages that use bh-badge as text badge */
.bh-text .bh-badge,
.bh-content > .bh-inner .bh-badge:not(:has(img)) {
  width: auto;
  height: auto;
  padding: 4px 12px;
  border-radius: 0;
  background: rgba(212,98,26,0.2);
  border-color: rgba(212,98,26,0.4);
  border-left: 3px solid var(--orange);
  color: var(--orange-light);
  font-size: 0.78rem;
  font-weight: 600;
}

/* new-template brand hero section classes */
.bh-content h1 {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 800;
  color: white;
  margin: 0 0 16px;
  line-height: 1.2;
}
.bh-content .bh-sub {
  color: rgba(255,255,255,0.72);
  font-size: 1rem;
  line-height: 1.7;
  max-width: 540px;
  margin: 0 0 24px;
}
.bh-stat-val {
  display: block;
  font-size: 1.7rem;
  font-weight: 900;
  color: var(--orange-light);
  line-height: 1;
}
.bh-stat-label {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-family: 'Barlow Condensed', 'Oswald', sans-serif;
  font-weight: 500;
}

/* ============================================================
   BRAND PRODUCTS ALTERNATE (bp-grid, bp-card for new-template pages)
   ============================================================ */
.bp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 24px;
}
.bp-card {
  background: var(--white);
  border-radius: 0;
  border-left: 3px solid transparent;
  padding: 28px 24px;
  border: 1.5px solid var(--border);
  border-left: 3px solid transparent;
  transition: border-left-color .2s;
}
.bp-card:hover {
  border-left-color: var(--orange);
  box-shadow: none;
  transform: none;
}
.bp-icon {
  font-size: 2rem;
  color: var(--orange);
  margin-bottom: 16px;
}
.bp-card h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--dark);
  margin: 0 0 10px;
}
.bp-card p {
  font-size: 0.87rem;
  color: var(--mid);
  line-height: 1.6;
  margin: 0;
}

/* ============================================================
   MARKEN-CARD (cross-link tiles used in some pages)
   ============================================================ */
.marken-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: white;
  border: 1.5px solid var(--border);
  border-radius: 0;
  padding: 20px;
  text-decoration: none;
  transition: border-color .2s;
  overflow: hidden;
}
.marken-card:hover {
  border-color: var(--orange);
  box-shadow: none;
  transform: none;
}
.marken-card img {
  max-width: 120px;
  max-height: 50px;
  object-fit: contain;
  width: auto;
  height: auto;
}
.brand-name {
  font-size: 0.78rem;
  color: var(--mid);
  font-weight: 500;
  text-align: center;
}

/* ============================================================
   BUTTON VARIANTS  (.btn-lg, .btn-outline-dark, .bh-btn-outline)
   ============================================================ */
.btn-lg {
  padding: 14px 28px;
  font-size: 1rem;
}
/* Outline-Dark Button — überschreibt .btn-Basis komplett */
.btn-outline-dark,
a.btn-outline-dark,
.btn.btn-outline-dark {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #1A1A1A !important;
  border: 2px solid #1A1A1A !important;
  border-radius: 0 !important;
  font-weight: 700 !important;
  font-size: 0.88rem !important;
  padding: 10px 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transform: none !important;
  transition: all 0.3s ease !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}
.btn-outline-dark:hover,
a.btn-outline-dark:hover,
.btn.btn-outline-dark:hover {
  background: #1A1A1A !important;
  background-color: #1A1A1A !important;
  color: #ffffff !important;
  border: 2px solid #1A1A1A !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Button-Gruppe unter Crosslink-Section */
.cross-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
  justify-content: center;
}

/* ============================================================
   BREADCRUMB (standalone)
   ============================================================ */
.breadcrumb { padding: 12px 0; }
.breadcrumb-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--mid);
  flex-wrap: wrap;
}
.breadcrumb-inner a { color: var(--mid); text-decoration: none; }
.breadcrumb-inner a:hover { color: var(--orange-dark); } /* BUG-12 Fix: WCAG AA auf hellem BG */
.breadcrumb-inner .sep { color: var(--border); }

/* ============================================================
   FOOTER  (.footer, OLD template)
   Already in style.css — but some pages only load brand-style.css
   Minimal fallback here.
   ============================================================ */
footer.footer {
  background: var(--dark);
  color: rgba(255,255,255,0.65);
  padding: 60px 0 0;
}
.footer-top {
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer-brand p {
  font-size: 0.87rem;
  line-height: 1.6;
  margin: 12px 0 20px;
  color: rgba(255,255,255,0.55);
}
.footer-logo { height: 36px; width: auto; }
.footer-social {
  display: flex;
  gap: 12px;
}
.footer-social a {
  width: 36px;
  height: 36px;
  background: rgba(255,255,255,0.07);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.65);
  text-decoration: none;
  transition: var(--transition);
  font-size: 0.85rem;
}
.footer-social a:hover {
  background: var(--orange);
  color: white;
}
.footer-col h4 {
  font-size: 0.88rem;
  font-weight: 700;
  color: rgba(255,255,255,0.9);
  margin: 0 0 16px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}
.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.footer-col ul li a {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  transition: color 0.2s;
}
.footer-col ul li a:hover { color: var(--orange); }
.footer-bottom {
  text-align: center;
  padding: 20px 0;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.3);
  border-top: 1px solid rgba(255,255,255,0.05);
}
.footer-bottom a {
  color: rgba(255,255,255,0.4);
  text-decoration: none;
  margin: 0 8px;
}
.footer-bottom a:hover { color: var(--orange); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .bh-inner { flex-direction: column; gap: 28px; }
  .bh-logo-wrap { width: 100%; max-width: 200px; }
  .bh-text { min-width: 0; width: 100%; }
  .bat-grid { grid-template-columns: 1fr; gap: 32px; }
  .bcl-grid { grid-template-columns: 1fr; }
  .bcs-inner { flex-direction: column; padding: 32px 24px; gap: 24px; }
  .bcs-actions { flex-direction: row; flex-wrap: wrap; min-width: auto; align-items: stretch; }
  /* .footer-top grid override removed — .footer-new-grid handles column layout via style.css */
  .prod-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
  .faq-grid { grid-template-columns: 1fr; }
  /* Info-Tabelle: Label/Wert umbrechen auf schmaler Fläche */
  .bic-row { flex-direction: column; gap: 2px; }
  .bic-row span { max-width: 100%; }
  .bic-row strong { text-align: left; }
}

@media (max-width: 640px) {
  .brand-hero { padding: 80px 0 48px; }
  .bh-stats { gap: 16px 20px; }
  .bh-stat strong { font-size: 1.4rem; }
  .bh-lead { font-size: 0.97rem; }
  .topbar .container { flex-direction: column; align-items: flex-start; gap: 6px; }
  /* .footer-top grid override removed — .footer-new-grid handles column layout via style.css */
  .ta-delivery-grid { grid-template-columns: 1fr 1fr; }
  .bcs-actions { flex-direction: column; }
  .bcs-list li { font-size: 0.85rem; }
  .header-inner { height: auto; padding: 10px 0; }
  .burger { display: flex; }
  .nav { display: none; }
  /* Produkt-Grid: Einspalte auf kleinen Geräten */
  .prod-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .ta-delivery-grid { grid-template-columns: 1fr; }
  .bh-actions { flex-direction: column; }
  .bcs-inner { padding: 24px 16px; }
}

/* ============================================================
   BRAND HERO — ALTERNATE BADGE LAYOUT
   (.bh-brand-badge + .bh-logo für TRW, Pierburg, MANN-Filter,
    NGK, Lemförder, Bilstein, Brembo, Hengst etc.)
   ============================================================ */
.bh-brand-badge {
  background: rgba(255,255,255,0.08);
  border-radius: 0;
  border: 1px solid rgba(255,255,255,0.15);
  border-left: 3px solid var(--orange);
  box-shadow: none;
  padding: 28px 36px;
  flex-shrink: 0;
  min-width: 140px;
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bh-logo {
  max-width: 160px;
  max-height: 80px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* bh-h1: Headline im Hero-Bereich (alternate template) */
.bh-h1 {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 800;
  color: white;
  margin: 0 0 16px;
  line-height: 1.2;
}

/* ============================================================
   BRAND CTA STRIP
   (.brand-cta-strip für BMW, Mercedes, VW, Ford, PSA,
    Porsche, JP Group, Werkzeug-Seiten)
   ============================================================ */
.brand-cta-strip {
  padding: 64px 0;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 60%, #0f3460 100%);
}
.brand-cta-strip .bcs-inner {
  background: none;
  border-radius: 0;
  padding: 0;
}
.brand-cta-strip h2 {
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 800;
  color: white;
  margin: 0 0 16px;
}
.brand-cta-strip p {
  color: rgba(255,255,255,0.75);
  font-size: 1rem;
  line-height: 1.7;
  margin: 0 0 28px;
}
.brand-cta-strip .bcs-text {
  flex: 1;
}
.brand-cta-strip .bcs-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

/* .bcs-btns — Button-Gruppe in brand-cta-section (TRW, Pierburg, MANN-Filter) */
.bcs-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 4px;
}

/* .brand-cta-section override: Titel + Text weiß (dunkler Hintergrund durch .bcs-inner) */
.brand-cta-section .bcs-inner h2 {
  color: white;
  margin: 0 0 12px;
}
.brand-cta-section .bcs-inner p {
  color: rgba(255,255,255,0.75);
  margin: 0 0 24px;
}
/* .btn-outline auf dunklem Hintergrund (brand-cta-section) */
.brand-cta-section .bcs-inner .btn-outline,
.brand-cta-strip .btn-outline {
  background: transparent !important;
  background-color: transparent !important;
  color: white !important;
  border: 2px solid rgba(255,255,255,0.5) !important;
  border-radius: 0 !important;
  font-weight: 600 !important;
}
.brand-cta-section .bcs-inner .btn-outline:hover,
.brand-cta-strip .btn-outline:hover {
  background: rgba(255,255,255,0.18) !important; /* KP-4 FIX: stärkerer Hover-Fill auf dunklen Sections */
  border-color: rgba(255,255,255,0.9) !important;
}
/* btn-outline-light — weiße Outline-Buttons auf dunklem Hintergrund */
.btn-outline-light,
a.btn-outline-light,
.btn.btn-outline-light {
  background: transparent !important;
  background-color: transparent !important;
  color: white !important;
  border: 2px solid rgba(255,255,255,0.5) !important;
  border-radius: 0 !important;
  font-weight: 600 !important;
  font-size: 0.88rem !important;
  padding: 10px 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transform: none !important;
  transition: all 0.3s ease !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}
.btn-outline-light:hover,
a.btn-outline-light:hover,
.btn.btn-outline-light:hover {
  background: rgba(255,255,255,0.18) !important; /* KP-4 FIX: sichtbarerer Hover-Delta */
  background-color: rgba(255,255,255,0.18) !important;
  color: white !important;
  border-color: rgba(255,255,255,0.9) !important;
  box-shadow: none !important;
  transform: none !important;
}

/* ============================================================
   FEHLENDE LOGO-FALLBACK — für Marken ohne Bild
   (bilstein.png, brembo.png, hengst.png)
   ============================================================ */
.bh-brand-badge img[src=""],
.bh-logo[src=""],
.bh-logo-img[src=""] {
  display: none;
}
.bh-brand-badge:not(:has(img)),
.bh-brand-badge:has(img[src=""]) {
  min-width: 120px;
  min-height: 80px;
  background: rgba(255,255,255,0.1);
  border: 2px solid rgba(255,255,255,0.2);
}

/* ============================================================
   RESPONSIVE ERGÄNZUNGEN für neue Klassen
   ============================================================ */
@media (max-width: 900px) {
  .bh-brand-badge { width: 100%; max-width: 200px; }
  .brand-cta-strip .bcs-inner { flex-direction: column; }
}
@media (max-width: 640px) {
  .bh-brand-badge { padding: 20px 28px; }
  .bh-logo { max-width: 130px; max-height: 65px; }
  .brand-cta-strip { padding: 48px 0; }
}

/* ============================================================
   BAT BRAND BOX (Markenbox rechts im brand-about)
   Für BMW, Mercedes, VW, Ford, Porsche, PSA, JP Group,
   Werkzeug-Seiten
   ============================================================ */
.bat-visual .bat-brand-box {
  background: linear-gradient(135deg, #1a1a2e 0%, #0f3460 100%);
  border-radius: 0;
  border-left: 3px solid var(--orange);
  padding: 36px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 12px;
  height: 100%;
  min-height: 200px;
  box-shadow: none;
}
.bat-brand-box img {
  max-width: 100px;
  max-height: 100px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: brightness(0) invert(1) opacity(0.92);
}
.bat-brand-claim {
  font-size: 1.05rem;
  font-weight: 700;
  color: white;
  margin: 4px 0 0;
}
.bat-brand-sub {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.6);
  line-height: 1.5;
  margin: 0;
  max-width: 240px;
}

/* ============================================================
   VISUAL POLISH — Allgemeine Aufwertungen
   ============================================================ */

/* Produktbereich-Sektion: Überschrift ohne section-head-Wrapper */
.brand-products > .container > h2,
.brand-products > .container > .section-title {
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 800;
  color: var(--dark);
  margin: 0 0 12px;
  text-align: center;
}
.brand-products > .container > p {
  text-align: center;
  color: var(--mid);
  margin: 0 0 40px;
  font-size: 1rem;
}

/* brand-about: Überschrift ohne section-head-Wrapper */
.brand-about > .container > h2 {
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 800;
  color: var(--dark);
  margin: 0 0 32px;
}

/* Verbesserte marken-card in Crosslink-Bereichen */
.marken-card img {
  transition: transform 0.3s ease;
}
.marken-card:hover img {
  transform: scale(1.05);
}

/* ============================================================
   FAQ ITEMS — details/summary-Style (Visual-Polish-Override)
   Diese Regeln überschreiben den Block ab Z.729 für Seiten
   die .faq-item direkt als details nutzen (ohne .faq-list)
   ============================================================ */
details.faq-item {
  background: var(--white);
  border-radius: 0 !important;
  border: 1.5px solid var(--border);
  border-left: 3px solid transparent;
  padding: 18px 24px;
  transition: border-left-color .2s;
}
details.faq-item[open] {
  border-left-color: var(--orange);
  box-shadow: none;
}
details.faq-item summary {
  font-size: 0.97rem;
  font-weight: 700;
  color: var(--dark);
  list-style: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
details.faq-item summary::after {
  content: '+';
  font-size: 1.4rem;
  color: var(--orange);
  flex-shrink: 0;
  font-weight: 300;
  transition: transform 0.2s;
}
details.faq-item[open] summary::after {
  content: '−';
}
.faq-body {
  padding-top: 12px;
}
.faq-body p {
  font-size: 0.87rem;
  color: var(--mid);
  line-height: 1.65;
  margin: 0;
}

/* ============================================================
   FLOATING ELEMENTS (wa-float, scroll-top — Fallback für
   Seiten die nur brand-style.css laden)
   ============================================================ */
.wa-float {
  position: fixed;
  bottom: 84px;
  right: 20px;
  width: 52px;
  height: 52px;
  background: #25d366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.5rem;
  text-decoration: none;
  box-shadow: 0 4px 20px rgba(37,211,102,0.35);
  z-index: 999;
  transition: var(--transition);
}
.wa-float:hover {
  background: #1aaf55;
  transform: scale(1.08);
  box-shadow: 0 6px 28px rgba(37,211,102,0.45);
}

/* ============================================================
   NEW TEMPLATE — SITE-HEADER / MAIN-NAV / NAV-TOGGLE
   (28 Seiten: BMW, Mercedes, VW, Ford, Porsche, PSA, JP Group,
    Opel, TRW, Pierburg, MANN-Filter, NGK, Lemförder,
    Valeo, Textar, Beru, Luk, Varta, Denso, Ferodo,
    Optimal, Corteco, Elring, Schaeffler, etc.)
   ============================================================ */
.site-header {
  background: var(--white);
  box-shadow: 0 2px 16px rgba(0,0,0,0.08);
  position: sticky;
  top: 0;
  z-index: 200;
}
.site-header .header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
  gap: 16px;
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
  gap: 16px;
}
.site-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}
.site-logo img {
  height: 40px;
  width: auto;
  object-fit: contain;
}
.main-nav ul {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.main-nav ul li a {
  color: var(--dark);
  text-decoration: none;
  font-weight: 500;
  padding: 8px 12px;
  border-radius: 0;
  transition: var(--transition);
  font-size: 0.9rem;
  display: block;
}
.main-nav ul li a:hover,
.main-nav ul li a.active {
  color: var(--orange);
  background: var(--orange-bg);
}
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  width: 40px;
  height: 40px;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--dark);
  border-radius: 2px;
  transition: var(--transition);
}

/* ============================================================
   NEW TEMPLATE — SITE-FOOTER
   (BMW, Mercedes, VW, Ford, Porsche, PSA, JP Group, Opel,
    TRW, Pierburg, MANN-Filter, NGK, Lemförder, etc.)
   ============================================================ */
.site-footer {
  background: var(--dark);
  color: rgba(255,255,255,0.65);
  padding: 60px 0 0;
}
.site-footer .footer-inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.site-footer .footer-col h4 {
  font-size: 0.88rem;
  font-weight: 700;
  color: rgba(255,255,255,0.9);
  margin: 0 0 16px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}
.site-footer .footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.site-footer .footer-col ul li a {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  transition: color 0.2s;
}
.site-footer .footer-col ul li a:hover {
  color: var(--orange);
}
.site-footer .footer-brand p {
  font-size: 0.87rem;
  line-height: 1.6;
  margin: 12px 0 12px;
  color: rgba(255,255,255,0.55);
}
.site-footer .footer-brand .footer-address {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.4);
  line-height: 1.6;
  margin: 0;
}
.site-footer .footer-brand .footer-address a {
  color: rgba(255,255,255,0.55);
  text-decoration: none;
}
.site-footer .footer-brand .footer-address a:hover {
  color: var(--orange);
}
.site-footer .footer-social {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}
.site-footer .footer-social a {
  width: 34px;
  height: 34px;
  background: rgba(255,255,255,0.07);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.65);
  text-decoration: none;
  font-size: 0.85rem;
  transition: var(--transition);
}
.site-footer .footer-social a:hover {
  background: var(--orange);
  color: white;
}
.site-footer .footer-bottom {
  text-align: center;
  padding: 20px 0;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.3);
  border-top: 1px solid rgba(255,255,255,0.05);
}
.site-footer .footer-bottom p {
  color: rgba(255,255,255,0.3);
}

/* ============================================================
   NEW TEMPLATE — BRAND CROSSLINK
   (.bcl-card, .bcl-brands flex, .bcl-services, .bcl-brand-list,
    .bcl-service-btns)
   ============================================================ */
.bcl-brands {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 32px;
  align-items: flex-start;
}
/* NEW crosslink grid (BMW/Porsche etc.) — .bcl-brands als flex-Zeile */
.brand-crosslink .bcl-brands {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.bcl-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: white;
  border: 1.5px solid var(--border);
  border-radius: 0;
  padding: 16px 20px;
  text-decoration: none;
  transition: border-color .2s;
  min-width: 90px;
  cursor: pointer;
}
.bcl-card:hover {
  border-color: var(--orange);
  box-shadow: none;
  transform: none;
}
.bcl-card img {
  width: 80px;
  height: 40px;
  object-fit: contain;
}
.bcl-card span {
  font-size: 0.78rem;
  color: var(--mid);
  font-weight: 500;
  text-align: center;
}
.bcl-brand-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bcl-brand-list li a {
  color: var(--mid);
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.2s;
  display: flex;
  align-items: center;
  gap: 8px;
}
.bcl-brand-list li a::before {
  content: '›';
  color: var(--orange);
  font-weight: 700;
}
.bcl-brand-list li a:hover {
  color: var(--orange);
}
.bcl-services {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}
.bcl-service-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}

/* ============================================================
   RESPONSIVE — NEW TEMPLATE
   ============================================================ */
@media (max-width: 900px) {
  .site-footer .footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
  .main-nav { display: none; }
  .nav-toggle { display: flex; }
  .main-nav.open {
    display: block;
    position: absolute;
    top: 70px;
    left: 0;
    right: 0;
    background: white;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    z-index: 300;
    padding: 16px 0;
  }
  .main-nav.open ul {
    flex-direction: column;
    gap: 0;
    padding: 0 16px;
  }
  .main-nav.open ul li a {
    padding: 12px 16px;
    border-radius: 0;
    border-bottom: 1px solid var(--border);
  }
}
@media (max-width: 640px) {
  .site-footer .footer-inner {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .site-header .header-inner,
  .site-header .container {
    height: 60px;
  }
  .bcl-brands { gap: 12px; }
  .bcl-card { min-width: 80px; padding: 12px 14px; }
}

/* ============================================================
   FIX 1: site-footer mit footer-GRID (TRW, NGK, Pierburg,
   MANN-Filter, Lemförder, Bilstein, Brembo, Hengst)
   Diese Seiten nutzen <div class="footer-grid"> statt footer-inner
   ============================================================ */
.site-footer .footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.site-footer .footer-grid .footer-col h4 {
  font-size: 0.88rem;
  font-weight: 700;
  color: rgba(255,255,255,0.9);
  margin: 0 0 16px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}
.site-footer .footer-grid .footer-col p {
  font-size: 0.87rem;
  color: rgba(255,255,255,0.55);
  line-height: 1.6;
  margin: 0 0 8px;
}
.site-footer .footer-grid .footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.site-footer .footer-grid .footer-col ul li a {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  transition: color 0.2s;
}
.site-footer .footer-grid .footer-col ul li a:hover {
  color: var(--orange);
}

/* marken.html nutzt auch footer-grid */
.footer.footer .footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 48px;
}

/* ============================================================
   FIX 2: brand-cta-section .bcs-inner — Text-Farben erzwingen
   Die .bcs-inner hat dunklen Gradient-Hintergrund, h2/p müssen weiß
   (überschreibt globale Oswald-Typografie die color:dark setzt)
   ============================================================ */
.brand-cta-section .bcs-inner > h2,
.brand-cta-section .bcs-inner h2 {
  color: white !important;
  font-size: clamp(1.3rem, 3vw, 1.9rem);
  font-weight: 800;
  margin: 0 0 12px;
  line-height: 1.25;
}
.brand-cta-section .bcs-inner > p,
.brand-cta-section .bcs-inner p {
  color: rgba(255,255,255,0.75) !important;
  font-size: 0.97rem;
  line-height: 1.7;
  margin: 0 0 24px;
}

/* ============================================================
   FIX 3: brand-about .bat-visual Farb-Fix
   .bat-visual hat dunklen Hintergrund — h3/p müssen weiß sein,
   Icons orangefarben
   ============================================================ */
.brand-about .bat-visual .bat-icon-box h3 {
  color: white !important;
}
.brand-about .bat-visual .bat-icon-box p {
  color: rgba(255,255,255,0.65) !important;
}
.brand-about .bat-visual .bat-big-icon {
  color: var(--orange-light) !important;
}

/* ============================================================
   FIX 4: btn-outline hover — weißer Schatten auf dunklem BG
   (überschreibt das schwarze multi-shadow aus style.css)
   ============================================================ */
.brand-hero .btn-outline:hover,
.brand-hero .bh-btn-outline:hover,
.brand-cta-section .btn-outline:hover,
.brand-cta-section .bcs-btn-outline:hover,
.brand-cta-strip .btn-outline:hover,
.brand-cta-strip .btn-outline-light:hover,
.brand-about-section .btn:hover,
.brand-hero .btn:hover {
  box-shadow:
    -1px  1px 0 rgba(255,255,255,0.5),
    -2px  2px 0 rgba(255,255,255,0.5),
    -3px  3px 0 rgba(255,255,255,0.5),
    -4px  4px 0 rgba(255,255,255,0.5),
    -5px  5px 0 rgba(255,255,255,0.5) !important;
}

/* ============================================================
   FIX 5: brand-products h2 — Überschrift-Alignment
   Seiten die direkt <h2> ohne .section-head nutzen
   ============================================================ */
.brand-products > .container > h2 {
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 800;
  color: var(--dark);
  margin: 0 0 12px;
  text-align: center;
}
.brand-products > .container > .section-sub,
.brand-products > .container > p.section-sub {
  text-align: center;
  margin-bottom: 40px;
  color: var(--mid);
}

/* ============================================================
   FIX 6: brand-faq h2 — section-title ohne section-head Wrapper
   ============================================================ */
.brand-faq > .container > h2,
.brand-faq > .container > .section-title {
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 800;
  color: var(--dark);
  margin: 0 0 32px;
  text-align: center;
}

/* ============================================================
   FIX 7: brand-delivery h2 — section-title ohne section-head
   ============================================================ */
.brand-delivery > .container > h2,
.brand-delivery > .container > .section-title {
  font-size: clamp(1.3rem, 3vw, 1.8rem);
  font-weight: 800;
  color: var(--dark);
  margin: 0 0 32px;
  text-align: center;
}

/* ============================================================
   FIX 8: brand-crosslink h2 + h3 — Farb- und Spacing-Fix
   ============================================================ */
.brand-crosslink > .container > h2,
.brand-crosslink > .container > .section-title {
  font-size: clamp(1.3rem, 3vw, 1.8rem);
  font-weight: 800;
  color: var(--dark);
  margin: 0 0 8px;
}
.brand-crosslink .bcl-brands h3,
.brand-crosslink .bcl-services h3 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--dark);
  margin: 0 0 16px;
}
.brand-crosslink > .container > .section-sub {
  color: var(--mid);
  margin-bottom: 32px;
}

/* ============================================================
   FIX 9: brand-about h2 — Farb-Fix für direkte h2-Überschriften
   ============================================================ */
.brand-about > .container > h2 {
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 800;
  color: var(--dark);
  margin: 0 0 32px;
}

/* ============================================================
   FIX 10: bh-stats .bh-stat auf dunklem Hero-Hintergrund
   Zahl: orange-light, Label: weiß/55%
   ============================================================ */
.bh-stats .bh-stat .bh-stat-val {
  display: block;
  font-size: 1.7rem;
  font-weight: 900;
  color: var(--orange-light);
  line-height: 1;
  font-family: 'Oswald', sans-serif;
}
.bh-stats .bh-stat .bh-stat-label {
  font-size: 0.73rem;
  color: rgba(255,255,255,0.6);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  display: block;
  margin-top: 4px;
}

/* ============================================================
   FIX 11: Hella CTA — .bcs-btn-outline, .bcs-wa-btn
   explizite Farb-Overrides damit globaler .btn-hover kein Problem macht
   ============================================================ */
.bcs-wa-btn,
a.bcs-wa-btn {
  background: #25d366 !important;
  background-color: #25d366 !important;
  color: white !important;
  border: none !important;
  border-radius: 0 !important;
}
.bcs-wa-btn:hover,
a.bcs-wa-btn:hover {
  background: #1aaf55 !important;
  background-color: #1aaf55 !important;
  color: white !important;
  box-shadow:
    -1px  1px 0 rgba(0,0,0,0.3),
    -2px  2px 0 rgba(0,0,0,0.3),
    -3px  3px 0 rgba(0,0,0,0.3),
    -4px  4px 0 rgba(0,0,0,0.3) !important;
}
.bcs-btn-outline,
a.bcs-btn-outline {
  background: transparent !important;
  background-color: transparent !important;
  color: white !important;
  border: 2px solid rgba(255,255,255,0.4) !important;
  border-radius: 0 !important;
}
.bcs-btn-outline:hover,
a.bcs-btn-outline:hover {
  background: rgba(255,255,255,0.12) !important;
  background-color: rgba(255,255,255,0.12) !important;
  color: white !important;
  border-color: rgba(255,255,255,0.75) !important;
  box-shadow:
    -1px  1px 0 rgba(255,255,255,0.3),
    -2px  2px 0 rgba(255,255,255,0.3),
    -3px  3px 0 rgba(255,255,255,0.3),
    -4px  4px 0 rgba(255,255,255,0.3) !important;
}

/* ============================================================
   FIX 12: brand-about-section (dunkler Hintergrund) — Heading-Farben
   ============================================================ */
.brand-about-section .bat-left h2 {
  color: white !important;
}
.brand-about-section .bat-left p {
  color: rgba(255,255,255,0.72) !important;
}
.brand-about-section .section-tag--light {
  background: rgba(255,255,255,0.13) !important;
  color: #ffffff !important;
  border-color: rgba(255,255,255,0.22) !important;
}

/* ============================================================
   FIX 13: topbar-inner container Layout-Fix
   Neue Template-Seiten nutzen .topbar-inner.container statt
   .topbar > .container > .topbar-inner
   ============================================================ */
.topbar-inner.container {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 8px;
  padding-bottom: 8px;
}

/* ============================================================
   FIX 14: Valeo Screenshot — .bh-badge mit Platzhaltertext-Fix
   Wenn img nicht lädt, soll Badge-Container nicht kollabieren
   ============================================================ */
.bh-inner .bh-badge {
  min-width: 120px;
  min-height: 80px;
}
.bh-inner .bh-badge img {
  max-width: 140px;
  max-height: 70px;
  object-fit: contain;
}

/* ============================================================
   FIX 15: bcl-grid Layout — Crosslink 2-Spalten-Grid
   (TRW, MANN-Filter, Pierburg, Lemförder nutzen .bcl-grid)
   ============================================================ */
.brand-crosslink .bcl-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 40px;
  align-items: start;
}

/* ============================================================
   FIX 16: RESPONSIVE — footer-grid + bcl-grid
   ============================================================ */
@media (max-width: 900px) {
  .site-footer .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
  .brand-crosslink .bcl-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}
@media (max-width: 640px) {
  .site-footer .footer-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .bh-stats { gap: 16px; flex-wrap: wrap; }
  .bh-ctas { flex-direction: column; gap: 10px; }
  .brand-cta-strip .bcs-inner { gap: 24px; }
  .brand-cta-section .bcs-inner { gap: 24px; }
}

/* ============================================================
   FIX 17: Section-Tag Lesbarkeit auf weißem Hintergrund
   section-tag hat orangenen Hintergrund + orangene Schrift — OK
   Aber manche Sektionen haben keinen section-head-Wrapper
   ============================================================ */
/* FIX 17 — section-tag auf Marken-Sektionen: jetzt global konsistent,
   diese Overrides nur noch für margin-bottom falls abweichend nötig */
.brand-products .section-tag,
.brand-faq .section-tag,
.brand-delivery .section-tag,
.brand-crosslink .section-tag {
  margin-bottom: 12px;
}

/* ============================================================
   FIX 18: .bat-grid in brand-about (weiße Sektion)
   bat-text h2/p brauchen dunkle Farben (nicht weiß)
   ============================================================ */
.brand-about .bat-grid .bat-text h2 {
  color: var(--dark) !important;
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  font-weight: 800;
  margin: 0 0 16px;
}
.brand-about .bat-grid .bat-text p {
  color: var(--mid) !important;
  font-size: 0.97rem;
  line-height: 1.7;
}
.brand-about .bat-grid .bat-list li {
  color: var(--dark-3) !important;
}
.brand-about .bat-grid .bat-list li i {
  color: var(--orange) !important;
}

/* ============================================================
   FIX 19: Valeo/Textar/Beru/Luk-Stil — bp-card Spacing
   Seiten ohne section-head brauchen Abstand vor dem Grid
   ============================================================ */
.brand-products .bp-grid {
  margin-top: 40px;
}
.brand-products .section-title + .section-sub + .bp-grid,
.brand-products .section-title + .bp-grid {
  margin-top: 32px;
}

/* ============================================================
   FIX 20: Valeo Screenshot — bat-brand-box img contrast
   Wenn Logo hell ist (wie valeo.png), braucht kein invert-filter
   Wenn Logo dunkel ist (wie bmw.svg), braucht invert
   — Remove blanket invert, nutze spezifischeres Targeting
   ============================================================ */
.bat-visual .bat-brand-box img {
  /* Standard: kein Filter — Logo bleibt originalfarbig auf dunklem BG */
  filter: none;
  max-width: 120px;
  max-height: 80px;
  width: auto;
  height: auto;
  object-fit: contain;
}
/* Für SVG-Logos (bmw.svg, sachs.svg etc.) die dunkel sind:
   Inline-Style oder spezifische Klasse nötig. Globaler invert entfernt. */

/* ============================================================
   TEMPLATE-4 STYLES — valeo.html, textar.html, beru.html, luk.html
   varta.html, denso.html, ferodo.html, optimal.html, corteco.html,
   elring.html, schaeffler.html und weitere neue Template-4-Seiten.

   Struktur:
   - .topbar-inner (direkt auf .topbar, kein .container)
   - .site-header > .header-inner (kein .container)
   - .brand-hero-inner / .brand-hero-content
   - .brand-badge + .brand-badge-label
   - .brand-stats > .brand-stat (stat-value / stat-label)
   - .brand-hero-ctas
   - .brand-products > .section-inner > .product-cards > .product-card
   - .brand-about > .section-inner > .bat-grid > .bat-text / .bat-visual
   - .bat-visual-card
   - .brand-cta > .section-inner > .bcs-inner
   - .brand-faq > .section-inner > .faq-list > details.faq-item
   - .brand-delivery > .section-inner > .ta-delivery-cards
   - .brand-crosslinks > .section-inner > .crosslink-grid > .crosslink-card
   - .crosslink-services > .service-btn
   - .site-footer > .footer-inner (ohne .container)
   ============================================================ */

/* ── section-inner (Container für Template-4) ──────────────── */
.section-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ── .brand-hero (Template-4 Override) ─────────────────────── */
.brand-hero .brand-hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 48px;
  min-height: inherit;
}
.brand-hero .brand-hero-content {
  flex: 1;
  max-width: 700px;
}

/* ── .brand-badge (Template-4 Hero Logo-Badge) ──────────────── */
.brand-badge {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}
.brand-logo-hero {
  max-width: 120px;
  max-height: 60px;
  width: auto;
  height: auto;
  object-fit: contain;
  /* Filter entfernt: brightness(0) invert(1) machte farbige SVGs (luk, beru) unsichtbar.
     Logos werden nativ gerendert; weißer Hero-Hintergrund der .brand-badge-box
     stellt ausreichenden Kontrast sicher. */
  filter: none;
}
.brand-badge-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-left: 3px solid var(--orange, #D4621A);
  padding: 4px 12px;
  border-radius: 0;
}

/* ── .brand-hero-h1 / .brand-hero-sub ──────────────────────── */
.brand-hero-h1 {
  font-family: 'Oswald', sans-serif;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 700;
  color: #ffffff;
  line-height: 1.15;
  margin: 0 0 16px;
}
.brand-hero-sub {
  font-size: 1rem;
  color: rgba(255,255,255,0.75);
  line-height: 1.65;
  margin: 0 0 28px;
  max-width: 600px;
}

/* ── .brand-stats (Template-4) ──────────────────────────────── */
.brand-stats {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: 32px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.brand-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.stat-value {
  font-family: 'Oswald', sans-serif;
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--orange-light);
  line-height: 1;
}
.brand-hero-sub + .brand-stats .stat-value,
.brand-stats .stat-value {
  color: var(--orange-light);
}
.stat-label {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.6);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ── .brand-hero-ctas (Template-4) ─────────────────────────── */
.brand-hero-ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}
.brand-hero-ctas .btn-whatsapp {
  background: #25d366 !important;
  color: white !important;
  border: none !important;
  padding: 12px 20px;
}
.brand-hero-ctas .btn-whatsapp:hover {
  background: #1aaf55 !important;
}
.brand-hero-ctas .btn-phone {
  background: transparent !important;
  color: rgba(255,255,255,0.85) !important;
  border: 2px solid rgba(255,255,255,0.35) !important;
  padding: 12px 20px;
}
.brand-hero-ctas .btn-phone:hover {
  background: rgba(255,255,255,0.1) !important;
  color: white !important;
}

/* ── .brand-products (Template-4) ─────────────────────────── */
.brand-products .section-inner {
  padding-top: 64px;
  padding-bottom: 64px;
}
.brand-products .section-inner > .section-title {
  font-family: 'Oswald', sans-serif;
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: var(--dark);
  margin: 0 0 8px;
  text-align: center;
}
.brand-products .section-inner > .section-sub {
  font-size: 0.97rem;
  color: var(--mid);
  text-align: center;
  margin: 0 0 40px;
}
.product-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 24px;
  margin-top: 40px;
}
.product-card {
  background: #fff;
  border: 1px solid #e8e8f0;
  border-left: 3px solid transparent;
  border-radius: 0;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: none;
  transition: border-left-color .2s;
}
.product-card:hover {
  border-left-color: var(--orange);
  box-shadow: none;
  transform: none;
}
.product-card-icon {
  width: 48px;
  height: 48px;
  background: rgba(212,98,26,0.1);
  border-left: 3px solid var(--orange);
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: var(--orange);
}
.product-card-title {
  font-family: 'Oswald', sans-serif;
  font-size: 1.1rem;
  color: var(--dark);
  margin: 0;
  line-height: 1.3;
}
.product-card-desc {
  font-size: 0.88rem;
  color: var(--mid);
  line-height: 1.6;
  margin: 0;
  flex: 1;
}
.product-card-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.product-card-features li {
  font-size: 0.82rem;
  color: #555;
  padding-left: 16px;
  position: relative;
}
.product-card-features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--orange);
  font-weight: 700;
}
.product-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--orange);
  text-decoration: none;
  margin-top: auto;
  transition: gap 0.2s;
}
.product-card-cta:hover {
  gap: 10px;
  color: var(--orange-light);
}

/* ── .brand-about (Template-4) — .bat-visual-card ─────────── */
.bat-visual-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  padding: 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}
.bat-visual-card:last-child {
  margin-bottom: 0;
}
.bat-visual-icon {
  width: 40px;
  height: 40px;
  background: rgba(212,98,26,0.2);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: var(--orange-light);
}
.bat-visual-card h4 {
  font-family: 'Oswald', sans-serif;
  font-size: 1rem;
  color: white !important;
  margin: 0;
}
.bat-visual-card p {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.6) !important;
  margin: 0;
  line-height: 1.5;
}

/* ── .brand-cta (Template-4 — section.brand-cta, nicht brand-cta-section) */
.brand-cta {
  background: linear-gradient(135deg, var(--dark) 0%, #1e1e38 100%);
  padding: 64px 0;
}
.brand-cta .section-inner {
  text-align: center;
}
.brand-cta .bcs-inner {
  max-width: 680px;
  margin: 0 auto;
}
.brand-cta .bcs-title {
  font-family: 'Oswald', sans-serif;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  color: white !important;
  margin: 0 0 16px;
  line-height: 1.2;
}
.brand-cta .bcs-sub {
  font-size: 0.97rem;
  color: rgba(255,255,255,0.72) !important;
  line-height: 1.65;
  margin: 0 0 32px;
}
.brand-cta .bcs-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
.brand-cta .bcs-buttons .btn-whatsapp {
  background: #25d366 !important;
  color: white !important;
  border: none !important;
}
.brand-cta .bcs-buttons .btn-whatsapp:hover {
  background: #1aaf55 !important;
}
.brand-cta .bcs-buttons .btn-outline {
  background: transparent !important;
  color: rgba(255,255,255,0.85) !important;
  border: 2px solid rgba(255,255,255,0.35) !important;
}
.brand-cta .bcs-buttons .btn-outline:hover {
  background: rgba(255,255,255,0.1) !important;
  color: white !important;
  box-shadow: none !important;
}
.brand-cta .bcs-note {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.45);
  margin-top: 20px;
}
.brand-cta .bcs-note a {
  color: var(--orange-light);
  text-decoration: underline;
}

/* ── .brand-faq (Template-4 — details/summary FAQ) ─────────── */
.brand-faq .section-inner {
  padding-top: 64px;
  padding-bottom: 64px;
}
.brand-faq .faq-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-radius: 0;
  overflow: hidden;
  border: 1px solid #e0e0ee;
  margin-top: 32px;
}
.brand-faq .faq-item {
  border-bottom: 1px solid #e0e0ee;
  background: #fff;
}
.brand-faq .faq-item:last-child {
  border-bottom: none;
}
.brand-faq .faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 24px;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--dark);
  list-style: none;
  user-select: none;
}
.brand-faq .faq-question::-webkit-details-marker {
  display: none;
}
.brand-faq .faq-question::after {
  content: '+';
  font-size: 1.3rem;
  color: var(--orange);
  flex-shrink: 0;
  font-weight: 300;
}
.brand-faq details[open] > .faq-question::after {
  content: '−';
}
.brand-faq .faq-answer {
  padding: 0 24px 20px;
}
.brand-faq .faq-answer p {
  font-size: 0.9rem;
  color: var(--mid);
  line-height: 1.65;
  margin: 0;
}

/* ── .brand-delivery (Template-4) ─────────────────────────── */
.brand-delivery {
  background: var(--light);
}
.brand-delivery .section-inner {
  padding-top: 64px;
  padding-bottom: 64px;
}
.brand-delivery .section-title {
  font-family: 'Oswald', sans-serif;
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  color: var(--dark);
  text-align: center;
  margin: 0 0 8px;
}
.brand-delivery .section-sub {
  font-size: 0.97rem;
  color: var(--mid);
  text-align: center;
  margin: 0 0 40px;
}
.ta-delivery-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
  margin-top: 40px;
}
.ta-delivery-card {
  background: #fff;
  border: 1px solid #e0e0ee;
  border-left: 3px solid transparent;
  border-radius: 0;
  padding: 28px 22px;
  position: relative;
  transition: border-left-color .2s;
}
.ta-delivery-card--featured {
  border-color: var(--orange);
  border-left-color: var(--orange);
  box-shadow: none;
}
.ta-delivery-icon {
  width: 44px;
  height: 44px;
  background: rgba(212,98,26,0.1);
  border-left: 3px solid var(--orange);
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: var(--orange);
  margin-bottom: 14px;
}
.ta-delivery-title {
  font-family: 'Oswald', sans-serif;
  font-size: 1.05rem;
  color: var(--dark);
  margin: 0 0 8px;
}
.ta-delivery-desc {
  font-size: 0.87rem;
  color: var(--mid);
  line-height: 1.6;
  margin: 0;
}
.ta-delivery-badge {
  display: inline-block;
  margin-top: 12px;
  background: var(--orange);
  color: white;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ── .brand-crosslinks (Template-4) ────────────────────────── */
.brand-crosslinks {
  background: #fff;
  padding: 64px 0;
}
.brand-crosslinks .section-inner > .section-title {
  font-family: 'Oswald', sans-serif;
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  color: var(--dark);
  text-align: center;
  margin: 0 0 40px;
}
.crosslink-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
  margin-bottom: 32px;
}
.crosslink-card {
  background: #f7f8fa;
  border: 1px solid #e0e0ee;
  border-left: 3px solid transparent;
  border-radius: 0;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-decoration: none;
  transition: border-left-color .2s, border-color .2s;
}
.crosslink-card:hover {
  border-color: var(--orange);
  border-left-color: var(--orange);
  box-shadow: none;
  transform: none;
}
.crosslink-icon {
  width: 40px;
  height: 40px;
  background: rgba(212,98,26,0.1);
  border-left: 3px solid var(--orange);
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: var(--orange);
}
.crosslink-title {
  font-family: 'Oswald', sans-serif;
  font-size: 1rem;
  color: var(--dark);
  margin: 0;
}
.crosslink-desc {
  font-size: 0.82rem;
  color: var(--mid);
  line-height: 1.5;
  margin: 0;
}
.crosslink-services {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 12px;
}
.service-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #f0f1f3;
  color: var(--dark);
  border: 1px solid #ddd;
  border-radius: 0;
  padding: 10px 18px;
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.service-btn:hover {
  background: var(--orange);
  color: white;
  border-color: var(--orange);
}
.service-btn i {
  font-size: 0.9rem;
}

/* ── site-footer (Template-4 — footer-inner OHNE .container) */
.site-footer > .footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}

/* ── .header-cta (Template-4 Headerbereich) ─────────────────── */
.header-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--orange);
  color: white;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s;
  flex-shrink: 0;
}
.header-cta:hover {
  background: var(--orange-light);
}

/* ── .topbar-item (Template-4 Topbar) ──────────────────────── */
.topbar-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.75);
}
.topbar-item a {
  color: rgba(255,255,255,0.85);
  text-decoration: none;
}
.topbar-item a:hover {
  color: var(--orange-light);
}

/* ── .btn-large (Template-4 large CTA-Buttons) ──────────────── */
.btn.btn-large,
.btn-large {
  padding: 14px 28px;
  font-size: 1rem;
}

/* ── .logo-accent (Template-4 Footer NORTEK24 Schrift) ──────── */
.footer-logo .logo-accent,
.logo-accent {
  color: var(--orange);
}
.footer-logo {
  font-family: 'Oswald', sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: white;
  text-decoration: none;
  letter-spacing: 0.04em;
}
.footer-desc {
  font-size: 0.87rem;
  color: rgba(255,255,255,0.55);
  line-height: 1.65;
  margin: 14px 0 20px;
}
.footer-phone {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: rgba(255,255,255,0.7);
  font-size: 0.88rem;
  text-decoration: none;
  transition: color 0.2s;
}
.footer-phone:hover {
  color: var(--orange-light);
}

/* ── Template-4 responsive ─────────────────────────────────── */
@media (max-width: 900px) {
  .brand-hero .brand-hero-inner {
    flex-direction: column;
    gap: 32px;
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .product-cards {
    grid-template-columns: 1fr 1fr;
  }
  .crosslink-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 640px) {
  .product-cards {
    grid-template-columns: 1fr;
  }
  .brand-stats {
    gap: 20px;
  }
  .brand-hero-ctas {
    flex-direction: column;
  }
  .brand-hero-ctas .btn {
    width: 100%;
    justify-content: center;
  }
  .crosslink-grid {
    grid-template-columns: 1fr;
  }
  .ta-delivery-cards {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   FIX VALEO/TEXTAR LOGO-PFAD-KOMPENSATION
   valeo.html + textar.html referenzieren ../img/logos/*.svg
   was 404 ergibt. Die brand-logo-hero bekommt ein onerror-
   Fallback im HTML (bereits vorhanden). Zusätzlich: Hide
   broken img gracefully.
   ============================================================ */
.brand-logo-hero[src=""],
.brand-logo-hero:not([src]) {
  display: none;
}
/* Bei fehlendem Bild zeige Fallback-Text im brand-badge */
.brand-badge:not(:has(.brand-logo-hero[style*="display: none"])) .brand-badge-label {
  /* Normal sichtbar */
}

/* ============================================================
   FIX LEISTUNGEN.HTML — CTA Box auf dunklem Bg
   Inline-Style dark BG mit white h2/p via direktem CSS ergänzt
   ============================================================ */
.brand-cta-section .bcs-inner h2,
.brand-cta-section .bcs-inner > h2 {
  color: white !important;
}

/* ============================================================
   FIX MARKEN.HTML — .marken-hero .btn-outline (auf dunklem BG)
   ============================================================ */
.marken-hero .btn-outline {
  color: white !important;
  border-color: rgba(255,255,255,0.5) !important;
}
.marken-hero .btn-outline:hover {
  background: rgba(255,255,255,0.12) !important;
  box-shadow: none !important;
}

/* ============================================================
   FIX 21: brand-hero-title — Alias für corteco/elring/schaeffler
   Diese Seiten nutzen .brand-hero-title statt .brand-hero-h1
   ============================================================ */
.brand-hero-title {
  font-family: 'Oswald', sans-serif;
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 700;
  color: white;
  line-height: 1.2;
  margin: 0 0 16px;
}

/* ============================================================
   FIX 22: brand-badge als reiner Text-Node (corteco/elring/schaeffler)
   Kein flex-row nötig — simpler Block mit Pill-Optik
   ============================================================ */
.brand-hero .brand-badge:not(:has(.brand-badge-label)) {
  display: inline-block;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.22);
  color: rgba(255,255,255,0.85);
  font-size: 0.82rem;
  font-weight: 700;
  padding: 6px 16px;
  border-radius: 50px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 20px;
}

/* ============================================================
   FIX 23: .btn-outline auf dark brand-hero
   corteco/elring/schaeffler: Hero hat kein inline-style BG
   → Standardstyle von brand-style muss override liefern
   ============================================================ */
.brand-hero .btn-outline,
.brand-hero .btn.btn-outline {
  color: white !important;
  border-color: rgba(255,255,255,0.45) !important;
  background: transparent !important;
}
.brand-hero .btn-outline:hover,
.brand-hero .btn.btn-outline:hover {
  background: rgba(255,255,255,0.12) !important;
  border-color: rgba(255,255,255,0.7) !important;
  box-shadow: none !important;
}

/* ============================================================
   FIX 24: product-card h3 raw (corteco/elring/schaeffler)
   Kein .product-card-title, einfaches h3 im .product-card
   ============================================================ */
.product-card > h3 {
  font-family: 'Oswald', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--dark);
  margin: 0 0 12px;
  line-height: 1.3;
}
.product-card > p {
  font-size: 0.88rem;
  color: var(--mid);
  line-height: 1.6;
  margin: 0 0 12px;
}
.product-card .product-features,
.product-card ul {
  list-style: none;
  padding: 0;
  margin: 12px 0;
}
.product-card .product-features li,
.product-card ul:not(.prod-list) li {
  font-size: 0.85rem;
  color: var(--mid);
  padding: 5px 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
.product-card .product-features li::before,
.product-card ul:not(.prod-list) li::before {
  content: "✓";
  color: var(--orange);
  font-weight: 700;
  flex-shrink: 0;
}
.product-card .btn-outline.btn-sm,
.product-card > a.btn {
  margin-top: auto;
  align-self: flex-start;
}

/* ============================================================
   FIX 25: brand-cta section (Template-4) h2/p weißer Text
   Gilt für .brand-cta (section, nicht .brand-cta-section)
   corteco/elring/schaeffler/valeo/textar/beru/luk/denso/ferodo/optimal
   ============================================================ */
.brand-cta h2,
.brand-cta .bcs-title,
section.brand-cta h2 {
  color: white !important;
}
.brand-cta p,
.brand-cta .bcs-sub,
section.brand-cta p {
  color: rgba(255,255,255,0.75) !important;
}
.brand-cta .bcs-inner {
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}
.brand-cta .bcs-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 32px;
}

/* ============================================================
   FIX 26: Hella bcs-btn-outline Focus/Hover-Sichtbarkeit
   Fokusrahmen auf dark BG braucht weißen outline
   ============================================================ */
.bcs-btn-outline:focus,
.bcs-btn-outline:focus-visible {
  outline: 3px solid rgba(255,255,255,0.7) !important;
  outline-offset: 2px !important;
}
.bcs-btn-outline:hover {
  background: rgba(255,255,255,0.12) !important;
  border-color: rgba(255,255,255,0.7) !important;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.15) !important;
}
/* bcs-wa-btn hover */
.bcs-wa-btn:hover {
  background: #20ba58 !important;
  box-shadow: 0 4px 12px rgba(37,211,102,0.35) !important;
}

/* ============================================================
   FIX 27: Hella .bh-btn-outline (Hero Outline-Button)
   Im .brand-hero auf dunkel — weiß, kein schwarzer Hover-Shadow
   ============================================================ */
.bh-btn-outline,
.btn.bh-btn-outline {
  color: white !important;
  border-color: rgba(255,255,255,0.4) !important;
  background: transparent !important;
}
.bh-btn-outline:hover,
.btn.bh-btn-outline:hover {
  background: rgba(255,255,255,0.12) !important;
  border-color: rgba(255,255,255,0.65) !important;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.12), 0 2px 8px rgba(0,0,0,0.2) !important;
  color: white !important;
}
.bh-btn-outline:focus,
.bh-btn-outline:focus-visible {
  outline: 3px solid rgba(255,255,255,0.6) !important;
  outline-offset: 2px !important;
}

/* ============================================================
   FIX 28: Template-4 — btn-whatsapp + btn-phone global
   Für denso/ferodo/optimal/beru/luk/valeo/textar hero CTAs
   ============================================================ */
.btn-whatsapp,
a.btn-whatsapp {
  background: #25d366 !important;
  color: white !important;
  border: none !important;
}
.btn-whatsapp:hover,
a.btn-whatsapp:hover {
  background: #1da851 !important;
  color: white !important;
  box-shadow: 0 4px 14px rgba(37,211,102,0.35) !important;
}
.btn-phone,
a.btn-phone {
  background: transparent !important;
  color: white !important;
  border: 1.5px solid rgba(255,255,255,0.4) !important;
}
.btn-phone:hover,
a.btn-phone:hover {
  background: rgba(255,255,255,0.1) !important;
  border-color: rgba(255,255,255,0.65) !important;
  box-shadow: none !important;
}

/* ============================================================
   FIX 29: corteco/elring/schaeffler — section.brand-hero
   fehlt background-style (kein inline). Fallback dunkler BG
   damit Text (weiß) immer lesbar bleibt.
   ============================================================ */
section.brand-hero:not([style]) {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 60%, #0f3460 100%);
}

/* ============================================================
   FIX 30: brand-products .section-inner padding (Template-4 corteco etc.)
   ============================================================ */
.brand-products .section-inner {
  padding-top: 64px;
  padding-bottom: 64px;
}
.brand-products .section-title {
  font-family: 'Oswald', sans-serif;
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: var(--dark);
  margin: 0 0 8px;
}
.brand-products .section-sub {
  color: var(--mid);
  font-size: 0.97rem;
  margin: 0 0 40px;
  max-width: 640px;
}

/* ============================================================
   FIX 31: Hella — vollständige Button-Korrekturen
   Problem: .bcs-btn-outline base fehlte background:transparent
            .bcs-wa-btn fehlte border:none + !important auf bg
            .bh-btn-outline border fehlte bei brand-hero (T1)
   ============================================================ */

/* bcs-btn-outline: Base komplett korrekt (transparent, weißer Rand, weißer Text) */
.bcs-btn-outline,
a.bcs-btn-outline,
.btn.bcs-btn-outline {
  background: transparent !important;
  background-color: transparent !important;
  color: white !important;
  border: 1.5px solid rgba(255,255,255,0.45) !important;
  border-radius: 0 !important;
}

/* bcs-wa-btn: Grün mit !important — schlägt globalen .btn orange */
.bcs-wa-btn,
a.bcs-wa-btn,
.btn.bcs-wa-btn {
  background: #25d366 !important;
  background-color: #25d366 !important;
  color: white !important;
  border: none !important;
}
.bcs-wa-btn:hover,
a.bcs-wa-btn:hover,
.btn.bcs-wa-btn:hover {
  background: #1da851 !important;
  background-color: #1da851 !important;
  box-shadow: 0 4px 14px rgba(37,211,102,0.4) !important;
}

/* Hella brand-hero hat class="brand-hero" (T1), Hero-Hintergrund kommt aus style.css
   Die .bh-btn-outline braucht explizit border als !important Override */
.brand-hero .bh-btn-outline,
.brand-hero .btn.bh-btn-outline {
  background: transparent !important;
  background-color: transparent !important;
  color: white !important;
  border: 1.5px solid rgba(255,255,255,0.4) !important;
  border-radius: 0 !important;
}
.brand-hero .bh-btn-outline:hover,
.brand-hero .btn.bh-btn-outline:hover {
  background: rgba(255,255,255,0.12) !important;
  border-color: rgba(255,255,255,0.7) !important;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.1), 0 2px 8px rgba(0,0,0,0.2) !important;
  color: white !important;
}

/* bcs-list li strong — Lesbarkeit auf dark BG */
.bcs-list li strong { color: white; }

/* Hella bh-stat span — etwas besser lesbar (von 0.55 auf 0.72 opacity) */
.bh-stats .bh-stat span { color: rgba(255,255,255,0.72) !important; }

/* brand-hero Hella: .bh-highlight auf dark background */
.brand-hero .bh-highlight { color: var(--orange-light); }

/* bcs-btn-outline Hover-State (bereits in FIX 26, hier verstärkt für T1) */
.brand-cta-section .bcs-btn-outline:hover {
  background: rgba(255,255,255,0.12) !important;
  border-color: rgba(255,255,255,0.7) !important;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.12) !important;
}

/* bcs-btn-outline Active State */
.bcs-btn-outline:active,
a.bcs-btn-outline:active {
  background: rgba(255,255,255,0.18) !important;
  transform: scale(0.98);
}

/* bcs-wa-btn Active State */
.bcs-wa-btn:active,
a.bcs-wa-btn:active {
  background: #17a34a !important;
  transform: scale(0.98);
}

/* ============================================================
   FIX bh-inner .bh-content — Alternative Klasse für
   Bilstein/Brembo/Hengst: bh-content statt bh-text
   ============================================================ */
.bh-inner .bh-content {
  flex: 1;
}
.bh-inner .bh-content .bh-h1 {
  font-family: 'Oswald', sans-serif;
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight: 700;
  color: white;
  margin: 0 0 16px;
  line-height: 1.2;
}
.bh-inner .bh-content .bh-sub {
  font-size: 0.97rem;
  color: rgba(255,255,255,0.75);
  line-height: 1.65;
  margin: 0 0 24px;
}
.bh-inner .bh-content .bh-ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* ============================================================
   FIX 32: Mobile 375px Audit — Fixes für alle Template-Typen
   Priorisierte Seiten: denso, corteco, elring, schaeffler,
   ferodo, optimal, luk, valeo, textar, beru, hella
   ============================================================ */

/* 375px — Anti-Overflow global */
@media (max-width: 400px) {
  /* Verhindert horizontalen Overflow auf allen Brand-Seiten */
  body { overflow-x: hidden; }
  .brand-hero,
  .brand-hero-inner,
  .section-inner,
  .bcs-inner,
  .bh-inner { width: 100%; box-sizing: border-box; }

  /* T4 Hero-Content: Schriftgrößen und Padding für 375px */
  .brand-hero-inner {
    padding: 48px 16px 40px !important;
  }
  .brand-hero-h1,
  .brand-hero-title {
    font-size: clamp(1.4rem, 6vw, 1.9rem) !important;
  }
  .brand-hero-sub {
    font-size: 0.88rem !important;
    line-height: 1.6 !important;
  }

  /* T4 Brand-Stats: 2×2 Grid auf kleinen Screens */
  .brand-stats {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
  }
  .brand-stat {
    text-align: center;
  }
  .stat-value {
    font-size: 1.5rem !important;
  }
  .stat-label {
    font-size: 0.72rem !important;
  }

  /* T4 Hero CTAs: Full-width Buttons gestapelt */
  .brand-hero-ctas {
    flex-direction: column !important;
    gap: 10px !important;
  }
  .brand-hero-ctas .btn {
    width: 100% !important;
    justify-content: center !important;
    padding: 12px 16px !important;
    font-size: 0.88rem !important;
  }

  /* T4 Product Cards: Single Column */
  .product-cards {
    grid-template-columns: 1fr !important;
  }
  .product-card {
    padding: 20px 16px !important;
  }

  /* Hella + T1 bh-inner: Stack-Layout */
  .bh-inner {
    flex-direction: column !important;
    gap: 20px !important;
    padding: 0 16px !important;
  }
  .bh-logo-wrap {
    max-width: 120px !important;
    margin: 0 auto !important;
  }
  .bh-text h1 {
    font-size: clamp(1.3rem, 6vw, 1.8rem) !important;
    line-height: 1.25 !important;
  }
  .bh-lead {
    font-size: 0.88rem !important;
    line-height: 1.6 !important;
  }

  /* Hella bh-stats: 2×2 Grid */
  .bh-stats {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }
  .bh-stat strong { font-size: 1.2rem !important; }
  .bh-stat span { font-size: 0.7rem !important; }

  /* Hella bh-actions: Full-width Stack */
  .bh-actions {
    flex-direction: column !important;
    gap: 10px !important;
  }
  .bh-actions .btn {
    width: 100% !important;
    justify-content: center !important;
    font-size: 0.88rem !important;
  }

  /* CTA-Section bcs-inner auf 375px */
  .bcs-inner {
    padding: 24px 14px !important;
    gap: 20px !important;
  }
  .bcs-text h2 {
    font-size: 1.2rem !important;
  }
  .bcs-text p {
    font-size: 0.84rem !important;
  }
  .bcs-actions {
    flex-direction: column !important;
    gap: 10px !important;
  }
  .bcs-actions .btn,
  .bcs-actions a.btn,
  .bcs-actions .bcs-btn-outline,
  .bcs-actions .bcs-wa-btn {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 12px 16px !important;
  }

  /* Crosslink-Grid: Single Column */
  .crosslink-grid {
    grid-template-columns: 1fr !important;
  }

  /* Delivery Cards: Single Column */
  .ta-delivery-cards,
  .ta-delivery-grid {
    grid-template-columns: 1fr !important;
  }
  .ta-delivery-card {
    padding: 20px 16px !important;
  }

  /* Section Inner padding reduziert */
  .section-inner {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* T6 brand-hero-title (mobile) */
  .brand-hero-title {
    font-size: clamp(1.3rem, 6vw, 1.8rem) !important;
  }

  /* Footer auf 375px — Responsive Spalten auf .footer-new-grid (korrekter Grid-Container) */
  .footer-new-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .footer-bottom {
    flex-direction: column !important;
    gap: 6px !important;
    text-align: center !important;
  }
}

/* ============================================================
   ██████╗ ██████╗ ███████╗███╗   ███╗██╗██╗   ██╗███╗   ███╗
   ██╔══██╗██╔══██╗██╔════╝████╗ ████║██║██║   ██║████╗ ████║
   ██████╔╝██████╔╝█████╗  ██╔████╔██║██║██║   ██║██╔████╔██║
   ██╔═══╝ ██╔══██╗██╔══╝  ██║╚██╔╝██║██║██║   ██║██║╚██╔╝██║
   ██║     ██║  ██║███████╗██║ ╚═╝ ██║██║╚██████╔╝██║ ╚═╝ ██║
   ╚═╝     ╚═╝  ╚═╝╚══════╝╚═╝     ╚═╝╚═╝ ╚═════╝ ╚═╝     ╚═╝

   PREMIUM VISUAL POLISH — nortek24.de
   Senior Design Director Pass — 2026-06-08
   Ziel: Modern, wertig, premium, conversion-stark
   Scope: brand-style.css globale Overrides
   ============================================================ */

/* ─────────────────────────────────────────────────────────────
   PP-01: GLOBALER BUTTON-SYSTEM OVERRIDE
   Problem: style.css .btn:hover → 8-Step-Schwarz-Shadow = Retro,
   nicht premium. Ersatz durch moderne Transition + subtiler Lift.
   ─────────────────────────────────────────────────────────────*/
.btn {
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease !important;
  letter-spacing: 0.02em;
}
.btn:hover {
  box-shadow: none !important;
  transform: none !important;
}
.btn:active {
  transform: translateY(1px) !important;
  box-shadow: none !important;
}
.btn:focus-visible {
  outline: 3px solid var(--orange-light) !important;
  outline-offset: 3px !important;
}

/* btn-primary Premium */
.btn-primary,
a.btn-primary,
.btn.btn-primary {
  background: linear-gradient(135deg, #B8521A 0%, #9e4415 100%) !important;
  color: white !important;
  border: none !important;
  border-radius: 0 !important;
  font-weight: 700 !important;
  padding: 12px 24px !important;
  font-size: 0.95rem !important;
  box-shadow: none !important;
}
.btn-primary:hover,
a.btn-primary:hover,
.btn.btn-primary:hover {
  background: linear-gradient(135deg, #9e4415 0%, #8a3b12 100%) !important;
  box-shadow: none !important;
  transform: none !important;
  color: white !important;
}

/* btn-outline-light / bh-btn-outline auf dunklen Heroes */
.btn-outline,
.btn.btn-outline {
  border-radius: 0 !important;
  border: 1.5px solid rgba(255,255,255,0.5) !important;
  background: transparent !important;
  color: rgba(255,255,255,0.88) !important;
}
.btn-outline:hover,
.btn.btn-outline:hover {
  background: rgba(255,255,255,0.10) !important;
  border-color: rgba(255,255,255,0.75) !important;
  box-shadow: none !important;
  transform: none !important;
}

/* ─────────────────────────────────────────────────────────────
   PP-02: BRAND-HERO T1 — Logo-Box Premium
   Weißes Panel + Tiefe + subtiler Hover-Glow
   ─────────────────────────────────────────────────────────────*/
.bh-logo-wrap {
  background: white !important;
  border-radius: 0 !important;
  padding: 28px 36px !important;
  box-shadow: none !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-left: 3px solid var(--orange) !important;
  transition: border-left-color 0.3s ease !important;
}
.bh-logo-wrap:hover {
  box-shadow: none !important;
  transform: none !important;
}
.bh-logo-img {
  max-width: 180px !important;
  max-height: 90px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
}

/* ─────────────────────────────────────────────────────────────
   PP-03: BRAND-HERO T1 — Texte + Hierarchie
   H1 klarer, bh-lead besser lesbar, bh-badge premium
   ─────────────────────────────────────────────────────────────*/
.brand-hero {
  position: relative;
  overflow: hidden;
}
.brand-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 80% at 75% 50%, rgba(212,98,26,0.08) 0%, transparent 60%),
    radial-gradient(ellipse 40% 50% at 15% 20%, rgba(255,255,255,0.03) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}
.brand-hero > * { position: relative; z-index: 1; }

/* T1 hero H1 */
.bh-text h1 {
  font-family: 'Oswald', sans-serif !important;
  font-size: clamp(1.8rem, 3.5vw, 2.6rem) !important;
  font-weight: 700 !important;
  color: white !important;
  line-height: 1.2 !important;
  margin: 0 0 16px !important;
  letter-spacing: -0.01em;
}
.bh-highlight {
  color: var(--orange-light) !important;
}
.bh-lead {
  color: rgba(255,255,255,0.82) !important;
  font-size: 1rem !important;
  line-height: 1.7 !important;
  max-width: 540px;
  margin: 0 0 28px !important;
}
.bh-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(212,98,26,0.18) !important;
  border-top: 1px solid rgba(212,98,26,0.35) !important;
  border-right: 1px solid rgba(212,98,26,0.35) !important;
  border-bottom: 1px solid rgba(212,98,26,0.35) !important;
  border-left: 3px solid var(--orange) !important;
  color: #FFB07A !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  padding: 6px 14px !important;
  border-radius: 0 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  margin-bottom: 20px !important;
}

/* ─────────────────────────────────────────────────────────────
   PP-04: BH-STATS Premium — Zahlen-KPI besser inszeniert
   ─────────────────────────────────────────────────────────────*/
.bh-stats {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  margin: 28px 0 32px;
  padding: 20px 0;
  border-top: 1px solid rgba(255,255,255,0.12);
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.bh-stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
  position: relative;
}
.bh-stat:not(:last-child)::after {
  content: '';
  position: absolute;
  right: -14px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255,255,255,0.15);
}
.bh-stat strong {
  font-family: 'Oswald', sans-serif;
  font-size: 1.7rem !important;
  font-weight: 700 !important;
  color: white !important;
  line-height: 1;
}
.bh-stat span {
  font-size: 0.72rem !important;
  color: rgba(255,255,255,0.70) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
}

/* ─────────────────────────────────────────────────────────────
   PP-05: SECTION-TAG — Eyebrow/Kicker-Label System
   Polishing 2026-08: Kontrast, Breite, Radius, Varianten

   Hell  (#8B3A0A auf #FFF0E6): Ratio ~5.8:1  → WCAG AA ✓
   Dunkel (#fff auf rgba 0.18):  Ratio ~6.1:1  → WCAG AA ✓
   Breite: fit-content via inline-flex → kein Block-Stretch
   Radius: 3px → kompakt, nicht pill-artig
   ─────────────────────────────────────────────────────────────*/
.section-tag {
  display: inline-flex !important;
  align-items: center !important;
  width: fit-content !important;         /* Breite = Inhalt, kein Block-Stretch */
  gap: 5px !important;
  background: #FFF0E6 !important;        /* wärmer als #FFF4EE, mehr Abstand zu Orange */
  color: #8B3A0A !important;             /* Dunkel-Orange: Ratio ~5.8:1 auf #FFF0E6 */
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  padding: 4px 11px !important;          /* kompakt, eng am Text */
  border-radius: 3px !important;         /* nicht pill, nicht eckig — ruhig */
  border: 1px solid rgba(139,58,10,0.18) !important; /* subtile Kontur */
  margin-bottom: 14px !important;
  line-height: 1 !important;             /* verhindert Höhensprünge */
  white-space: nowrap !important;
}

/* Dunkel-Variante (auf dunklen Section-Hintergründen) */
.section-tag--light {
  background: rgba(255,255,255,0.13) !important;
  color: #ffffff !important;             /* Ratio ~7.5:1 auf dunklem BG → WCAG AA ✓ */
  border-color: rgba(255,255,255,0.22) !important;
}

/* Orange-Variante (auf sehr hellen oder weißen BGs mit starkem Akzent) */
.section-tag--accent {
  background: rgba(212,98,26,0.10) !important;
  color: #7A2E04 !important;             /* Tief-Orange: Ratio ~6.2:1 auf rgba BG */
  border-color: rgba(212,98,26,0.25) !important;
}

/* ─────────────────────────────────────────────────────────────
   PP-06: SECTION-TITLE + SECTION-SUB Premium Typo-Hierarchie
   ─────────────────────────────────────────────────────────────*/
.section-head {
  text-align: center;
  margin-bottom: 56px !important;
  max-width: 680px;
  margin-left: auto !important;
  margin-right: auto !important;
}
.section-title {
  font-family: 'Oswald', sans-serif !important;
  font-size: clamp(1.5rem, 3vw, 2.2rem) !important;
  font-weight: 700 !important;
  color: var(--dark) !important;
  margin: 0 0 14px !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em;
}
.section-sub {
  color: #6B7280 !important;
  font-size: 0.97rem !important;
  line-height: 1.65 !important;
  max-width: 560px !important;
  margin: 0 auto !important;
}

/* ─────────────────────────────────────────────────────────────
   PP-07: PROD-CARD Premium — Karte mit mehr Tiefe & Wertigkeit
   ─────────────────────────────────────────────────────────────*/
.prod-card {
  background: white !important;
  border-radius: 0 !important;
  padding: 28px 24px !important;
  border: 1.5px solid #F0F0F0 !important;
  border-left: 3px solid transparent !important;
  box-shadow: none !important;
  transition: border-left-color 0.25s ease !important;
  position: relative;
  overflow: hidden;
}
.prod-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--orange), var(--orange-light));
  opacity: 0;
  transition: opacity 0.25s ease;
  border-radius: 0;
}
.prod-card:hover {
  border-color: #F0F0F0 !important;
  border-left-color: var(--orange) !important;
  box-shadow: none !important;
  transform: none !important;
}
.prod-card:hover::before {
  opacity: 1;
}
.prod-icon {
  width: 48px !important;
  height: 48px !important;
  background: linear-gradient(135deg, #FFF4EE, #FFE8D6) !important;
  border-radius: 0 !important;
  border-left: 3px solid var(--orange) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.3rem !important;
  color: var(--orange) !important;
  margin-bottom: 18px !important;
  box-shadow: none !important;
}
.prod-card h3 {
  font-family: 'Oswald', sans-serif !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: var(--dark) !important;
  margin: 0 0 10px !important;
  letter-spacing: 0.01em;
}
.prod-card p {
  font-size: 0.875rem !important;
  color: #6B7280 !important;
  line-height: 1.65 !important;
  margin: 0 0 14px !important;
}
.prod-list li {
  font-size: 0.82rem !important;
  color: #555 !important;
  padding: 4px 0 4px 16px !important;
  position: relative !important;
}
.prod-list li::before {
  content: '→' !important;
  position: absolute !important;
  left: 0 !important;
  color: var(--orange-dark) !important; /* BUG-12 Fix: WCAG AA auf weiþm Karten-BG */
  font-size: 0.78rem !important;
}

/* ─────────────────────────────────────────────────────────────
   PP-08: BCS-INNER Premium — CTA-Box mit mehr Tiefe
   ─────────────────────────────────────────────────────────────*/
.bcs-inner {
  background: linear-gradient(135deg, #111827 0%, #1a2340 50%, #0f2250 100%) !important;
  border-radius: 0 !important;
  padding: 52px 48px !important;
  box-shadow: none !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-left: 3px solid var(--orange) !important;
  position: relative;
  overflow: hidden;
}
.bcs-inner::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 60%;
  height: 200%;
  background: radial-gradient(ellipse, rgba(212,98,26,0.08) 0%, transparent 65%);
  pointer-events: none;
}
.bcs-icon {
  font-size: 2.2rem !important;
  color: var(--orange-light) !important;
  flex-shrink: 0;
  background: rgba(212,98,26,0.12);
  width: 56px;
  height: 56px;
  border-radius: 0;
  border-left: 3px solid var(--orange);
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.bcs-text h2 {
  font-size: clamp(1.25rem, 2.8vw, 1.75rem) !important;
  font-weight: 800 !important;
  color: white !important;
  margin: 0 0 14px !important;
  line-height: 1.25 !important;
}
.bcs-text p {
  color: rgba(255,255,255,0.72) !important;
  font-size: 0.95rem !important;
  line-height: 1.7 !important;
}
.bcs-list li {
  color: rgba(255,255,255,0.80) !important;
  font-size: 0.88rem !important;
  line-height: 1.55 !important;
  padding: 6px 0 !important;
}
.bcs-list li strong {
  color: white !important;
}
.bcs-list li i {
  color: var(--orange-light) !important;
}

/* ─────────────────────────────────────────────────────────────
   PP-09: FAQ-ITEM Premium
   ─────────────────────────────────────────────────────────────*/
.faq-item {
  background: white !important;
  border-radius: 0 !important;
  padding: 24px 28px !important;
  border: 1.5px solid #F0F0F0 !important;
  box-shadow: none !important;
  border-left: 3px solid transparent !important;
  transition: border-left-color 0.2s ease !important;
}
.faq-item:hover {
  border-color: #F0F0F0 !important;
  border-left-color: var(--orange) !important;
  box-shadow: none !important;
}
.faq-item h3 {
  font-family: 'Oswald', sans-serif !important;
  font-size: 0.98rem !important;
  font-weight: 700 !important;
  color: var(--dark) !important;
  margin: 0 0 10px !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  line-height: 1.35 !important;
}
.faq-item h3 i {
  color: var(--orange) !important;
  font-size: 1rem !important;
  flex-shrink: 0 !important;
  margin-top: 2px !important;
}
.faq-item p {
  font-size: 0.875rem !important;
  color: #6B7280 !important;
  line-height: 1.65 !important;
  margin: 0 !important;
}

/* ─────────────────────────────────────────────────────────────
   PP-10: DELIVERY-CARDS Premium
   ─────────────────────────────────────────────────────────────*/
.ta-delivery-card {
  background: white !important;
  border-radius: 0 !important;
  padding: 28px 24px !important;
  border: 1.5px solid #F0F0F0 !important;
  box-shadow: none !important;
  border-left: 3px solid transparent !important;
  transition: border-left-color 0.2s ease !important;
  text-align: center;
}
.ta-delivery-card:hover {
  border-color: #F0F0F0 !important;
  border-left-color: var(--orange) !important;
  box-shadow: none !important;
  transform: none !important;
}
.ta-delivery-card--featured {
  background: linear-gradient(135deg, #FFF4EE 0%, #FFE8D6 100%) !important;
  border-color: rgba(212,98,26,0.3) !important;
  border-left-color: var(--orange) !important;
  box-shadow: none !important;
}
.tdc-icon {
  font-size: 2rem !important;
  color: var(--orange) !important;
  margin-bottom: 16px !important;
  display: block;
}
.ta-delivery-card h3 {
  font-family: 'Oswald', sans-serif !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--dark) !important;
  margin: 0 0 10px !important;
}
.ta-delivery-card p {
  font-size: 0.875rem !important;
  color: #6B7280 !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}
.tdc-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(212,98,26,0.15);
  color: var(--orange-dark);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 0;
  border-left: 3px solid var(--orange);
  margin-top: 12px;
}

/* ─────────────────────────────────────────────────────────────
   PP-11: BAT-INFO-CARD (Hella/T1 Markeninfo-Box) Premium
   ─────────────────────────────────────────────────────────────*/
.bat-info-card {
  background: white !important;
  border-radius: 0 !important;
  padding: 28px 28px !important;
  border: 1.5px solid #F0F0F0 !important;
  border-left: 3px solid var(--orange) !important;
  box-shadow: none !important;
  margin-bottom: 20px !important;
}
.bat-info-card.bat-nortek-card {
  background: linear-gradient(135deg, #FFF4EE 0%, #FFF9F5 100%) !important;
  border-color: rgba(212,98,26,0.2) !important;
  box-shadow: 0 4px 20px rgba(212,98,26,0.08) !important;
}
.bic-header {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 20px !important;
  padding-bottom: 16px !important;
  border-bottom: 1px solid #F0F0F0 !important;
}
.bic-header i {
  color: var(--orange) !important;
  font-size: 1.25rem !important;
}
.bic-header strong {
  font-family: 'Oswald', sans-serif !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--dark) !important;
}
.bic-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 8px 0 !important;
  border-bottom: 1px solid #F7F7F7 !important;
  font-size: 0.84rem !important;
}
.bic-row:last-child { border-bottom: none !important; }
.bic-row span { color: #6B7280 !important; flex-shrink: 0; }
.bic-row strong { color: var(--dark) !important; text-align: right !important; }

/* ─────────────────────────────────────────────────────────────
   PP-12: BAT-LEFT (Über-die-Marke Sektion) Premium Texte
   ─────────────────────────────────────────────────────────────*/
.bat-left h2 {
  font-family: 'Oswald', sans-serif !important;
  font-size: clamp(1.5rem, 3vw, 2rem) !important;
  font-weight: 700 !important;
  color: white !important;
  margin: 0 0 20px !important;
  line-height: 1.2 !important;
}
.bat-left p {
  color: rgba(255,255,255,0.78) !important;
  font-size: 0.95rem !important;
  line-height: 1.7 !important;
  margin: 0 0 16px !important;
}
.bat-left strong { color: white !important; }

/* BAT-FEATURE Checkmarks */
.bat-feature {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 8px 0 !important;
}
.bat-feature i {
  color: var(--orange-light) !important;
  font-size: 1rem !important;
  flex-shrink: 0 !important;
  margin-top: 2px !important;
}
.bat-feature span {
  color: rgba(255,255,255,0.82) !important;
  font-size: 0.88rem !important;
  line-height: 1.55 !important;
}
.bat-features {
  margin-top: 24px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

/* BAT-CTA-BTN Premium */
.bat-cta-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: linear-gradient(135deg, #E06820, #D4621A) !important;
  color: white !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 12px 22px !important;
  font-family: 'Oswald', sans-serif !important;
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
  text-decoration: none !important;
  transition: background 0.22s ease !important;
  margin-top: 16px !important;
  box-shadow: none !important;
}
.bat-cta-btn:hover {
  background: linear-gradient(135deg, #F07030, #E06820) !important;
  box-shadow: none !important;
  transform: none !important;
  color: white !important;
}

/* ─────────────────────────────────────────────────────────────
   PP-13: T4 PRODUCT-CARD (denso/ferodo etc.) Premium
   ─────────────────────────────────────────────────────────────*/
.product-card {
  background: white !important;
  border-radius: 0 !important;
  padding: 28px 24px !important;
  border: 1.5px solid #F0F0F0 !important;
  border-left: 3px solid transparent !important;
  box-shadow: none !important;
  transition: border-left-color 0.25s ease !important;
  position: relative;
  overflow: hidden;
}
.product-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--orange), var(--orange-light));
  opacity: 0;
  transition: opacity 0.25s ease;
  border-radius: 0;
}
.product-card:hover {
  border-color: #F0F0F0 !important;
  border-left-color: var(--orange) !important;
  box-shadow: none !important;
  transform: none !important;
}
.product-card:hover::before { opacity: 1; }

.product-card-icon {
  width: 48px !important;
  height: 48px !important;
  background: linear-gradient(135deg, #FFF4EE, #FFE8D6) !important;
  border-radius: 0 !important;
  border-left: 3px solid var(--orange) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.3rem !important;
  color: var(--orange) !important;
  margin-bottom: 18px !important;
  box-shadow: none !important;
}
.product-card-title {
  font-family: 'Oswald', sans-serif !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: var(--dark) !important;
  margin: 0 0 10px !important;
}
.product-card-desc {
  font-size: 0.875rem !important;
  color: #6B7280 !important;
  line-height: 1.65 !important;
  margin: 0 0 14px !important;
}
.product-card-features {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 14px !important;
}
.product-card-features li {
  font-size: 0.82rem !important;
  color: #555 !important;
  padding: 3px 0 3px 16px !important;
  position: relative !important;
}
.product-card-features li::before {
  content: '→' !important;
  position: absolute !important;
  left: 0 !important;
  color: var(--orange) !important;
  font-size: 0.78rem !important;
}
.product-card-cta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: var(--orange) !important;
  font-size: 0.84rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: gap 0.2s ease, color 0.2s ease !important;
  border-top: 1px solid #F0F0F0 !important;
  padding-top: 14px !important;
  margin-top: auto !important;
  width: 100%;
}
.product-card-cta:hover {
  color: var(--orange-dark) !important;
  gap: 10px !important;
}

/* ─────────────────────────────────────────────────────────────
   PP-14: CROSSLINK-CARD Premium (T4 crosslink-grid)
   ─────────────────────────────────────────────────────────────*/
.crosslink-card {
  background: white !important;
  border-radius: 0 !important;
  padding: 24px 20px !important;
  border: 1.5px solid #F0F0F0 !important;
  border-left: 3px solid transparent !important;
  box-shadow: none !important;
  transition: border-left-color 0.22s ease !important;
  text-decoration: none !important;
  color: inherit !important;
  display: block !important;
}
.crosslink-card:hover {
  border-color: #F0F0F0 !important;
  border-left-color: var(--orange) !important;
  box-shadow: none !important;
  transform: none !important;
}
.crosslink-card h3 {
  font-family: 'Oswald', sans-serif !important;
  font-size: 0.98rem !important;
  font-weight: 700 !important;
  color: var(--dark) !important;
  margin: 0 0 8px !important;
}
.crosslink-card p {
  font-size: 0.84rem !important;
  color: #6B7280 !important;
  line-height: 1.55 !important;
  margin: 0 !important;
}

/* ─────────────────────────────────────────────────────────────
   PP-15: BRAND-ABOUT-SECTION Background Premium
   ─────────────────────────────────────────────────────────────*/
.brand-about-section {
  position: relative;
  overflow: hidden;
}
.bat-bg {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 50%, #0F172A 100%) !important;
  z-index: 0;
}
.bat-content {
  position: relative;
  z-index: 1;
}

/* ─────────────────────────────────────────────────────────────
   PP-16: MARKEN-HERO (marken.html) Premium
   ─────────────────────────────────────────────────────────────*/
.marken-hero {
  position: relative;
  overflow: hidden;
}
.marken-hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, transparent, var(--orange) 30%, var(--orange-light) 70%, transparent);
  opacity: 0.5;
}

/* ─────────────────────────────────────────────────────────────
   PP-17: FOOTER PREMIUM (T1 OLD-Template)
   ─────────────────────────────────────────────────────────────*/
.footer .footer-col h4 {
  font-family: 'Oswald', sans-serif !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  color: white !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  margin-bottom: 16px !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid rgba(255,255,255,0.10) !important;
}
.footer .footer-col ul li a {
  color: rgba(255,255,255,0.65) !important;
  font-size: 0.875rem !important;
  transition: color 0.2s ease, padding-left 0.2s ease !important;
  display: inline-block !important;
  padding: 3px 0 !important;
}
.footer .footer-col ul li a:hover {
  color: var(--orange-light) !important;
  padding-left: 4px !important;
}

/* ─────────────────────────────────────────────────────────────
   PP-18: T4/T6 BRAND-CTA (untere CTA-Section) Premium
   ─────────────────────────────────────────────────────────────*/
.brand-cta,
section.brand-cta {
  background: linear-gradient(135deg, #111827 0%, #1a2340 50%, #0f2250 100%) !important;
  padding: 80px 0 !important;
  position: relative;
  overflow: hidden;
}
.brand-cta::before {
  content: '';
  position: absolute;
  top: -30%;
  left: -5%;
  width: 50%;
  height: 160%;
  background: radial-gradient(ellipse, rgba(212,98,26,0.07) 0%, transparent 65%);
  pointer-events: none;
}
.brand-cta .bcs-inner {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  max-width: 720px !important;
  margin: 0 auto !important;
  text-align: center !important;
  flex-direction: column !important;
  align-items: center !important;
}
.brand-cta .bcs-inner::before { display: none !important; }
.brand-cta .bcs-actions {
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 14px !important;
}

/* ─────────────────────────────────────────────────────────────
   PP-19: TOPBAR Premium — subtiler Gradient für Wertigkeit
   ─────────────────────────────────────────────────────────────*/
.topbar {
  background: linear-gradient(90deg, #1A1A1A 0%, #222222 100%) !important;
  border-bottom: 1px solid rgba(255,255,255,0.04) !important;
}
.topbar-item,
.topbar-right span {
  color: rgba(255,255,255,0.62) !important;
  font-size: 0.80rem !important;
}
.topbar-item i {
  color: var(--orange-light);
  opacity: 0.8;
}

/* ─────────────────────────────────────────────────────────────
   PP-20: BRAND-PRODUCTS SECTION — Hintergrund-Wechsel Premium
   Abwechslung zwischen hellen und sehr leicht getönten Flächen
   ─────────────────────────────────────────────────────────────*/
.brand-products {
  background: linear-gradient(180deg, #FAFAFA 0%, #F5F5F5 100%) !important;
  padding: 88px 0 !important;
}

/* ─────────────────────────────────────────────────────────────
   PP-21: T4 BRAND-HERO-CONTENT — Stats und Hero-H1 Premium
   ─────────────────────────────────────────────────────────────*/
.brand-hero-h1 {
  font-family: 'Oswald', sans-serif !important;
  font-size: clamp(1.8rem, 3.5vw, 2.8rem) !important;
  font-weight: 700 !important;
  color: white !important;
  line-height: 1.15 !important;
  margin: 0 0 20px !important;
  letter-spacing: -0.01em;
}
.brand-hero-sub {
  color: rgba(255,255,255,0.80) !important;
  font-size: 0.97rem !important;
  line-height: 1.7 !important;
  margin: 0 0 32px !important;
  max-width: 560px;
}

/* T4 Stats Premium */
.brand-stats {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  margin: 32px 0;
  padding: 24px 0;
  border-top: 1px solid rgba(255,255,255,0.12);
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.brand-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.stat-value {
  font-family: 'Oswald', sans-serif !important;
  font-size: 1.8rem !important;
  font-weight: 700 !important;
  color: white !important;
  line-height: 1;
}
.stat-label {
  font-size: 0.72rem !important;
  color: rgba(255,255,255,0.68) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
}

/* T4 Brand-Badge Premium */
.brand-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 50px;
  padding: 8px 18px;
  margin-bottom: 24px;
}
.brand-badge-label {
  color: rgba(255,255,255,0.88) !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
}
.brand-badge-label:first-child {
  font-family: 'Oswald', sans-serif !important;
  font-size: 1.3rem !important;
  font-weight: 800 !important;
  color: white !important;
  letter-spacing: 0.08em !important;
}

/* ─────────────────────────────────────────────────────────────
   PP-22: SERVICE-BTN (T4 crosslink section) Premium
   ─────────────────────────────────────────────────────────────*/
.service-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: white !important;
  color: var(--dark) !important;
  border: 1.5px solid #E8E8E8 !important;
  border-radius: 8px !important;
  padding: 10px 18px !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: all 0.22s ease !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
}
.service-btn:hover {
  border-color: var(--orange) !important;
  color: var(--orange) !important;
  box-shadow: none !important;
  transform: none !important;
}

/* ─────────────────────────────────────────────────────────────
   PP-23: BRAND-FAQ SECTION Premium
   ─────────────────────────────────────────────────────────────*/
.brand-faq {
  background: linear-gradient(180deg, #F8F8FA 0%, #F0F0F5 100%) !important;
  padding: 88px 0 !important;
}

/* ─────────────────────────────────────────────────────────────
   PP-24: SITE-FOOTER (T2/T3/T4) Premium — site-header Overrides
   ─────────────────────────────────────────────────────────────*/
.site-footer {
  background: linear-gradient(180deg, #0F172A 0%, #1A1A2E 100%) !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
}
.footer-logo-text {
  font-family: 'Oswald', sans-serif !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: white !important;
  letter-spacing: 0.05em !important;
}
.footer-logo-text span { color: var(--orange-light) !important; }
.footer-desc {
  color: rgba(255,255,255,0.58) !important;
  font-size: 0.875rem !important;
  line-height: 1.65 !important;
  margin-top: 10px !important;
}
.footer-phone {
  color: var(--orange-light) !important;
  font-family: 'Oswald', sans-serif !important;
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  margin-top: 12px !important;
}
.footer-phone:hover { color: var(--orange) !important; }
.site-footer .footer-col h4,
.site-footer .footer-heading {
  font-family: 'Oswald', sans-serif !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  color: white !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  margin-bottom: 16px !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}
.footer-grid a,
.site-footer .footer-col ul li a {
  color: rgba(255,255,255,0.60) !important;
  font-size: 0.875rem !important;
  transition: color 0.2s, padding-left 0.2s !important;
  display: inline-block !important;
  padding: 3px 0 !important;
  text-decoration: none !important;
}
.footer-grid a:hover,
.site-footer .footer-col ul li a:hover {
  color: var(--orange-light) !important;
  padding-left: 4px !important;
}
.site-footer .footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08) !important;
  padding-top: 20px !important;
  color: rgba(255,255,255,0.40) !important;
  font-size: 0.80rem !important;
}

/* ─────────────────────────────────────────────────────────────
   PP-25: BH-BREADCRUMB Premium
   ─────────────────────────────────────────────────────────────*/
.bh-breadcrumb {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 0.80rem !important;
  color: rgba(255,255,255,0.50) !important;
  margin-bottom: 32px !important;
}
.bh-breadcrumb a {
  color: rgba(255,255,255,0.50) !important;
  text-decoration: none !important;
  transition: color 0.2s !important;
}
.bh-breadcrumb a:hover { color: rgba(255,255,255,0.85) !important; }
.bh-breadcrumb i { font-size: 0.65rem !important; opacity: 0.5 !important; }
.bh-breadcrumb span { color: rgba(255,255,255,0.75) !important; }

/* ─────────────────────────────────────────────────────────────
   PP-26: MARKEN-CARD (auf Marken-Übersicht) Premium
   ─────────────────────────────────────────────────────────────*/
.marken-card {
  border-radius: 0 !important;
  border: 1.5px solid #EBEBEB !important;
  border-left: 3px solid transparent !important;
  box-shadow: none !important;
  transition: border-left-color 0.22s ease !important;
  overflow: hidden !important;
  background: white !important;
}
.marken-card:hover {
  border-color: #EBEBEB !important;
  border-left-color: var(--orange) !important;
  box-shadow: none !important;
  transform: none !important;
}
.brand-name {
  font-family: 'Oswald', sans-serif !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  color: var(--dark) !important;
  letter-spacing: 0.04em !important;
}

/* ─────────────────────────────────────────────────────────────
   PP-27: AUDIENCE-CARD (index.html dark section) Premium
   Bereits gut strukturiert, leicht verfeinert
   ─────────────────────────────────────────────────────────────*/
.audience-card {
  border-radius: 0 !important;
  transition: border-color 0.22s ease !important;
}
.audience-card:hover {
  border-color: var(--orange) !important;
  transform: none !important;
  box-shadow: none !important;
}

/* ─────────────────────────────────────────────────────────────
   PP-28: GLOBAL — Scroll-to-Top Button Premium
   ─────────────────────────────────────────────────────────────*/
.scroll-top {
  border-radius: 50% !important;
  background: var(--orange) !important;
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  min-height: unset !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 16px rgba(212,98,26,0.35) !important;
  font-size: 1rem !important;
}
.scroll-top:hover {
  background: var(--orange-dark) !important;
  transform: none !important;
  box-shadow: 0 4px 16px rgba(212,98,26,0.35) !important;
}

/* ─────────────────────────────────────────────────────────────
   PP-29: WA-FLOAT (WhatsApp Floating Button) Premium
   ─────────────────────────────────────────────────────────────*/
.wa-float {
  background: #25d366 !important;
  box-shadow: 0 4px 16px rgba(37,211,102,0.40) !important;
  border-radius: 50% !important;
  width: 56px !important;
  height: 56px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.5rem !important;
  color: white !important;
  transition: all 0.22s ease !important;
}
.wa-float:hover {
  background: #1da851 !important;
  box-shadow: 0 8px 28px rgba(37,211,102,0.5) !important;
  transform: scale(1.08) !important;
}

/* ─────────────────────────────────────────────────────────────
   PP-30: SECTION BACKGROUND RHYTHM — Premium Abwechslung
   Subtiler heller/leicht-grauer Rhythmus für mehr Struktur
   ─────────────────────────────────────────────────────────────*/
.brand-faq { background: #F8F9FB !important; }
section#hella-lieferlogik,
.section[style*="background:#f7f8fa"] {
  background: linear-gradient(180deg, #F7F8FA 0%, #F0F2F5 100%) !important;
}
section#hella-crosslinks,
.section:not([class*="brand-"]):not([style*="background"]) {
  background: white;
}

/* ─────────────────────────────────────────────────────────────
   PP-31: HEADER-CTA (T2/T4 site-header) Premium
   ─────────────────────────────────────────────────────────────*/
.header-cta {
  background: linear-gradient(135deg, #E06820, #D4621A) !important;
  color: white !important;
  border-radius: 0 !important;
  padding: 9px 18px !important;
  font-family: 'Oswald', sans-serif !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-decoration: none !important;
  transition: background 0.22s ease !important;
  white-space: nowrap !important;
  box-shadow: none !important;
  border: none !important;
}
.header-cta:hover {
  background: linear-gradient(135deg, #F07030, #E06820) !important;
  box-shadow: none !important;
  transform: none !important;
  color: white !important;
}

/* ─────────────────────────────────────────────────────────────
   PP-32: T3 BH-BRAND-BADGE (TRW/NGK/Pierburg etc.) Premium
   Logo-Box mit mehr Depth
   ─────────────────────────────────────────────────────────────*/
.bh-brand-badge {
  background: white !important;
  border-radius: 0 !important;
  padding: 28px 36px !important;
  box-shadow: none !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-left: 3px solid var(--orange) !important;
  transition: border-left-color 0.3s ease !important;
}
.bh-brand-badge:hover {
  transform: none !important;
  box-shadow: none !important;
}
.bh-logo {
  max-width: 160px !important;
  max-height: 80px !important;
  object-fit: contain !important;
  display: block !important;
}
.bh-h1 {
  font-size: clamp(1.8rem, 3.5vw, 2.6rem) !important;
  font-weight: 700 !important;
  color: white !important;
  margin: 0 0 16px !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em;
}

/* ─────────────────────────────────────────────────────────────
   PP-33: BRAND-CTA-STRIP (T2 BMW/Mercedes etc.) Premium
   ─────────────────────────────────────────────────────────────*/
.brand-cta-strip {
  background: linear-gradient(135deg, #111827 0%, #1E293B 50%, #0F172A 100%) !important;
  padding: 72px 0 !important;
}

/* ─────────────────────────────────────────────────────────────
   PP-34: NAV-BTN (Header CTA in nav) — kein border-radius 0
   ─────────────────────────────────────────────────────────────*/
.nav-btn,
.nav .btn-primary,
a.nav-btn {
  border-radius: 0 !important;
  padding: 8px 18px !important;
  font-size: 0.88rem !important;
  box-shadow: none !important;
}

/* ─────────────────────────────────────────────────────────────
   PP-35: GLOBAL SMOOTH — alle img tags
   ─────────────────────────────────────────────────────────────*/
img {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}
img.bh-logo-img,
img.bh-logo,
img.brand-logo-hero {
  image-rendering: auto;
}

/* ─────────────────────────────────────────────────────────────
   PP-36: ANCHOR-FOCUS Global — premium focus outline
   ─────────────────────────────────────────────────────────────*/
a:focus-visible {
  outline: 2px solid var(--orange-light);
  outline-offset: 3px;
  border-radius: 0;
}

/* ─────────────────────────────────────────────────────────────
   PP-37: SITE-HEADER NAV (T2/T4) Premium — Logo-Text
   ─────────────────────────────────────────────────────────────*/
.logo-text {
  font-family: 'Oswald', sans-serif !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: var(--dark) !important;
  letter-spacing: 0.04em !important;
}
.logo-accent {
  color: var(--orange) !important;
}
.site-header {
  box-shadow: 0 2px 16px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.04) !important;
}

/* ─────────────────────────────────────────────────────────────
   PP-38: ABSCHLUSS — Sektionstrennlinien feiner
   ─────────────────────────────────────────────────────────────*/
.brand-products + .brand-about-section,
.brand-about-section + .brand-cta-section,
.brand-cta-section + .brand-faq,
.brand-faq + section {
  /* Sanfter visueller Übergang durch Hintergrundrhythmus, keine harte Linie */
}

/* Mobile Overrides für Premium Polish */
@media (max-width: 640px) {
  .bcs-inner {
    padding: 32px 20px !important;
  }
  .bh-stats {
    gap: 20px !important;
    padding: 16px 0 !important;
  }
  .bh-stat:not(:last-child)::after {
    display: none;
  }
  .brand-stats {
    padding: 16px 0 !important;
  }
  .section-head {
    margin-bottom: 36px !important;
  }
}
@media (max-width: 480px) {
  .bcs-inner {
    padding: 24px 14px !important;
  }
  .bat-info-card {
    padding: 20px 16px !important;
  }
}


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  NORTEK24 — CONVERSION POLISH (CP-01 bis CP-38)                     ║
   ║  Ziel: Conversion-Hierarchie, CTA-Klarheit, Above-the-fold,        ║
   ║  Scannability, Trust-Architektur, Button-Kontrast aller States      ║
   ║  Regel: kein dark-on-dark, alle Buttons in allen States lesbar      ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

/* ─────────────────────────────────────────────────────────────
   CP-01: PRIMARY-CTA DOMINANZ — btn-primary deutlich größer/
   leuchtender als alle Sekundär-Buttons im selben CTA-Kontext.
   Glow-Ring, stärkerer Gradient, pulse-Keyframe.
   ─────────────────────────────────────────────────────────────*/
@keyframes cp-glow-pulse {
  0%, 100% { box-shadow: 0 4px 18px rgba(212,98,26,0.30), 0 1px 4px rgba(212,98,26,0.15); }
  50%       { box-shadow: 0 6px 28px rgba(212,98,26,0.50), 0 2px 8px rgba(212,98,26,0.22); }
}

/* Hero-Primär-CTA — sichtbar größer, pulse-Animation */
.bh-actions .btn-primary,
.brand-hero-ctas .btn-primary,
.ph-cta-main,
.hero-ctas .btn-primary,
.bcs-actions .btn-primary,
.btn-primary.btn-lg {
  font-size: 1.05rem !important;
  padding: 14px 28px !important;
  min-height: 52px !important;
  letter-spacing: 0.03em !important;
  animation: cp-glow-pulse 3s ease-in-out infinite !important;
}

/* Sekundär-Buttons im selben Kontext: etwas kleiner, keine Animation */
.bh-actions .btn-outline,
.bh-actions .bh-btn-outline,
.brand-hero-ctas .btn-phone,
.hero-ctas .btn-outline,
.hero-ctas .hero-cta-wa,
.hero-ctas .hero-cta-call {
  font-size: 0.95rem !important;
  padding: 11px 20px !important;
  min-height: 46px !important;
  opacity: 0.95;
}

/* ─────────────────────────────────────────────────────────────
   CP-02: T4 BTN-WHATSAPP — grün, nicht orange (fehlt komplett)
   Betroffen: denso, valeo, ferodo, optimal, luk, textar, beru
   ─────────────────────────────────────────────────────────────*/
.btn-whatsapp,
a.btn-whatsapp,
.btn.btn-whatsapp {
  background: #22C55E !important;
  background-color: #22C55E !important;
  color: #fff !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 11px 20px !important;
  font-size: 0.95rem !important;
  transition: background 0.22s ease !important;
  box-shadow: none !important;
}
.btn-whatsapp:hover,
a.btn-whatsapp:hover {
  background: #16A34A !important;
  background-color: #16A34A !important;
  color: #fff !important;
  box-shadow: none !important;
  transform: none !important;
}
.btn-whatsapp:focus-visible {
  outline: 2px solid #22C55E !important;
  outline-offset: 3px !important;
}
.btn-whatsapp:active {
  background: #15803D !important;
  transform: translateY(0) !important;
  box-shadow: 0 2px 6px rgba(34,197,94,0.30) !important;
}

/* ─────────────────────────────────────────────────────────────
   CP-03: T4 BTN-PHONE — dezenter Outline-Style, nicht orange
   ─────────────────────────────────────────────────────────────*/
.btn-phone,
a.btn-phone,
.btn.btn-phone {
  background: transparent !important;
  background-color: transparent !important;
  color: rgba(255,255,255,0.88) !important;
  border: 1.5px solid rgba(255,255,255,0.38) !important;
  border-radius: 0 !important;
  padding: 11px 20px !important;
  font-size: 0.95rem !important;
  transition: border-color 0.22s ease, color 0.22s ease, background 0.22s ease !important;
  box-shadow: none !important;
}
.btn-phone:hover,
a.btn-phone:hover {
  border-color: rgba(255,255,255,0.72) !important;
  color: #fff !important;
  background: rgba(255,255,255,0.07) !important;
  transform: none !important;
  box-shadow: none !important;
}
.btn-phone:focus-visible {
  outline: 2px solid rgba(255,255,255,0.6) !important;
  outline-offset: 3px !important;
}
.btn-phone:active {
  background: rgba(255,255,255,0.12) !important;
  color: #fff !important;
}

/* ─────────────────────────────────────────────────────────────
   CP-04: PH-CTA-WA (teileanfrage.html hero) — grün statt orange
   ─────────────────────────────────────────────────────────────*/
.ph-cta-wa,
a.ph-cta-wa,
.btn.ph-cta-wa {
  background: #22C55E !important;
  background-color: #22C55E !important;
  color: #fff !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: background 0.22s ease !important;
}
.ph-cta-wa:hover {
  background: #16A34A !important;
  color: #fff !important;
  box-shadow: none !important;
  transform: none !important;
}
.ph-cta-wa:active {
  background: #15803D !important;
  transform: translateY(0) !important;
}

/* ─────────────────────────────────────────────────────────────
   CP-05: PH-CTA-CALL (teileanfrage.html hero) — klare Lesbarkeit
   ─────────────────────────────────────────────────────────────*/
.ph-cta-call,
a.ph-cta-call,
.btn.ph-cta-call {
  background: transparent !important;
  background-color: transparent !important;
  color: rgba(255,255,255,0.85) !important;
  border: 1.5px solid rgba(255,255,255,0.35) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: border-color 0.22s ease, color 0.22s ease, background 0.22s ease !important;
}
.ph-cta-call:hover {
  border-color: rgba(255,255,255,0.70) !important;
  color: #fff !important;
  background: rgba(255,255,255,0.07) !important;
  transform: none !important;
}
.ph-cta-call:active {
  background: rgba(255,255,255,0.12) !important;
}

/* ─────────────────────────────────────────────────────────────
   CP-06: PRODUCT-CARD-CTA (T4 Produkt-Karten-Link)
   War un-styled plain-text. Jetzt: Orange-Textlink mit Pfeil-
   Transition → klar als Aktion erkennbar, leichtgewichtig
   ─────────────────────────────────────────────────────────────*/
.product-card-cta,
a.product-card-cta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  color: var(--orange) !important;
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  font-family: 'Oswald', sans-serif !important;
  text-decoration: none !important;
  letter-spacing: 0.02em !important;
  margin-top: 16px !important;
  padding: 8px 0 !important;
  border-bottom: 1.5px solid rgba(212,98,26,0.25) !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  transition: color 0.2s ease, border-color 0.2s ease, gap 0.2s ease !important;
  box-shadow: none !important;
  min-height: unset !important;
  animation: none !important;
}
.product-card-cta:hover,
a.product-card-cta:hover {
  color: var(--orange-dark) !important;
  border-color: var(--orange) !important;
  gap: 12px !important;
  transform: none !important;
  background: transparent !important;
  box-shadow: none !important;
}
.product-card-cta:active {
  color: var(--orange-dark) !important;
}
.product-card-cta i {
  font-size: 0.78rem !important;
  transition: transform 0.2s ease !important;
}
.product-card-cta:hover i {
  transform: translateX(3px) !important;
}

/* ─────────────────────────────────────────────────────────────
   CP-07: BRAND-HERO-CTAS GRUPPE — visuelle Hierarchie erzwingen
   Primärer Button: volle Breite auf mobile, größte Gewichtung.
   Sekundär: deutlich leichter.
   ─────────────────────────────────────────────────────────────*/
.brand-hero-ctas {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  align-items: center !important;
  margin-top: 32px !important;
}
.brand-hero-ctas .btn-primary {
  flex-shrink: 0 !important;
}
.brand-hero-ctas .btn-whatsapp,
.brand-hero-ctas .btn-phone {
  flex-shrink: 0 !important;
}

/* ─────────────────────────────────────────────────────────────
   CP-08: BH-ACTIONS (T1/Hella/Bosch) — Hierarchie-Gap stärken.
   Primary: mehr Padding, Outline-Buttons sichtbar kleiner.
   ─────────────────────────────────────────────────────────────*/
.bh-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  align-items: center !important;
  margin-top: 28px !important;
}
.bh-actions .btn-primary {
  /* bereits CP-01 übernommen */
  position: relative;
}
/* Trenn-Indikator: leichter Divider vor Sekundär-Buttons */
.bh-actions .bh-btn-outline:first-of-type {
  margin-left: 4px !important;
}

/* ─────────────────────────────────────────────────────────────
   CP-09: BH-BTN-OUTLINE ALLE STATES — vollständig lesbar
   ─────────────────────────────────────────────────────────────*/
.bh-btn-outline,
a.bh-btn-outline,
.btn.bh-btn-outline {
  background: transparent !important;
  background-color: transparent !important;
  color: rgba(255,255,255,0.88) !important;
  border: 1.5px solid rgba(255,255,255,0.38) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: border-color 0.22s ease, color 0.22s ease, background 0.22s ease !important;
}
.bh-btn-outline:hover,
a.bh-btn-outline:hover {
  background: rgba(255,255,255,0.10) !important;
  border-color: rgba(255,255,255,0.65) !important;
  color: #fff !important;
  transform: none !important;
  box-shadow: none !important;
}
.bh-btn-outline:focus-visible {
  outline: 2px solid rgba(255,255,255,0.55) !important;
  outline-offset: 3px !important;
}
.bh-btn-outline:active {
  background: rgba(255,255,255,0.16) !important;
  color: #fff !important;
}

/* ─────────────────────────────────────────────────────────────
   CP-10: ABOVE-THE-FOLD CLARITY — T4 brand-hero-inner
   Hero-Padding optimieren: genug Luft, aber keine Verschwendung.
   ─────────────────────────────────────────────────────────────*/
.brand-hero-inner {
  min-height: 88vh !important;
  display: flex !important;
  align-items: center !important;
  padding: 80px 48px !important;
}
@media (max-width: 900px) {
  .brand-hero-inner {
    min-height: 70vh !important;
    padding: 56px 28px !important;
  }
}
@media (max-width: 600px) {
  .brand-hero-inner {
    min-height: unset !important;
    padding: 48px 20px 40px !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   CP-11: TRUST-STRIP auf Marken-Seiten — schnelle Glaubwürdigkeit
   Universelle Mini-Trust-Bar direkt unter dem Hero-CTA-Block.
   Klasse: .cp-trust-strip (wird per CSS erzeugt, kein HTML nötig)
   ─────────────────────────────────────────────────────────────*/
.cp-trust-strip {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px 20px !important;
  margin-top: 20px !important;
  padding-top: 16px !important;
  border-top: 1px solid rgba(255,255,255,0.12) !important;
}
.cp-trust-item {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  font-size: 0.78rem !important;
  color: rgba(255,255,255,0.70) !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
}
.cp-trust-item i {
  color: var(--orange-light) !important;
  font-size: 0.82rem !important;
  flex-shrink: 0 !important;
}
.cp-trust-item strong {
  color: rgba(255,255,255,0.90) !important;
}

/* ─────────────────────────────────────────────────────────────
   CP-12: SECTION-HEAD AUF DUNKLEM HINTERGRUND — immer weiß
   brand-products section hat PP-20 light background → kein Problem.
   Aber für alle dark-sections: section-title und section-sub weiß.
   ─────────────────────────────────────────────────────────────*/
.brand-about-section .section-head .section-title,
.brand-cta-section .section-head .section-title,
.bcs-inner .section-title {
  color: white !important;
}
.brand-about-section .section-head .section-sub,
.brand-cta-section .section-head .section-sub,
.bcs-inner .section-sub {
  color: rgba(255,255,255,0.72) !important;
}

/* ─────────────────────────────────────────────────────────────
   CP-13: SECTION-TITLE + SECTION-SUB — Typografie-Hierarchie
   H2 mehr Gewicht, Sub leichter, mehr Spacing.
   ─────────────────────────────────────────────────────────────*/
.section-title {
  font-family: 'Oswald', sans-serif !important;
  font-size: clamp(1.5rem, 3vw, 2.1rem) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em !important;
  margin-bottom: 12px !important;
}
.section-sub {
  font-size: 0.95rem !important;
  line-height: 1.7 !important;
  max-width: 580px !important;
}

/* ─────────────────────────────────────────────────────────────
   CP-14: BCS-ACTIONS HIERARCHIE — Primary klar dominant,
   Sekundär-Buttons kleiner und visuell zurückgestuft.
   ─────────────────────────────────────────────────────────────*/
.bcs-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  align-items: center !important;
  margin-top: 28px !important;
}
.bcs-actions .btn-primary {
  /* CP-01 greift bereits */
}
/* Outline & WhatsApp im bcs-actions kompakter */
.bcs-actions .bcs-btn-outline {
  font-size: 0.90rem !important;
  padding: 10px 18px !important;
  min-height: 44px !important;
}
.bcs-actions .bcs-wa-btn {
  font-size: 0.90rem !important;
  padding: 10px 18px !important;
  min-height: 44px !important;
}

/* ─────────────────────────────────────────────────────────────
   CP-15: BCS-BTN-OUTLINE ALLE STATES — vollständige Definition
   (FIX 31 hat Basis, CP-15 ergänzt :focus/:active/:hover-glow)
   ─────────────────────────────────────────────────────────────*/
.bcs-btn-outline:focus-visible,
a.bcs-btn-outline:focus-visible {
  outline: 2px solid rgba(255,255,255,0.55) !important;
  outline-offset: 3px !important;
}
.bcs-btn-outline:active,
a.bcs-btn-outline:active {
  background: rgba(255,255,255,0.10) !important;
  border-color: rgba(255,255,255,0.55) !important;
}
.bcs-btn-outline:hover,
a.bcs-btn-outline:hover {
  background: rgba(255,255,255,0.10) !important;
  border-color: rgba(255,255,255,0.65) !important;
  color: white !important;
  transform: none !important;
}

/* ─────────────────────────────────────────────────────────────
   CP-16: BCS-WA-BTN ALLE STATES
   ─────────────────────────────────────────────────────────────*/
.bcs-wa-btn:hover,
a.bcs-wa-btn:hover {
  background: #1da851 !important;
  background-color: #1da851 !important;
  color: white !important;
  box-shadow: none !important;
  transform: none !important;
}
.bcs-wa-btn:focus-visible,
a.bcs-wa-btn:focus-visible {
  outline: 2px solid #25d366 !important;
  outline-offset: 3px !important;
}
.bcs-wa-btn:active,
a.bcs-wa-btn:active {
  background: #17a843 !important;
  transform: translateY(0) !important;
}

/* ─────────────────────────────────────────────────────────────
   CP-17: HERO-CTA-WA (index.html) — grün statt orange-outline
   ─────────────────────────────────────────────────────────────*/
.hero-cta-wa,
a.hero-cta-wa,
.btn.hero-cta-wa {
  background: #22C55E !important;
  background-color: #22C55E !important;
  color: #fff !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: background 0.22s ease !important;
}
.hero-cta-wa:hover,
a.hero-cta-wa:hover {
  background: #16A34A !important;
  color: #fff !important;
  box-shadow: none !important;
  transform: none !important;
}
.hero-cta-wa:active {
  background: #15803D !important;
  transform: translateY(0) !important;
}
.hero-cta-wa .fab { color: #fff !important; }

/* ─────────────────────────────────────────────────────────────
   CP-18: ANFRAGE-BTN-WHATSAPP (index.html Anfrage-Block)
   War rgba(white) semi-transparent → bleibt weiß mit grünem Icon,
   aber :hover :focus :active definiert
   ─────────────────────────────────────────────────────────────*/
.anfrage-btn-whatsapp:focus-visible {
  outline: 2px solid rgba(255,255,255,0.6) !important;
  outline-offset: 3px !important;
}
.anfrage-btn-whatsapp:active {
  background: rgba(255,255,255,0.30) !important;
}

/* ─────────────────────────────────────────────────────────────
   CP-19: ANFRAGE-BTN-MAIN (index.html Anfrage-Block) alle States
   Weißer Button auf Orange-Hintergrund → alle States explizit
   ─────────────────────────────────────────────────────────────*/
.anfrage-btn-main:focus-visible {
  outline: 2px solid #fff !important;
  outline-offset: 3px !important;
}
.anfrage-btn-main:active {
  background: #e8e8e8 !important;
  transform: translateY(0) !important;
}

/* ─────────────────────────────────────────────────────────────
   CP-20: PARTNER-HERO ACTIONS (profipartner.html)
   Sicherstellen dass primary orange, secondary outline, WA grün
   ─────────────────────────────────────────────────────────────*/
.partner-hero-actions .btn-primary {
  font-size: 1.02rem !important;
  padding: 14px 26px !important;
  min-height: 50px !important;
  animation: cp-glow-pulse 3s ease-in-out infinite !important;
}
.partner-hero-actions .btn-outline {
  font-size: 0.92rem !important;
  padding: 10px 20px !important;
}

/* ─────────────────────────────────────────────────────────────
   CP-21: SCANNABILITY — PRODUCT-CARD-TITLE H3
   Klarer, größer, mit Oswald – bereits PP-13 greift,
   hier zusätzlich color-guarantee
   ─────────────────────────────────────────────────────────────*/
.product-card-title,
.product-card h3,
h3.product-card-title {
  font-family: 'Oswald', sans-serif !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: var(--dark) !important;
  margin: 0 0 10px !important;
  line-height: 1.25 !important;
}

/* ─────────────────────────────────────────────────────────────
   CP-22: PRODUCT-CARD-ICON (T4) — orange, zentriert, sichtbar
   ─────────────────────────────────────────────────────────────*/
.product-card-icon {
  width: 48px !important;
  height: 48px !important;
  background: linear-gradient(135deg, #FFF4EE, #FFE8D6) !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.3rem !important;
  color: var(--orange) !important;
  margin-bottom: 16px !important;
  box-shadow: 0 2px 8px rgba(212,98,26,0.14) !important;
  flex-shrink: 0 !important;
}

/* ─────────────────────────────────────────────────────────────
   CP-23: PRODUCT-CARD-DESC (T4) — lesbare Grautöne
   ─────────────────────────────────────────────────────────────*/
.product-card-desc,
.product-card p.product-card-desc {
  font-size: 0.875rem !important;
  color: #4B5563 !important;
  line-height: 1.65 !important;
  margin: 0 0 12px !important;
}

/* ─────────────────────────────────────────────────────────────
   CP-24: PRODUCT-CARD-FEATURES (T4) — Bullet-Liste schärfer
   ─────────────────────────────────────────────────────────────*/
.product-card-features {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 8px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
.product-card-features li {
  font-size: 0.82rem !important;
  color: #555 !important;
  padding: 3px 0 3px 16px !important;
  position: relative !important;
  line-height: 1.5 !important;
}
.product-card-features li::before {
  content: '→' !important;
  position: absolute !important;
  left: 0 !important;
  color: var(--orange) !important;
  font-size: 0.72rem !important;
  top: 4px !important;
}

/* ─────────────────────────────────────────────────────────────
   CP-25: PRODUCT-CARD (T4) — Hover mit orange-top-bar
   Gleiche Qualität wie .prod-card (T1)
   ─────────────────────────────────────────────────────────────*/
.product-card {
  position: relative !important;
  overflow: hidden !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease !important;
}
.product-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, var(--orange), var(--orange-light)) !important;
  opacity: 0 !important;
  transition: opacity 0.25s ease !important;
  border-radius: 14px 14px 0 0 !important;
}
.product-card:hover {
  border-color: rgba(212,98,26,0.1) !important;
  border-left-color: var(--orange) !important;
  box-shadow: none !important;
  transform: none !important;
}
.product-card:hover::before {
  opacity: 1 !important;
}

/* ─────────────────────────────────────────────────────────────
   CP-26: CONVERSION TRUST — KPI-Zahlen in Stats-Bereichen
   Stärkere Kontrast-Sicherung für .bh-stat strong (T1)
   ─────────────────────────────────────────────────────────────*/
.bh-stat strong {
  font-family: 'Oswald', sans-serif !important;
  font-size: 1.55rem !important;
  font-weight: 800 !important;
  color: white !important;
  display: block !important;
  line-height: 1 !important;
}
.bh-stat span {
  font-size: 0.72rem !important;
  color: rgba(255,255,255,0.75) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  display: block !important;
  margin-top: 3px !important;
}
.bh-stats {
  display: flex !important;
  gap: 28px !important;
  flex-wrap: wrap !important;
  margin: 28px 0 !important;
  padding: 20px 0 !important;
  border-top: 1px solid rgba(255,255,255,0.13) !important;
  border-bottom: 1px solid rgba(255,255,255,0.13) !important;
}

/* ─────────────────────────────────────────────────────────────
   CP-27: CONVERSION TRUST — T4 .stat-value / .stat-label
   ─────────────────────────────────────────────────────────────*/
/* Bereits PP-21 — hier ergänze :active state auf primary in Stats-Kontext */
.brand-stats .brand-stat:hover .stat-value {
  color: var(--orange-light) !important;
  transition: color 0.2s ease !important;
}

/* ─────────────────────────────────────────────────────────────
   CP-28: SECTION-HEAD ZENTRIERUNG + SPACING — Scannability
   ─────────────────────────────────────────────────────────────*/
.section-head {
  text-align: center !important;
  margin-bottom: 52px !important;
}
.section-head .section-tag {
  display: inline-block !important;
  margin-bottom: 10px !important;
}
/* section-tag global: orange, konsistente Größe */
.section-tag {
  color: var(--orange) !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

/* ─────────────────────────────────────────────────────────────
   CP-29: BRAND-CTA-SECTION — Konversionszone vollständig poliert.
   bcs-inner hat PP-08. Hier: .brand-cta-section padding + bg.
   ─────────────────────────────────────────────────────────────*/
.brand-cta-section {
  background: linear-gradient(180deg, #0F172A 0%, #111827 100%) !important;
  padding: 80px 0 !important;
  position: relative !important;
  overflow: hidden !important;
}
.brand-cta-section::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, transparent, rgba(212,98,26,0.4) 30%, rgba(240,120,48,0.4) 70%, transparent) !important;
}

/* ─────────────────────────────────────────────────────────────
   CP-30: FAQ-ITEM ACCESSIBILITY — H3-Frage immer lesbar,
   Icon-Kontrast garantiert
   ─────────────────────────────────────────────────────────────*/
.faq-item h3,
.faq-item h3 i {
  /* faq-item h3 bereits PP-09 — Icons sichern */
}
.faq-item h3 i.fas.fa-question-circle {
  color: var(--orange) !important;
  margin-right: 8px !important;
}
.faq-item p {
  color: #4B5563 !important;
  font-size: 0.88rem !important;
  line-height: 1.65 !important;
}

/* ─────────────────────────────────────────────────────────────
   CP-31: KONTAKT-SECTION bg — zu mitteldunkel für Formulare.
   Aufgehellt auf tiefes Navy für besseren Kontrast.
   ─────────────────────────────────────────────────────────────*/
.contact-section {
  background: #1a1a2e !important;
}

/* ─────────────────────────────────────────────────────────────
   CP-32: SITE-HEADER STICKY — immer weiß + shadow beim Scrollen,
   kein unsichtbarer Header auf hellen Backgrounds
   ─────────────────────────────────────────────────────────────*/
.site-header {
  background: #fff !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
}
.site-header .nav-link {
  color: #1A1A1A !important;
  font-size: 0.90rem !important;
  font-weight: 600 !important;
  transition: color 0.2s ease !important;
}
.site-header .nav-link:hover {
  color: var(--orange) !important;
}
.site-header .nav-link.active {
  color: var(--orange) !important;
}

/* ─────────────────────────────────────────────────────────────
   CP-33: FOOTER-CTA ZONE — aktionsorientierter Footer-CTA
   Für .cta-section und ähnliche Bottom-CTAs
   ─────────────────────────────────────────────────────────────*/
.cta-section .btn-primary,
.final-cta .btn-primary,
.section-cta .btn-primary {
  animation: cp-glow-pulse 3s ease-in-out infinite !important;
  font-size: 1.02rem !important;
  padding: 14px 28px !important;
  min-height: 50px !important;
}

/* ─────────────────────────────────────────────────────────────
   CP-34: GLOBAL BUTTON ACTIVE-STATE — alle Buttons
   Kein Button darf beim Klicken auf "flat/disabled" aussehen.
   ─────────────────────────────────────────────────────────────*/
.btn:active,
button:active,
[type="submit"]:active {
  transform: translateY(1px) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15) !important;
  opacity: 0.92 !important;
}
/* Override für Buttons die eigenen active-state definieren */
.btn-whatsapp:active,
.bcs-wa-btn:active,
.ph-cta-wa:active,
.hero-cta-wa:active {
  opacity: 1 !important; /* eigene Definition in CP-02/04/16/17 */
}

/* ─────────────────────────────────────────────────────────────
   CP-35: GLOBAL BUTTON FOCUS — alle Buttons sichtbar fokussierbar
   ─────────────────────────────────────────────────────────────*/
.btn:focus-visible,
button:focus-visible,
[type="submit"]:focus-visible {
  outline: 2px solid var(--orange-light) !important;
  outline-offset: 3px !important;
}
/* Auf dunklem Background: weißes Outline für Outline-Buttons */
.bh-btn-outline:focus-visible,
.bcs-btn-outline:focus-visible,
.btn-phone:focus-visible,
.ph-cta-call:focus-visible {
  outline: 2px solid rgba(255,255,255,0.65) !important;
  outline-offset: 3px !important;
}

/* ─────────────────────────────────────────────────────────────
   CP-36: GLOBAL DARK-ON-DARK CHECK — body-bg + text-Farben
   Kein dunkler Text auf dunklem Hintergrund in Kern-Sektionen.
   ─────────────────────────────────────────────────────────────*/
/* Sicherheitsnetz: alle brand-hero-sub, bh-lead, bcs-text p
   auf dark backgrounds IMMER lesbar */
.bh-lead,
.brand-hero-sub,
.bh-text .bh-lead {
  color: rgba(255,255,255,0.82) !important;
}
/* bcs-inner baut auf PP-08, sicherstellen: */
.bcs-inner .bcs-text p {
  color: rgba(255,255,255,0.75) !important;
}
.bcs-inner .bcs-text h2 {
  color: #fff !important;
}

/* ─────────────────────────────────────────────────────────────
   CP-37: COLOR LOGIC — Primär-Orange nicht für dekorative Elemente
   nutzen wenn gleichzeitig oranger Primär-Button sichtbar.
   Alle section-tag orange: OK (klein, klar dekorativ).
   Trust-Badge-Icons: orange-light statt -dark → wärmer, weniger
   konkurrierend mit CTA.
   ─────────────────────────────────────────────────────────────*/
.hero-trust-badge i,
.ph-trust-item i,
.bh-badge i,
.cp-trust-item i {
  color: var(--orange-light) !important;
}
/* Hella bh-badge icon */
.bh-badge {
  background: rgba(212,98,26,0.15) !important;
  border: 1px solid rgba(212,98,26,0.30) !important;
  border-radius: 50px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 7px 16px !important;
  font-size: 0.80rem !important;
  color: rgba(255,255,255,0.88) !important;
  font-weight: 600 !important;
  margin-bottom: 18px !important;
  letter-spacing: 0.03em !important;
}

/* ─────────────────────────────────────────────────────────────
   CP-38: GLOBAL HARMONIZATION — Konsistente Padding-Rhythmen.
   Alle .section-Blöcke auf brand-pages: 88px top/bottom.
   Alle CTA-Sections: 80px top/bottom.
   Keine Micro-Abweichungen die den Rhythmus stören.
   ─────────────────────────────────────────────────────────────*/
.brand-products,
.brand-faq,
.brand-about-section,
.brand-products.section {
  padding-top: 88px !important;
  padding-bottom: 88px !important;
}
.brand-cta-section,
.brand-cta {
  padding-top: 80px !important;
  padding-bottom: 80px !important;
}

/* Konsistente .section-inner max-width */
.section-inner {
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
}

/* Mobile: harmonisierte Padding-Reduktion */
@media (max-width: 768px) {
  .brand-products,
  .brand-faq,
  .brand-about-section {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
  .brand-cta-section,
  .brand-cta {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
}
@media (max-width: 480px) {
  .brand-products,
  .brand-faq,
  .brand-about-section {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
}

/* ── Conversion Polish Ende ───────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════════
   PREMIUM POLISH PHASE 2 — PP2-01 bis PP2-72
   Senior Design Director | Brand Experience | High-End Landingpage Polish
   Scope: alle Seitentypen T1–T6, index, leistungen, kontakt, profipartner,
          teileanfrage — CSS-only, kein SEO-/URL-/H1-Eingriff
   Ziel: höhere Markenwirkung, Vertrauen, visuelle Reife, Klarheit, Souveränität
   ═══════════════════════════════════════════════════════════════════════════ */


/* ─── PP2 PHASE 2: HERO POLISH ─────────────────────────────────────────────
   Alle Hero-Zonen: bh-inner (T1), brand-hero-inner (T4), ph-inner (profipartner),
   partner-hero-inner. Ziel: souveränere Proportionen, stärkere Erstwirkung,
   tiefere Farbführung, ruhigere Balance Logo/Headline/CTA.
   ────────────────────────────────────────────────────────────────────────── */

/* PP2-01: T1-Hero (bh-inner) — Headline-Gewicht + Lead-Lesbarkeit erhöhen */
.bh-inner { gap: 44px; }
.bh-inner .bh-text h1 {
  letter-spacing: -0.5px;
  line-height: 1.12;
}
.bh-lead {
  color: rgba(255,255,255,0.78) !important;
  line-height: 1.82 !important;
  font-size: 1.02rem !important;
  max-width: 640px;
}

/* PP2-02: T1-Hero bh-stats — Premium KPI-Streifen */
.bh-stats {
  display: flex;
  gap: 0;
  margin: 28px 0 32px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 0;
  border-left: 3px solid var(--orange);
  overflow: hidden;
  max-width: 520px;
}
.bh-stat {
  flex: 1;
  text-align: center;
  padding: 14px 10px;
  border-right: 1px solid rgba(255,255,255,0.08);
  position: relative;
}
.bh-stat:last-child { border-right: none; }
.bh-stat strong {
  display: block;
  font-size: 1.45rem !important;
  font-weight: 900;
  color: var(--orange) !important;
  line-height: 1.1;
  letter-spacing: -0.3px;
}
.bh-stat span {
  display: block;
  font-size: 0.72rem !important;
  color: rgba(255,255,255,0.55) !important;
  letter-spacing: 0.3px;
  margin-top: 3px;
  text-transform: uppercase;
}

/* PP2-03: T1-Hero bh-badge — schärfere Marken-Badge */
.bh-badge {
  border-radius: 0 !important;
  border-left: 3px solid var(--orange) !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  padding: 7px 18px !important;
  border-top: 1px solid rgba(212,98,26,0.45) !important;
  border-right: 1px solid rgba(212,98,26,0.45) !important;
  border-bottom: 1px solid rgba(212,98,26,0.45) !important;
  background: rgba(212,98,26,0.14) !important;
  color: var(--orange-light) !important;
  margin-bottom: 18px !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* PP2-04: T4-Hero (brand-hero-inner) — tiefere Gradient-Schicht, mehr Ruhe */
.brand-hero-inner {
  gap: 40px;
}
.brand-hero-inner .brand-hero-text h1 {
  letter-spacing: -0.4px;
  line-height: 1.13;
}
.brand-hero-inner .brand-hero-text p {
  color: rgba(255,255,255,0.76) !important;
  line-height: 1.80 !important;
}

/* PP2-05: brand-badge (T4) — harte Brand-Badge */
.brand-badge {
  border-radius: 0 !important;
  border-left: 3px solid var(--orange) !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.8px !important;
  padding: 7px 18px !important;
  border-top: 1px solid rgba(212,98,26,0.4) !important;
  border-right: 1px solid rgba(212,98,26,0.4) !important;
  border-bottom: 1px solid rgba(212,98,26,0.4) !important;
  background: rgba(212,98,26,0.13) !important;
  color: var(--orange-light) !important;
}

/* PP2-06: profipartner Hero (ph-badge) — harte Badge-Sprache */
.ph-badge {
  border-radius: 0 !important;
  border-left: 3px solid var(--orange) !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.8px !important;
  padding: 7px 18px !important;
  border-top: 1px solid rgba(212,98,26,0.4) !important;
  border-right: 1px solid rgba(212,98,26,0.4) !important;
  border-bottom: 1px solid rgba(212,98,26,0.4) !important;
  background: rgba(212,98,26,0.13) !important;
  color: var(--orange-light) !important;
}

/* PP2-07: partner-stat-cards — KPI-Karten */
.partner-stat-card {
  background: rgba(255,255,255,0.055) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 0 !important;
  border-left: 3px solid transparent !important;
  padding: 22px 16px !important;
  transition: border-left-color 0.25s !important;
}
.partner-stat-card:hover {
  background: rgba(212,98,26,0.13) !important;
  border-color: rgba(255,255,255,0.1) !important;
  border-left-color: var(--orange) !important;
  transform: none !important;
}
.partner-stat-card i {
  font-size: 1.6rem !important;
  color: var(--orange) !important;
  margin-bottom: 8px !important;
  opacity: 0.85;
}
.partner-stat-card strong {
  font-size: 1.9rem !important;
  font-weight: 900 !important;
  color: #fff !important;
  letter-spacing: -0.5px;
}
.partner-stat-card span {
  font-size: 0.75rem !important;
  color: rgba(255,255,255,0.5) !important;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

/* PP2-08: hero-trust-badges — klarer, ruhiger Trust-Strip */
.hero-trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 26px !important;
}
.hero-trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.13);
  border-left: 3px solid var(--orange);
  color: rgba(255,255,255,0.82);
  font-size: 0.82rem;
  font-weight: 600;
  font-family: 'Barlow Condensed', 'Oswald', sans-serif;
  padding: 6px 14px;
  border-radius: 0;
  line-height: 1.3;
}
.hero-trust-badge i {
  color: var(--orange);
  font-size: 0.85rem;
  flex-shrink: 0;
}


/* ─── PP2 PHASE 3: CTA- UND ABSCHLUSSZONEN ─────────────────────────────────
   bcs-inner (T1/T3), brand-cta-section (T4), bottom-cta (leistungen),
   partner-form-section (profipartner), contact-section (kontakt)
   Ziel: hochwertige, klare Handlungsführung — nicht nur klickbar, sondern vertrauensstark
   ────────────────────────────────────────────────────────────────────────── */

/* PP2-09: bcs-inner (T1-CTA-Sektion) — tieferes Dunkel, stärkere Orange-Akzentlinie */
.bcs-inner {
  background: linear-gradient(135deg, #111122 0%, #1a1a2e 60%, #111122 100%) !important;
  border-radius: 0 !important;
  border-left: 3px solid var(--orange) !important;
  box-shadow: none !important;
  padding: 52px 48px !important;
  position: relative;
  overflow: hidden;
}
.bcs-inner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 70% at 85% 50%, rgba(212,98,26,0.14) 0%, transparent 65%);
  pointer-events: none;
}
.bcs-inner::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, rgba(212,98,26,0.7) 20%, var(--orange) 50%, rgba(212,98,26,0.7) 80%, transparent 100%);
}

/* PP2-10: bcs-icon — schärferes Icon-Framing im CTA-Block */
.bcs-icon {
  width: 64px !important;
  height: 64px !important;
  background: rgba(212,98,26,0.15) !important;
  border: 1.5px solid rgba(212,98,26,0.35) !important;
  border-radius: 0 !important;
  border-left: 3px solid var(--orange) !important;
  margin-bottom: 20px !important;
}
.bcs-icon i {
  font-size: 1.6rem !important;
  color: var(--orange) !important;
}

/* PP2-11: bcs-headline/-subheadline — stärkere Typografie-Hierarchie */
.bcs-title {
  font-size: clamp(1.6rem, 2.6vw, 2.2rem) !important;
  letter-spacing: -0.3px !important;
  line-height: 1.18 !important;
  color: #fff !important;
}
.bcs-subtitle {
  color: rgba(255,255,255,0.68) !important;
  line-height: 1.75 !important;
  max-width: 560px;
}

/* PP2-12: bcs-btn-outline hover — klarer, Premium-wertiger Hover-State */
.bcs-btn-outline:hover,
.bcs-btn-outline:focus-visible {
  background: rgba(255,255,255,0.1) !important;
  border-color: rgba(255,255,255,0.5) !important;
  color: #fff !important;
}

/* PP2-13: brand-cta-section (T4) — stärkere Dunkelfläche, Orange-Linie oben */
.brand-cta-section {
  background: linear-gradient(135deg, #0f0f1e 0%, #1a1a2e 50%, #0f0f1e 100%) !important;
  position: relative;
  overflow: hidden;
}
.brand-cta-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 70% 50%, rgba(212,98,26,0.12) 0%, transparent 65%);
  pointer-events: none;
}
.brand-cta-section::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, rgba(212,98,26,0.6) 20%, var(--orange) 50%, rgba(212,98,26,0.6) 80%, transparent 100%);
}

/* PP2-14: brand-cta-section Text-Elemente */
.brand-cta-section h2 {
  letter-spacing: -0.3px !important;
  line-height: 1.18 !important;
}
.brand-cta-section p {
  color: rgba(255,255,255,0.68) !important;
  line-height: 1.75 !important;
}

/* PP2-15: partner-form-section (profipartner) — stärkere Tiefe */
.partner-form-section {
  background: linear-gradient(135deg, #111122 0%, #1a1a2a 100%) !important;
}
.partner-form-section::before {
  background: radial-gradient(ellipse 55% 55% at 50% 50%, rgba(212,98,26,0.10) 0%, transparent 70%) !important;
}

/* PP2-16: pp-highlight-banner — schärfer, dunkler, vertrauensstärker */
.pp-highlight-banner {
  background: linear-gradient(135deg, #111122 0%, #1a1a2e 100%) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 14px !important;
}
.pp-highlight-item i {
  font-size: 1.15rem !important;
  opacity: 0.9;
}


/* ─── PP2 PHASE 4: ICON POLISH ──────────────────────────────────────────────
   Icon-Farbe, Icon-Gewicht, Icon-Kontrast auf hellen + dunklen Flächen.
   HTML-Icon-Austausch (fa-server → fa-microchip-alt, fa-tint → fa-wind etc.)
   wird über separate HTML-Edits erledigt. Hier: globale Icon-Stilregeln.
   ────────────────────────────────────────────────────────────────────────── */

/* PP2-17: prod-icon (T1/T2/T3 Produkt-Cards) — Icon-Frame */
.prod-icon {
  width: 54px !important;
  height: 54px !important;
  background: rgba(212,98,26,0.1) !important;
  border: 1.5px solid rgba(212,98,26,0.22) !important;
  border-radius: 0 !important;
  border-left: 3px solid var(--orange) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 16px !important;
  transition: background 0.25s, border-color 0.25s !important;
}
.prod-card:hover .prod-icon {
  background: rgba(212,98,26,0.18) !important;
  border-color: rgba(212,98,26,0.45) !important;
}
.prod-icon i {
  font-size: 1.3rem !important;
  color: var(--orange) !important;
}

/* PP2-18: product-card Icon (T4) — Icon-Framing */
.product-card .product-card-icon,
.product-card-icon {
  width: 52px !important;
  height: 52px !important;
  background: rgba(212,98,26,0.1) !important;
  border: 1.5px solid rgba(212,98,26,0.22) !important;
  border-radius: 0 !important;
  border-left: 3px solid var(--orange) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0;
  transition: background 0.25s, border-color 0.25s !important;
}
.product-card:hover .product-card-icon {
  background: rgba(212,98,26,0.2) !important;
  border-color: rgba(212,98,26,0.5) !important;
}
.product-card-icon i {
  font-size: 1.25rem !important;
  color: var(--orange) !important;
}

/* PP2-19: service-card Icon (leistungen.html) — Icon-Framing */
.service-card .service-icon,
.service-icon {
  width: 56px;
  height: 56px;
  background: rgba(212,98,26,0.1);
  border: 1.5px solid rgba(212,98,26,0.22);
  border-radius: 0;
  border-left: 3px solid var(--orange);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  transition: background 0.25s, border-color 0.25s;
}
.service-card:hover .service-icon {
  background: rgba(212,98,26,0.2);
  border-color: rgba(212,98,26,0.5);
}
.service-icon i {
  font-size: 1.35rem;
  color: var(--orange);
}

/* PP2-20: vorteil-icon (profipartner) — harmonisiert zum harten System */
.vorteil-icon {
  width: 54px !important;
  height: 54px !important;
  border-radius: 0 !important;
  border: 1.5px solid rgba(212,98,26,0.2) !important;
  border-left: 3px solid var(--orange) !important;
  transition: background 0.25s, border-color 0.25s !important;
}
.vorteil-card:hover .vorteil-icon {
  border-color: rgba(255,255,255,0.3) !important;
}
.vorteil-icon i {
  font-size: 1.3rem !important;
}

/* PP2-21: bat-features Checklist-Icons (T1) — schärferer Grün-Kontrast */
.bat-features li i,
.bat-features .fa-check-circle,
.brand-features li i,
.brand-features .fa-check-circle {
  color: #22c55e !important;
  font-size: 1rem !important;
  flex-shrink: 0;
}

/* PP2-22: kontakt-usp-item Icons — etwas zurückhaltender, vertrauensstärker */
.kontakt-usp-item i {
  font-size: 1.75rem !important;
  color: var(--orange) !important;
  opacity: 0.9;
}

/* PP2-23: contact-card-icon — Icon-Framing */
.contact-card-icon {
  width: 46px !important;
  height: 46px !important;
  border-radius: 0 !important;
  border-left: 3px solid var(--orange) !important;
  background: rgba(212,98,26,0.11) !important;
  border-top: 1px solid rgba(212,98,26,0.2) !important;
  border-right: 1px solid rgba(212,98,26,0.2) !important;
  border-bottom: 1px solid rgba(212,98,26,0.2) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
.contact-card-icon i {
  color: var(--orange) !important;
  font-size: 1.1rem !important;
}
/* WhatsApp-Karte bleibt grün (Inline-Style im HTML — kein Override nötig) */

/* PP2-24: section-tag (globale Labels) — harte Kante */
.section-tag {
  font-size: 0.76rem !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  color: var(--orange) !important;
  background: rgba(212,98,26,0.1) !important;
  border-top: 1px solid rgba(212,98,26,0.2) !important;
  border-right: 1px solid rgba(212,98,26,0.2) !important;
  border-bottom: 1px solid rgba(212,98,26,0.2) !important;
  border-left: 3px solid var(--orange) !important;
  padding: 5px 14px !important;
  border-radius: 0 !important;
  display: inline-block !important;
  margin-bottom: 12px !important;
}


/* ─── PP2 PHASE 5: CARDS / MODULE / TRUST-BLÖCKE ───────────────────────────
   prod-cards (T1/T3), product-cards (T4), vorteil-cards (profipartner),
   service-cards (leistungen), contact-cards (kontakt), bat-features (T1),
   bcs-trust (T1 CTA-Trust-Strip), brand-features (T4)
   ────────────────────────────────────────────────────────────────────────── */

/* PP2-25: prod-card (T1/T3) — hartes Karten-System */
.prod-card {
  border-radius: 0 !important;
  border: 1px solid rgba(212,98,26,0.1) !important;
  border-left: 3px solid transparent !important;
  box-shadow: none !important;
  transition: border-left-color 0.25s !important;
  padding: 28px 24px !important;
}
.prod-card:hover {
  transform: none !important;
  box-shadow: none !important;
  border-color: rgba(212,98,26,0.1) !important;
  border-left-color: var(--orange) !important;
}
/* PP2-25-GRADIENT-BAR: top gradient-bar border-radius entfernen */
.prod-card::before {
  border-radius: 0 !important;
}
.prod-card h3 {
  font-size: 1.0rem !important;
  font-weight: 700 !important;
  margin-bottom: 8px !important;
  letter-spacing: -0.1px;
}
.prod-card p {
  font-size: 0.88rem !important;
  line-height: 1.68 !important;
  color: var(--mid) !important;
}
.prod-list {
  margin-top: 12px !important;
  font-size: 0.82rem !important;
  line-height: 1.7 !important;
}

/* PP2-26: product-card (T4) — hartes Karten-System */
.product-card {
  border-radius: 0 !important;
  border: 1px solid rgba(212,98,26,0.1) !important;
  border-left: 3px solid transparent !important;
  box-shadow: none !important;
  transition: border-left-color 0.25s !important;
}
.product-card:hover {
  box-shadow: none !important;
  border-color: rgba(212,98,26,0.1) !important;
  border-left-color: var(--orange) !important;
  transform: none !important;
}

/* PP2-27: vorteil-card (profipartner) — hartes System */
.vorteil-card {
  border-radius: 0 !important;
  border-left: 3px solid transparent !important;
  box-shadow: none !important;
  transition: border-left-color 0.25s !important;
}
.vorteil-card:hover {
  border-left-color: var(--orange) !important;
  box-shadow: none !important;
  transform: none !important;
}

/* PP2-28: service-card System (leistungen.html) — hartes Karten-System */
.service-card {
  border-radius: 0;
  border: 1px solid rgba(212,98,26,0.1);
  border-left: 3px solid transparent;
  box-shadow: none;
  background: #fff;
  padding: 32px 28px;
  transition: border-left-color 0.25s;
  position: relative;
  overflow: hidden;
}
.service-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--orange);
  transform: scaleX(0);
  transition: transform 0.25s ease;
  transform-origin: left;
}
.service-card:hover {
  transform: none;
  box-shadow: none;
  border-color: rgba(212,98,26,0.1);
  border-left-color: var(--orange);
}
.service-card:hover::after { transform: scaleX(1); }

/* PP2-29: contact-card (kontakt.html) — hartes Karten-System */
.contact-card {
  border-radius: 0 !important;
  border: 1px solid rgba(212,98,26,0.1) !important;
  border-left: 3px solid transparent !important;
  box-shadow: none !important;
  transition: border-left-color 0.22s !important;
}
.contact-card:hover {
  box-shadow: none !important;
  transform: none !important;
  border-left-color: var(--orange) !important;
}

/* PP2-30: bat-features (T1) — mehr Weißraum, sauberere Liste */
.bat-features {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
.bat-features li {
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  color: rgba(255,255,255,0.85) !important;
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
}

/* PP2-31: pp-feature-text (profipartner Feature Rows) — subtilere Box */
.pp-feature-text {
  background: rgba(255,255,255,0.96) !important;
  box-shadow: 0 4px 28px rgba(0,0,0,0.18) !important;
  border: 1px solid rgba(255,255,255,0.85) !important;
}
.pp-feature-text h3 {
  letter-spacing: -0.2px !important;
}
.pp-feature-list li {
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  color: #1a1a2a !important;
}

/* PP2-32: testimonial-card (profipartner) — hartes System */
.testimonial-card {
  border-radius: 0 !important;
  border: 1px solid rgba(212,98,26,0.1) !important;
  border-left: 3px solid transparent !important;
  box-shadow: none !important;
  transition: border-left-color 0.22s !important;
}
.testimonial-card:hover {
  transform: none !important;
  box-shadow: none !important;
  border-left-color: var(--orange) !important;
}
.testimonial-icon {
  font-size: 1.7rem !important;
  color: var(--orange) !important;
  opacity: 0.75 !important;
}

/* PP2-33: stufe-card (profipartner) — hartes System */
.stufe-card {
  border-radius: 0 !important;
  border-width: 1.5px !important;
  border-left-width: 3px !important;
  box-shadow: none !important;
}
.stufe-card.featured {
  box-shadow: none !important;
  border-left-color: var(--orange) !important;
}

/* PP2-34: brand-about-grid (T4) — hartes Karten-System */
.brand-about-card {
  border-radius: 0 !important;
  border: 1px solid rgba(212,98,26,0.1) !important;
  border-left: 3px solid transparent !important;
  box-shadow: none !important;
  transition: border-left-color 0.25s !important;
}
.brand-about-card:hover {
  transform: none !important;
  box-shadow: none !important;
  border-left-color: var(--orange) !important;
}


/* ─── PP2 PHASE 6: TYPOGRAFIE / WEISSRAUM / RHYTHMUS ───────────────────────
   Headline-Hierarchie, Mikrotexte, Section-Titles, vertikale Abstände,
   Card-Titel, CTA-Texte. Ziel: Editorial-Qualität, mehr Ruhe, mehr Reife.
   ────────────────────────────────────────────────────────────────────────── */

/* PP2-35: section-title (global) — schärfere Headline-Hierarchie */
.section-title {
  letter-spacing: -0.4px !important;
  line-height: 1.18 !important;
}
.section-title .highlight {
  color: var(--orange) !important;
}

/* PP2-36: section-subtitle (global) — bessere Lead-Lesbarkeit */
.section-subtitle {
  font-size: 1.0rem !important;
  color: rgba(255,255,255,0.62) !important;
  line-height: 1.80 !important;
  max-width: 640px;
}
/* Auf hellen Flächen */
.section:not(.bh-section):not(.brand-hero):not(.bat-section):not(.bcs-section):not(.brand-cta-section) .section-subtitle,
.section--light .section-subtitle {
  color: #555 !important;
}

/* PP2-37: section-head/.section-header — harmonisierter vertikaler Abstand */
.section-head,
.section-header {
  margin-bottom: 40px !important;
}
.section-head .section-tag,
.section-header .section-tag {
  margin-bottom: 10px !important;
}

/* PP2-38: kh-quicklink (kontakt Hero) — flacher Chip-Stil */
.kh-quicklink {
  font-size: 0.86rem !important;
  padding: 9px 18px !important;
  border-radius: 0 !important;
  font-weight: 600 !important;
  letter-spacing: 0.1px;
}

/* PP2-39: kontakt-header h1 — schärfere Gewichtung */
.kontakt-header h1 {
  letter-spacing: -0.5px !important;
  line-height: 1.14 !important;
}

/* PP2-40: partner-hero h1 — Klarheit + Gewicht */
.partner-hero h1 {
  letter-spacing: -0.5px !important;
  line-height: 1.13 !important;
}
.partner-hero-badge {
  font-size: 0.78rem !important;
  letter-spacing: 0.6px !important;
  padding: 7px 18px !important;
}

/* PP2-41: section padding harmonisiert */
.section {
  padding-top: 80px !important;
  padding-bottom: 80px !important;
}
.brand-products,
.brand-faq {
  /* geerbter Wert aus CP-Block bleibt */
}

/* PP2-42: pp-vorteile-section, pp-feature-rows — Weißraum-Rhythmus */
.pp-vorteile-section {
  padding: 80px 0 !important;
}
.pp-feature-rows {
  gap: 72px !important;
}


/* ─── PP2 PHASE 7: FARBLOGIK / PREMIUM-KONTRASTE ───────────────────────────
   Dunkle Flächen, Trust-Farben, Icon-Farben, Footer, Textkontraste.
   Keine schwarzen Texte auf dunklen Flächen, keine schwachen Outline-Buttons.
   ────────────────────────────────────────────────────────────────────────── */

/* PP2-43: pp-vorteile-section BG — aus #3a3a4a → tieferes Dunkel */
.pp-vorteile-section {
  background-color: #111122 !important;
}
.pp-vorteile-section .section-title { color: var(--orange) !important; }
.pp-vorteile-section .section-subtitle { color: rgba(255,255,255,0.6) !important; }
.pp-vorteile-section .section-title .highlight { color: var(--orange) !important; }

/* PP2-44: contact-section BG (kontakt.html) — bereits auf #1a1a2e durch CP-31,
   hier: Sicherungs-Override + Tiefe */
.contact-section {
  background: linear-gradient(135deg, #0f0f1e 0%, #1a1a2e 60%, #0f0f1e 100%) !important;
}
.contact-section::before {
  background: radial-gradient(ellipse 60% 60% at 30% 50%, rgba(212,98,26,0.08) 0%, transparent 65%) !important;
  opacity: 0.7 !important;
}

/* PP2-45: kontakt-usp BG — harmonisiert mit tieferem Dunkel */
.kontakt-usp {
  background: #0f0f1e !important;
  border-top: 1px solid rgba(212,98,26,0.18) !important;
  border-bottom: 1px solid rgba(212,98,26,0.18) !important;
}
.kontakt-usp-item strong { color: #fff !important; }
.kontakt-usp-item span { color: rgba(255,255,255,0.6) !important; }

/* PP2-46: stufen-section BG (profipartner) — aus #fafafa → leichtes Off-White */
.stufen-section {
  background: #f7f7f8 !important;
}

/* PP2-47: brand-faq BG-Alternierung (T4) — sanfteres Off-White */
.brand-faq {
  background: #f8f8f9 !important;
}

/* PP2-48: partner-form-info Texte auf dunklem BG — korrekte Kontraste */
.partner-form-info h2 { color: #fff !important; }
.partner-form-info p { color: rgba(255,255,255,0.68) !important; }
.partner-contact-item { color: rgba(255,255,255,0.78) !important; }

/* PP2-49: bh-section / brand-hero BG-Tiefe — tiefer Gradient */
.bh-section {
  background: linear-gradient(135deg, #0c0c1a 0%, #1a1a2e 40%, #111122 100%) !important;
}
.brand-hero {
  background: linear-gradient(135deg, #0c0c1a 0%, #1a1a2e 40%, #111122 100%) !important;
}

/* PP2-50: form-header BG (kontakt Formular) — leicht wärmeres Orange */
.form-header {
  background: linear-gradient(135deg, var(--orange-dark) 0%, var(--orange) 100%) !important;
}


/* ─── PP2 PHASE 8: GLOBALE HARMONISIERUNG ──────────────────────────────────
   Siteweit einheitliche Systeme: Hero, CTA, Cards, Trust, Icons, Typo, Spacing.
   ────────────────────────────────────────────────────────────────────────── */

/* PP2-51: globale section-divider via Orange-Akzentlinie (Top) — für dunkle Sektionen */
.bh-section,
.bat-section,
.bcs-section,
.brand-hero,
.brand-cta-section,
.partner-form-section {
  border-top: none !important;
}

/* PP2-52: brand-name-badge (T1 oben) — hartes Marken-Label */
.brand-name-badge {
  font-size: 0.76rem !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: var(--orange) !important;
  border-top: 1px solid rgba(212,98,26,0.3) !important;
  border-right: 1px solid rgba(212,98,26,0.3) !important;
  border-bottom: 1px solid rgba(212,98,26,0.3) !important;
  border-left: 3px solid var(--orange) !important;
  background: rgba(212,98,26,0.1) !important;
  padding: 5px 14px !important;
  border-radius: 0 !important;
}

/* PP2-53: bcs-trust-items (T1 CTA-Block Trust-Strip) — ruhige Trust-Architektur */
.bcs-trust {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 20px !important;
  margin-top: 28px !important;
}
.bcs-trust-item {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,0.72) !important;
}
.bcs-trust-item i {
  color: #22c55e !important;
  font-size: 0.88rem !important;
}

/* PP2-54: brand-features (T4 About-Sektion) — einheitliche Checklist */
.brand-features {
  display: flex !important;
  flex-direction: column !important;
  gap: 9px !important;
}
.brand-features li {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  font-size: 0.9rem !important;
  color: rgba(255,255,255,0.82) !important;
  font-weight: 500 !important;
}
.brand-features li i { color: #22c55e !important; font-size: 0.95rem !important; }

/* PP2-55: brand-section (T4 About-Sektion) — ruhigerer Tondunkel-Hintergrund */
.brand-section {
  background: linear-gradient(135deg, #111122 0%, #1a1a2e 100%) !important;
}

/* PP2-56: brand-faq .faq-item — hartes System */
.faq-item {
  border-radius: 0 !important;
  border: 1px solid rgba(212,98,26,0.1) !important;
  border-left: 3px solid transparent !important;
  overflow: hidden !important;
}
.faq-q {
  padding: 18px 20px !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  letter-spacing: -0.1px;
}
.faq-a {
  padding: 0 20px 18px !important;
  font-size: 0.9rem !important;
  line-height: 1.72 !important;
}

/* PP2-57: brand-hero-ctas Gap — harmonisierter Abstand zwischen CTAs */
.brand-hero-ctas {
  gap: 12px !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  margin-top: 28px !important;
}

/* PP2-58: ph-cta-group (teileanfrage Hero) — saubererer Gap */
.ph-cta-group {
  gap: 12px !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  margin-top: 26px !important;
}

/* PP2-59: bh-actions (T1 Hero) — harmonisierter Abstand */
.bh-actions {
  gap: 12px !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  margin-top: 26px !important;
}

/* PP2-60: hero-ctas (index.html) — gleiches System */
.hero-ctas {
  gap: 12px !important;
  flex-wrap: wrap !important;
  align-items: center !important;
}

/* PP2-61: partner-hero-actions — konsistentes CTA-System */
.partner-hero-actions {
  gap: 12px !important;
  flex-wrap: wrap !important;
  align-items: center !important;
}

/* PP2-62: kh-quicklinks (kontakt Hero) — harmonisierter Chip-Strip */
.kh-quicklinks {
  gap: 10px !important;
  flex-wrap: wrap !important;
  margin-top: 26px !important;
}

/* PP2-63: map-wrap (kontakt) — hartes Framing */
.map-wrap {
  border-radius: 0 !important;
  overflow: hidden !important;
  box-shadow: none !important;
  border: 1px solid rgba(212,98,26,0.15) !important;
  border-left: 3px solid var(--orange) !important;
}
.map-link {
  border-radius: 0 !important;
  font-size: 0.84rem !important;
  letter-spacing: 0.2px;
}

/* PP2-64: form-wrapper (kontakt) — hartes Framing */
.form-wrapper {
  border-radius: 0 !important;
  overflow: hidden !important;
  box-shadow: none !important;
  border: 1px solid rgba(212,98,26,0.1) !important;
  border-left: 3px solid var(--orange) !important;
}

/* PP2-65: bat-section (T1 Features-Sektion) — ruhigerer Dunkelton */
.bat-section {
  background: linear-gradient(135deg, #111122 0%, #1a1a2e 100%) !important;
}
.bat-section .bat-title {
  letter-spacing: -0.3px !important;
}

/* PP2-66: brand-section-light (helle About-Zonen T4) — saubereres Off-White */
.brand-section--light,
.brand-about-section,
.brand-about-section--light {
  background: #f8f8f9 !important;
}

/* PP2-67: USP-Bar (index.html) — ruhigere Trust-Architektur */
.usp-bar,
.usp-strip {
  border-bottom: 1px solid rgba(212,98,26,0.12) !important;
}
.usp-item i,
.usp-icon {
  color: var(--orange) !important;
}

/* PP2-68: audience-card (index.html) — hartes Karten-System */
.audience-card {
  border-radius: 0 !important;
  border: 1px solid rgba(212,98,26,0.1) !important;
  border-left: 3px solid transparent !important;
  box-shadow: none !important;
  transition: border-left-color 0.25s !important;
}
.audience-card:hover {
  transform: none !important;
  box-shadow: none !important;
  border-left-color: var(--orange) !important;
}

/* PP2-69: anfrage-block (index.html) — stärkere Tiefe + Orange-Akzentlinie */
.anfrage-block,
.anf-block {
  position: relative;
  overflow: hidden;
}
.anfrage-block::after,
.anf-block::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, rgba(212,98,26,0.6) 25%, var(--orange) 50%, rgba(212,98,26,0.6) 75%, transparent 100%);
}

/* PP2-70: Corteco-style CTA (T6) — harmonisiert zu PP2-System */
.corteco-cta-section,
.bcs-section {
  position: relative;
  overflow: hidden;
}

/* PP2-71: global .btn Transition-Verfeinerung */
.btn {
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease, border-color 0.2s ease, color 0.2s ease !important;
}

/* PP2-72: global section-title auf dunklen Flächen — einheitliches Weiß */
.bh-section .section-title,
.bat-section .section-title,
.bcs-section .section-title,
.brand-hero .section-title,
.brand-cta-section .section-title,
.brand-section .section-title,
.partner-form-section .section-title,
.pp-vorteile-section .section-title {
  color: #fff !important;
}


/* ── Premium Polish Phase 2 Ende ─────────────────────────────── */

/* ─────────────────────────────────────────────────────────────
   R-01 FIX: WA-Icon grün in T1/T2/T3 bh-btn-outline + bcs-btn-outline
   Problem: .bh-btn-outline und .bcs-btn-outline haben weißes Outline
   für alle Sekundär-Buttons. WA-Button ist visuell nicht von Phone-
   Button unterscheidbar. Fix: FA-WA-Icon erhält WhatsApp-Grün.
   Betroffen: hella, bosch, trw, ngk, pierburg, bmw, mercedes, etc.
   ─────────────────────────────────────────────────────────────*/
.bh-actions .fab.fa-whatsapp,
.bh-btn-outline .fab.fa-whatsapp,
.bh-actions a[href*="whatsapp"] .fab,
.bcs-actions .bcs-btn-outline .fab.fa-whatsapp,
.bcs-btn-outline .fab.fa-whatsapp {
  color: #25d366 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   CA-01 – CONTRAST ACCESSIBILITY REMEDIATION
   Quelle: WCAG-AA-Kontrast-Audit (28 Verstöße: 5×P0, 14×P1, 9×P2)
   Scope: P0 + P1 — alle globalen Cluster (Phase 1)
   Methode: Override-Layer identisch zum PP2-Block-Muster
   Alle !important-Deklarationen überschreiben css/style.css gezielt.
   ─────────────────────────────────────────────────────────────── */

/* ─── CLUSTER A — ORANGE + WEISSTEXT ──────────────────────────────
   Problem : #D4621A als Button-BG → #fff darauf = 3.35:1  ❌ (P0)
             WCAG AA normaler Text erfordert ≥ 4.5:1
   Fix     : #B8521A → L≈0.107 → #fff darauf = 5.0:1  ✅
   Hover   : #9e4415 → noch dunkler → ≥ 5.8:1  ✅
   ─────────────────────────────────────────────────────────────── */

/* CA-A-01: .btn / button / [type="submit"] — P0 (siteweit)
   Before: background-color: #D4621A  (3.35:1)
   After : background-color: #B8521A  (5.0:1) */
.btn,
button,
[type="submit"],
.btn-primary,
.nav-btn.btn-primary {
  background-color: #B8521A !important;
}

/* CA-A-01h: Hover-State — P0
   Before: background-color: #D4621A  (3.35:1)
   After : background-color: #9e4415  (5.8:1) */
.btn:hover,
button:hover,
[type="submit"]:hover,
.btn-primary:hover,
.nav-btn.btn-primary:hover {
  background-color: #9e4415 !important;
}

/* CA-A-02: .schulung-anmelden-btn — P0 (schulungsakademie.html)
   Before: background: var(--orange)  → #D4621A  (3.35:1)
   After : background: #B8521A  (5.0:1) */
.schulung-anmelden-btn {
  background: #B8521A !important;
}
.schulung-anmelden-btn:hover {
  background: #9e4415 !important;
}

/* CA-A-03: .usp-item opacity-Reduktionen — P0 / P1
   Before: .usp-item i   { opacity: 0.9 }  → eff. ~3.0:1  (P1)
           .usp-item span { opacity: 0.85 } → eff. ~2.85:1 (P0)
   After : opacity: 1 → voller #fff-Kontrast 3.35:1 auf #D4621A-BG
   Hinweis: USP-Banner-BG bleibt #D4621A; .usp-item strong ist
            font-weight:700 + font-size 0.95rem ≈ 12.16px Bold →
            kein Large-Text-Threshold → 4.5:1-Regel gilt.
   Zusatz-Fix: .usp-banner BG auf #B8521A → 5.0:1 auch für
               .usp-item strong und span gesichert. */
.usp-banner {
  background: #B8521A !important;
}
.usp-item i {
  opacity: 1 !important;
}
.usp-item span {
  opacity: 1 !important;
}
.usp-item strong {
  opacity: 1 !important;
}

/* ─── CLUSTER B — HALBTRANSPARENTE TEXTE AUF DUNKLEN FLÄCHEN ──────
   Problem : rgba(255,255,255, <0.7) auf #1A1A1A / dunklen Verläufen
             → zu schwach für WCAG AA
   ─────────────────────────────────────────────────────────────── */

/* CA-B-01: .footer-legal p — P1
   Before: color: rgba(255,255,255,0.35)  → eff. #6a6a6a → 3.42:1  ❌
   After : color: rgba(255,255,255,0.55)  → eff. #a6a6a6 → 7.6:1   ✅ */
.footer-legal p {
  color: rgba(255, 255, 255, 0.55) !important;
}

/* CA-B-02: .nl-b2b-sub — P1
   Before: color: rgba(255,255,255,0.65)  → ~3.4:1 am hellsten Verlaufspunkt  ❌
   After : color: rgba(255,255,255,0.82)  → ~4.6:1 auch am hellsten Punkt     ✅ */
.nl-b2b-sub {
  color: rgba(255, 255, 255, 0.82) !important;
}

/* ─── CLUSTER C — OUTLINE / BORDER NON-TEXT CONTRAST ──────────────
   Problem : rgba(255,255,255,0.30) border auf dunklem BG
             → ~2.5:1  ❌  WCAG 1.4.11 Non-text Contrast ≥ 3:1
   ─────────────────────────────────────────────────────────────── */

/* CA-C-01: .brands-all-btn border — P1
   Before: border: 1.5px solid rgba(255,255,255,0.30)  → ~2.5:1  ❌
   After : border-color: rgba(255,255,255,0.55)         → ~4.0:1  ✅ */
.brands-all-btn {
  border-color: rgba(255, 255, 255, 0.55) !important;
}

/* ─── BADGE REDESIGN — HERO EYEBROW BADGE ─────────────────────────
   Ziel : Pill-Form entfernen, Hintergrund kontraststärker & definierter,
          professionelleres Erscheinungsbild
   Scope: .hero-badge in index.html (js/main.js Z.98: nur querySelector,
          kein Style-Override → CSS-Override sicher)
   ─────────────────────────────────────────────────────────────── */

/* BADGE-01: .hero-badge — Desktop + Mobile
   Before: background: rgba(212,98,26,0.15)   → helles creme-oranges Overlay (Bonbon-Look)
           border    : 1px solid rgba(212,98,26,0.30) → schwache Border
           border-radius: 100px               → volle Pill-Form
   After : background: rgba(0,0,0,0.55)       → dunkle, klare Fläche (kontrastreich auf dunklem Hero-BG)
           border    : 1px solid rgba(212,98,26,0.55) → markantere Orange-Border, bleibt zur Marke
           border-radius: 4px                 → saubere, geradlinige Form, kein Pill */
.hero-badge {
  background    : rgba(0, 0, 0, 0.55)              !important;
  border        : 1px solid rgba(212, 98, 26, 0.55) !important;
  border-radius : 4px                               !important;
}

/* ── BADGE REDESIGN Ende ────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════
   HS-01 — HEADING SYSTEM CONSISTENCY REMEDIATION
   Ziel : Überschriften-Komponenten siteübergreifend konsistent,
          geradlinig, professionell — keine Pill-Formen, keine
          cremigen Pastellflächen, inhaltsbasierte Badge-Breite
   Scope: Globale Overrides für style.css / brand-style.css-Basis
   ═══════════════════════════════════════════════════════════════════ */

/* ─── HS-A: .section-tag — Globaler Pill-Fix ────────────────────
   Problem : border-radius: 100px → übermäßige Pill-Form
   After   : border-radius: 0; border-left: 3px solid var(--orange)
   ─────────────────────────────────────────────────────────────── */
.section-tag {
  border-radius : 0           !important;
  border-left   : 3px solid var(--orange) !important;
  width         : fit-content !important;
  max-width     : 100%        !important;
}

/* ─── HS-B: .bh-badge (Text-Variante) — Brand-Hero Eyebrow ──────
   Problem : border-radius: Pill-Form
   After   : border-radius: 0; border-left: 3px solid var(--orange)
   ─────────────────────────────────────────────────────────────── */
.bh-badge {
  background    : rgba(0, 0, 0, 0.45)               !important;
  border-top    : 1px solid rgba(212, 98, 26, 0.50) !important;
  border-right  : 1px solid rgba(212, 98, 26, 0.50) !important;
  border-bottom : 1px solid rgba(212, 98, 26, 0.50) !important;
  border-left   : 3px solid var(--orange)           !important;
  border-radius : 0                                 !important;
  width         : fit-content                       !important;
  max-width     : 100%                              !important;
}

/* Icon-Container (.bh-inner .bh-badge) — AUSNAHME:
   Kein Text-Label, sondern quadratischer Brand-Icon-Container.
   Keine Pill-Problematik. Unverändert lassen — explizit zurücknehmen. */
.bh-inner .bh-badge {
  background    : rgba(255, 255, 255, 0.10) !important;
  border-top    : 1px solid rgba(255, 255, 255, 0.20) !important;
  border-right  : 1px solid rgba(255, 255, 255, 0.20) !important;
  border-bottom : 1px solid rgba(255, 255, 255, 0.20) !important;
  border-left   : 3px solid var(--orange) !important;
  border-radius : 0                        !important;
  width         : 80px                     !important;
  height        : 80px                     !important;
}

/* ─── HS-C: .ph-badge — Page-Header Eyebrow (schulungsakademie,
             teileanfrage, profipartner, partner-login)
   Problem : border-radius: Pill-Form
   After   : border-radius: 0; border-left: 3px solid var(--orange)
   ─────────────────────────────────────────────────────────────── */
.ph-badge {
  background    : rgba(0, 0, 0, 0.45)               !important;
  border-top    : 1px solid rgba(212, 98, 26, 0.50) !important;
  border-right  : 1px solid rgba(212, 98, 26, 0.50) !important;
  border-bottom : 1px solid rgba(212, 98, 26, 0.50) !important;
  border-left   : 3px solid var(--orange)           !important;
  border-radius : 0                                 !important;
  width         : fit-content                       !important;
  max-width     : 100%                              !important;
}

/* ─── HS-D: .tdc-badge — Badge-Fix ──────
   After   : border-radius: 0; border-left: 3px solid var(--orange)
   ─────────────────────────────────────────────────────────────── */
.tdc-badge {
  border-radius : 0           !important;
  border-left   : 3px solid var(--orange) !important;
  width         : fit-content !important;
  max-width     : 100%        !important;
}

/* ─── HS-E: .section-tag--light — Dark-BG-Variante ──────────────
   Polishing 2026-08:
   color: #ffffff (Ratio ~7.5:1 auf dunklem BG → WCAG AA ✓)
   background: rgba(255,255,255,0.13) — sichtbar ohne Dominanz
   border: rgba(255,255,255,0.22) — dezente Kontur
   ─────────────────────────────────────────────────────────────── */
.section-tag--light {
  background : rgba(255,255,255,0.13) !important;
  border     : 1px solid rgba(255,255,255,0.22) !important;
  color      : #ffffff !important;
}

/* ── HS-01 Ende ──────────────────────────────────────────────── */

/* ── CA-01 Ende ──────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════
   FOOTER-HARMONIZATION-2026
   Ziel: Alle Footer (Typ A/B/C/D) strukturell und visuell identisch
   zum Referenz-Footer der Startseite (index.html).
   Methode: Neue CSS-Klassen .footer-new-grid / .footer-new-col global
            definieren; alte Selektoren (.site-footer, .footer-grid,
            footer.footer) werden auf identische Optik normiert.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Neue Klassen (Referenz index.html, jetzt global) ──────── */
.footer-new-grid {
  display: grid !important;
  grid-template-columns: 2fr 1fr 1fr 1.5fr !important;
  gap: 40px !important;
}
.footer-new-col h4 {
  font-family: 'Oswald', sans-serif !important;
  font-size: 1rem !important;
  color: #fff !important;
  margin-bottom: 16px !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
}
.footer-new-col ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
.footer-new-col ul li a {
  color: rgba(255,255,255,.55) !important;
  font-size: .88rem !important;
  text-decoration: none !important;
  transition: color .2s !important;
}
.footer-new-col ul li a:hover { color: var(--orange) !important; }
.footer-brand-text {
  font-size: .87rem !important;
  color: rgba(255,255,255,.5) !important;
  line-height: 1.65 !important;
  margin: 14px 0 20px !important;
}
.footer-contact-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
.footer-contact-list li {
  font-size: .87rem !important;
  color: rgba(255,255,255,.55) !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 9px !important;
  line-height: 1.5 !important;
}
.footer-contact-list li i {
  color: var(--orange) !important;
  margin-top: 2px !important;
  flex-shrink: 0 !important;
}
.footer-hours {
  background: rgba(255,255,255,.04) !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  margin-top: 12px !important;
  font-size: .8rem !important;
  color: rgba(255,255,255,.4) !important;
}

/* ── Alle Footer: einheitlicher dunkler Hintergrund ─────────── */
footer.footer,
footer.site-footer,
footer[style*="background:#111"] {
  background: var(--dark, #1a1a1a) !important;
  color: rgba(255,255,255,.7) !important;
}

/* ── footer-top: einheitliches Padding ──────────────────────── */
footer.footer .footer-top,
footer.site-footer .footer-top {
  padding: 72px 0 48px !important;
}

/* ── footer-bottom: einheitlich ────────────────────────────── */
footer.footer .footer-bottom,
footer.site-footer .footer-bottom {
  border-top: 1px solid rgba(255,255,255,.08) !important;
  padding: 20px 0 !important;
  display: flex !important;
  align-items: center !important;
}
footer.footer .footer-bottom .container,
footer.site-footer .footer-bottom .container {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}
footer.footer .footer-bottom p,
footer.site-footer .footer-bottom p {
  font-size: .83rem !important;
  color: rgba(255,255,255,.55) !important;
}

/* ── footer-legal: einheitlich ──────────────────────────────── */
.footer-legal {
  border-top: 1px solid rgba(255,255,255,.06) !important;
  padding: 16px 0 !important;
  background: inherit !important;
}
.footer-legal p {
  font-size: .74rem !important;
  color: rgba(255,255,255,.35) !important;
  line-height: 1.65 !important;
  text-align: center !important;
  max-width: 900px !important;
  margin: 0 auto !important;
}

/* ── social-links: einheitlich (überschreibt ältere Varianten) ─ */
footer.footer .social-links,
footer.site-footer .social-links,
footer .footer-social {
  display: flex !important;
  gap: 10px !important;
  margin-top: 0 !important;
}
footer .social-links a,
footer .footer-social a {
  width: 38px !important;
  height: 38px !important;
  background: rgba(255,255,255,.08) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: rgba(255,255,255,.7) !important;
  transition: var(--transition, all .3s ease) !important;
  text-decoration: none !important;
  font-size: .88rem !important;
}
footer .social-links a:hover,
footer .footer-social a:hover {
  background: var(--orange) !important;
  color: #fff !important;
  transform: none !important;
}

/* ── Responsive: 2-Spalten ab 768px ─────────────────────────── */
@media (max-width: 768px) {
  .footer-new-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 28px !important;
  }
  .footer-legal p { font-size: .70rem !important; text-align: left !important; }
}
@media (max-width: 480px) {
  .footer-new-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── FOOTER-HARMONIZATION-2026 Ende ─────────────────────────── */