/* ──────────────────────────────────────────────────────────────
   Footer – EINE Gestaltung für alle Seiten.

   Wichtig: feste Farb-/Maßwerte statt CSS-Variablen. Die sechs
   Snapshot-Seiten laden variables.css NICHT (nur das eingefrorene
   Tailwind-CSS), die 404 dagegen schon. Nur mit festen Werten
   sieht der Footer in beiden Welten gleich aus.

   Gehört zu includes/footer-site.php.
   ────────────────────────────────────────────────────────────── */
.site-footer{ background:#50535a; color:rgba(255,255,255,.6); }
.site-footer a{ color:inherit; text-decoration:none; }
.site-footer .footer-inner{ max-width:72rem; margin:0 auto; padding:5rem 1.5rem 3.5rem; }

.footer-grid{ display:grid; grid-template-columns:1fr; gap:3rem; margin-bottom:2.5rem; text-align:center; }
.footer-brand{ display:flex; flex-direction:column; align-items:center; }
.footer-brand img{ width:148px; height:42px; margin-bottom:1.25rem; }
.footer-brand p{ font-size:.875rem; line-height:1.6; margin:0 0 1.5rem; }
.footer-social{ display:flex; align-items:center; gap:1rem; }
.footer-social a{ color:rgba(255,255,255,.4); transition:color .2s; display:inline-flex; }
.footer-social a:hover{ color:#fff; }

.footer-col h4{
  color:#fff; font-family:'Jost','Gill Sans','Gill Sans MT',Calibri,sans-serif;
  font-size:10px; letter-spacing:.25em; text-transform:uppercase; margin:0 0 1.25rem; font-weight:400;
}
.footer-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.75rem; }
.footer-col a{ font-size:.875rem; transition:color .2s; }
.footer-col a:hover{ color:#fff; }
.footer-contact a{ display:flex; align-items:center; justify-content:center; gap:.75rem; font-size:.875rem; margin-bottom:.75rem; transition:color .2s; }
.footer-contact a:hover{ color:#fff; }

.footer-bottom{
  border-top:1px solid rgba(255,255,255,.1); padding-top:2rem;
  display:flex; flex-direction:column; align-items:center; gap:1.25rem;
  font-size:11px; text-align:center;
}
.footer-bottom p{ margin:0; }
.footer-bottom .footer-legal{ display:flex; gap:1.5rem; }
.footer-bottom a:hover{ color:#fff; }

@media (min-width:768px){
  .footer-grid{ grid-template-columns:repeat(3,1fr); text-align:left; }
  .footer-brand{ align-items:flex-start; }
  .footer-contact a{ justify-content:flex-start; }
  .footer-bottom{ flex-direction:row; justify-content:space-between; }
}

/* ── Seiten mit dem Abschluss-Baustein (includes/cta.php) ──
   Die weiße Karte taucht in den Footer ein und braucht oben Platz. */
.site-footer--cta .footer-inner{ padding-top:15rem; }
@media (max-width:640px){
  .site-footer .footer-inner{ padding-bottom:2.5rem; }
  .site-footer--cta .footer-inner{ padding-top:10.5rem; }
}
/* Ab 1100 px sitzt die Karte rechts; der Footer-Inhalt rückt nach links. */
@media (min-width:1100px){
  .site-footer--cta .footer-inner{ padding-top:4rem; padding-bottom:7.5rem; }
  .site-footer--cta .footer-grid,
  .site-footer--cta .footer-bottom{ max-width:calc(100% - 28rem); }
  .site-footer--cta .footer-grid{
    grid-template-columns:auto auto auto; justify-content:space-between; gap:2.5rem;
  }
}