/* ============================================================
   Footer
   HTML: <footer id="footer"> > .footer_main + .footer_bottom
   .footer_main contains: <address> + <nav>(s)
   ============================================================ */

#footer {
  background: var(--color-bg-dark);
  color: var(--color-text-inverse);
  margin-top: var(--gap-section);
  /* Override der globalen muted/light-Vars: auf dunklem BG müssen sie hell
     sein (WCAG AA gegen --color-bg-dark). Cascadiert auf alle Children. */
  --color-text-muted: hsl(220, 9%, 70%);
  --color-text-light: hsl(220, 9%, 78%);
}

/* Override content-width padding for full-bleed background */
#footer {
  max-width: none;
  padding-inline: 0;
}

/* --- Main area: multi-column --- */

.footer_main {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-block);
  max-width: var(--content-width);
  margin-inline: auto;
  padding: var(--gap-section) var(--padding-page);
}

@media (min-width: 45rem) {
  .footer_main {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 56rem) {
  .footer_main {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --- Footer headings --- */

#footer h2 {
  font-family: var(--font-body), sans-serif;
  font-size: var(--text-base);
  font-weight: 600;
  margin-block-end: var(--gap-inline);
  padding-block-end: var(--space-3);
  color: var(--color-text-inverse);
  /* Zier-Underline: kurzer Strich in primary-Farbe direkt unter dem Heading.
     Über Pseudo-Element (statt border-bottom) damit die Linie kürzer als das
     Heading ist. */
  position: relative;
}

#footer h2::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 2.5rem;
  height: 0.0625rem;
  background: var(--color-primary);
}

/* Reveal-Animation: Linie wächst von 0 auf 2.5rem wenn Heading via
   IntersectionObserver die .in-view-Klasse bekommt (siehe footer.js).
   Pattern analog review-stars.js / carousel.js — robust ohne @supports,
   funktioniert in allen Browsern mit IntersectionObserver-Support. */
#footer h2::after {
  width: 0;
  transition: width 0.6s ease-out;
}

#footer h2.in-view::after {
  width: 2.5rem;
}

/* --- Links --- */

#footer a {
  color: var(--color-text-light);
  transition: color var(--transition);
}

#footer a:hover {
  color: var(--color-text-inverse);
  text-decoration: none;
}

#footer address {
  font-style: normal;
  line-height: var(--leading);
  color: var(--color-text-light);
}

#footer nav li {
  margin-block-end: var(--space-2);
}

/* --- Bottom bar --- */

.footer_bottom {
  max-width: var(--content-width);
  margin-inline: auto;
  padding: var(--space-4) var(--padding-page);
  border-top: 0.0625rem solid rgba(255, 255, 255, 0.1);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  /* Copyright links, Social-Icons rechts wenn social_in_footer=true.
     Auf Mobile umbrechen und untereinander zentriert. */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.footer_bottom > p {
  margin: 0;
}

.footer_bottom .social {
  margin: 0;
}

/* Vendor-Branding (immoprofessional): eigene volle Zeile unter Copyright/Social,
   klein und dezent. */
.footer-branding {
  flex-basis: 100%;
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.footer-branding a {
  color: inherit;
  text-decoration: underline;
}

.footer-branding a:hover {
  color: var(--color-text-inverse);
}

@media (max-width: 44.999rem) {
  .footer_bottom {
    justify-content: center;
    text-align: center;
  }
}