@charset "utf-8";
/* CSS Document */


.footer-logo {
  gap: 0.5rem; /* Abstand Logo ↔ Text */
  margin-bottom: 0.75rem;
}

.footer-logo-img {
  height: 80px;   /* Footer-tauglich */
  width: auto;
  display: block;
}

.footer-about .sitename {
  font-weight: 600;
  font-size: 1.1rem;
}

.footer-address .address-line {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
}

.footer-address .address-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.75); /* dezent weiß */
  margin-top: 0.15em; /* optische Ausrichtung zur Textzeile */
}
	
.footer-address .address-link {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.4rem;
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-address .address-link:hover,
.footer-address .address-link:focus-visible {
  color: var(--accent-color);
}

.footer-address .address-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.75);
  margin-top: 0.15em;
}
	
	
.footer-company-name {
  font-size: 1.1rem;
  margin-bottom: 0.15rem;
}
	
/*--------------------------------------------------------------
# BS Icons
--------------------------------------------------------------*/

/* ===============================
   SOCIAL ICONS – FOOTER
================================== */

/* Link transition (für Hintergrund etc.) */
.social-links a{
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color .25s ease, transform .25s ease;
}

/* ICON: Transition MUSS hier drauf */
.social-icon{
  width: 18px;
  height: 18px;
  display: inline-block;

  background-color: #fff;                 /* initial */
  transition: background-color .25s ease; /* <-- das macht das weiche Blenden */

  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;

  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

/* Hover */
.social-links a:hover .social-icon{
  background-color: #EC6707;
}

/* Optional: leichter Hover-Kreis */
.social-links a:hover{
  background-color: rgba(236,103,7,0.08);
}


/* Hover */
.social-links a:hover .social-icon{
  background-color: #EC6707; /* dein Orange */
}

/* Optional: Hover Background Circle */
.social-links a:hover{
  background-color: rgba(236,103,7,0.08);
}

.icon-twitter{
  -webkit-mask-image: url("../icon/bootstrap/twitter-x.svg");
  mask-image: url("../icon/bootstrap/twitter-x.svg");
}

.icon-facebook{
  -webkit-mask-image: url("../icon/bootstrap/facebook.svg");
  mask-image: url("../icon/bootstrap/facebook.svg");
}

.icon-instagram{
  -webkit-mask-image: url("../icon/bootstrap/instagram.svg");
  mask-image: url("../icon/bootstrap/instagram.svg");
}

.icon-linkedin{
  -webkit-mask-image: url("../icon/bootstrap/linkedin.svg");
  mask-image: url("../icon/bootstrap/linkedin.svg");
}

.icon-youtube{
  -webkit-mask-image: url("../icon/bootstrap/youtube.svg");
  mask-image: url("../icon/bootstrap/youtube.svg");
}