/* ===== footer.css ===== */

/* Vollbreit über die ganze Seite */
.site-footer {
  background:#222;
  color:#fff;
  width: 100%;
  /* dezent nach oben „abheben“ */
  box-shadow: 0 -4px 16px rgba(0,0,0,.15);
}

/* Innenabstand, aber KEINE max-width-Begrenzung mehr */
.site-footer .footer-inner {
  margin: 0;
  padding: 18px 24px;
  position: relative;
  text-align: center;
}

.site-footer .footer-copy { margin: 0; }

/* Social rechts, mobil unten mittig */
.site-footer .footer-social {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: 10px;
}

/* runde Buttons (Icons via background-image in /assets/icons) */
.site-footer .social {
  position: relative;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #3a3a3a;
  color: #fff;
  text-decoration: none;
  transition: transform .15s ease, background-color .15s ease;
  opacity: .95;
  overflow: hidden;
  font-size: 0; /* Text visuell ausblenden, bleibt für SR vorhanden */
}
.site-footer .social:hover { transform: translateY(-2px); opacity: 1; background-color: #4a4a4a; }

/* Optional: wenn du SVGs als BG nutzen willst (liegen in assets/icons) */
.site-footer .social[aria-label="Instagram"]  { background-image: url("../icons/instagram.svg");  background-size: 60% 60%; background-repeat: no-repeat; background-position: center; }
.site-footer .social[aria-label="Facebook"]   { background-image: url("../icons/facebook.svg");   background-size: 60% 60%; background-repeat: no-repeat; background-position: center; }
.site-footer .social[aria-label="LinkedIn"]   { background-image: url("../icons/linkedin.svg");   background-size: 60% 60%; background-repeat: no-repeat; background-position: center; }
.site-footer .social[aria-label="ArtStation"] { background-image: url("../icons/artstation.svg"); background-size: 60% 60%; background-repeat: no-repeat; background-position: center; }

@media (max-width:720px){
  .site-footer .footer-social {
    position: static;
    transform: none;
    justify-content: center;
    margin-top: 10px;
  }
}