/* modern.css – Solar-Redesign unser-balkon-kraftwerk.de
   Zweck : Rein optische Überschreibungen auf Bootstrap 5.2 — kein Text wird verändert.
   Farben: Anthrazit #2b2d42 · Sonnengelb #f5c300 · Weiß #ffffff
*/

/* ── 1. System-Fonts & Base ──────────────────────────────── */
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background-color: #f7f8fa;
  color: #1a1a2e;
}

/* ── 2. Navbar ───────────────────────────────────────────── */
.navbar.bg-dark {
  background-color: #2b2d42 !important;
  border-bottom: 3px solid #f5c300;
}
.navbar-brand {
  color: #f5c300 !important;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.navbar-brand:hover {
  color: #ffe566 !important;
}
.nav-link {
  color: rgba(255,255,255,0.88) !important;
  font-weight: 500;
  transition: color .2s;
}
.nav-link:hover,
.nav-link:focus {
  color: #f5c300 !important;
}
.dropdown-menu {
  border: none;
  border-top: 3px solid #f5c300;
  border-radius: 0 0 .5rem .5rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.14);
}
.dropdown-item:hover,
.dropdown-item:focus {
  background-color: #f5c300;
  color: #1a1a2e;
}

/* ── 3. Hero / Jumbotron ─────────────────────────────────── */
.bg-dark.text-light,
header.bg-dark {
  background-color: #2b2d42 !important;
}

/* ── 4. Buttons ──────────────────────────────────────────── */
.btn-primary {
  background-color: #f5c300;
  border-color: #f5c300;
  color: #1a1a2e;
  font-weight: 600;
  border-radius: .5rem;
  transition: background-color .2s, border-color .2s, transform .15s;
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: #e0b000;
  border-color: #e0b000;
  color: #1a1a2e;
  transform: translateY(-1px);
}
.btn-primary:active {
  background-color: #c99d00 !important;
  border-color: #c99d00 !important;
  color: #1a1a2e !important;
}
.btn-success {
  background-color: #f5c300;
  border-color: #f5c300;
  color: #1a1a2e;
  font-weight: 600;
  border-radius: .5rem;
  transition: background-color .2s, border-color .2s, transform .15s;
}
.btn-success:hover,
.btn-success:focus {
  background-color: #e0b000;
  border-color: #e0b000;
  color: #1a1a2e;
  transform: translateY(-1px);
}
.btn-success:active {
  background-color: #c99d00 !important;
  border-color: #c99d00 !important;
  color: #1a1a2e !important;
}
.btn-outline-primary {
  color: #2b2d42;
  border-color: #f5c300;
  font-weight: 600;
  border-radius: .5rem;
  transition: all .2s;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: #f5c300;
  border-color: #f5c300;
  color: #1a1a2e;
}

/* ── 5. Cards ────────────────────────────────────────────── */
.card {
  border: none;
  border-radius: .75rem;
  box-shadow: 0 2px 12px rgba(0,0,0,.07);
  transition: box-shadow .2s, transform .2s;
}
.card:hover {
  box-shadow: 0 6px 24px rgba(0,0,0,.13);
  transform: translateY(-2px);
}
.card-title {
  font-weight: 700;
  color: #2b2d42;
}
.card-footer.bg-transparent {
  background: transparent !important;
  border-top: 1px solid rgba(0,0,0,.06);
  padding-bottom: 1rem;
}

/* ── 6. Accordion (FAQ) ──────────────────────────────────── */
.accordion-button {
  font-weight: 600;
  background-color: #fff !important;
  color: #2b2d42 !important;
  border-radius: .5rem !important;
  box-shadow: none !important;
}
.accordion-button:not(.collapsed) {
  background-color: #f5c300 !important;
  color: #1a1a2e !important;
  box-shadow: none !important;
}
.accordion-button:not(.collapsed)::after {
  filter: brightness(0);
}
.accordion-item {
  border: 1px solid rgba(0,0,0,.08) !important;
  border-radius: .5rem !important;
  margin-bottom: .5rem;
  overflow: hidden;
}
.accordion-body {
  background-color: #fff;
  color: #2b2d42;
}

/* ── 7. Footer ───────────────────────────────────────────── */
footer.bg-dark,
footer {
  background-color: #2b2d42 !important;
  border-top: 3px solid #f5c300;
}
footer a {
  color: #f5c300 !important;
  text-decoration: none;
}
footer a:hover {
  color: #ffe566 !important;
  text-decoration: underline;
}

/* ── 8. Cookie-Banner ────────────────────────────────────── */
.cookie-banner {
  background-color: #2b2d42 !important;
  border-top: 2px solid #f5c300;
}

/* ── 9. Typografie & Links ───────────────────────────────── */
.container h1,
.container h2,
.container h3 {
  color: #2b2d42;
}
a {
  color: #a07800;
}
a:hover {
  color: #7a5c00;
}
/* Pill-Navigation (internes Linkgeflecht) */
nav[aria-label] a[style*="border-radius:999px"]:hover {
  background-color: #f5c300 !important;
  border-color: #f5c300 !important;
  color: #1a1a2e !important;
}

/* ── 10. Responsive ──────────────────────────────────────── */
@media (max-width: 767.98px) {
  .display-4,
  .display-5 {
    font-size: 1.75rem;
  }
}