/* ============================================
   Site Footer
   Loaded with the footer template part.
   ============================================ */
.site-footer{margin-top:var(--xxl);position:relative}
.footer-bands{
  position:relative;display:grid;grid-template-columns:1fr 1fr 1fr;
  align-items:stretch;min-height:280px;
}
.footer-bands .band-black{background:#000}
.footer-bands .band-yellow{
  background:var(--c-primary);color:#000;
  padding:var(--lg) var(--lg);
  position:absolute;left:18%;top:-40px;width:36%;min-width:360px;
  z-index:2;
}
.footer-bands .band-yellow .row{display:grid;grid-template-columns:120px 1fr;gap:var(--md);align-items:start}
.footer-bands .band-yellow h4{
  font-family:var(--ff-display);font-size:22px;letter-spacing:.06em;
  text-transform:uppercase;margin:0;line-height:1;
}
.footer-bands .band-yellow ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;font-size:14px}
.footer-bands .band-yellow li{display:flex;align-items:center;gap:10px}
.footer-bands .band-yellow svg{width:16px;height:16px;flex:0 0 auto}
.footer-bands .legal{
  position:absolute;right:0;top:0;bottom:0;width:25%;
  background:#9a9a9a;color:#222;padding:var(--lg) var(--lg);
  display:flex;flex-direction:column;justify-content:center;gap:14px;
}
.footer-bands .legal > a{font-size:14px;display:flex;justify-content:space-between;align-items:center}
.footer-bands .legal > a:after{content:"›";color:#222;font-size:18px}

.legal-follow{margin-top:10px;padding-top:16px;border-top:1px solid rgba(0,0,0,.25);display:flex;flex-direction:column;gap:10px}
.legal-follow h4{font-family:var(--ff-display);font-size:18px;letter-spacing:.06em;margin:0;text-transform:uppercase;color:#222}
.legal-follow-row{display:flex;align-items:center;gap:var(--sm)}
.legal-follow .follow-zebra img{width:44px;height:44px;display:block}
.legal-follow .icons{display:flex;gap:8px}
.legal-follow .icons a{display:grid;place-items:center;color:#222}
.legal-follow .icons a svg{width:26px;height:26px}

/* Page content wrapper — Textseiten (Impressum, Datenschutz, etc.) */
.page-main{padding:var(--xxl) 0}
.page-main .container{max-width:780px}

.copyline{background:#000;color:#aaa;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  padding:14px var(--gutter);display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--sm)}

/* Band-yellow: Links immer schwarz, auch beim Hover */
.footer-bands .band-yellow a{color:#000}
.footer-bands .band-yellow a:hover{color:#000;text-decoration:underline}

/* FOOTER FIX — legal stays in grid, no white gap (overrides above) */
.footer-bands{grid-template-columns:1fr 1fr 1fr !important}
.footer-bands .legal{position:static !important;width:auto !important;right:auto !important;top:auto !important;bottom:auto !important;background:#9a9a9a;color:#222;padding:var(--lg);display:flex;flex-direction:column;justify-content:center;gap:14px}

/* Responsive — footer-specific media queries */
@media (max-width: 980px){
  .footer-bands{grid-template-columns:1fr;min-height:auto}
  .footer-bands .band-yellow,.footer-bands .legal{position:static;width:auto;min-width:0}
  .footer-bands .legal{padding:var(--lg)}
}
@media (max-width:900px){
  .footer-bands{grid-template-columns:1fr !important}
}