/* Platzhalter für zentrale Styles der neuen Website */

/* === Contact Social Links === */
.contact-links{
  display:flex;
  gap:12px;
  margin-top:16px;
  flex-wrap:wrap;
}

.contact-link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:44px;
  padding:0 16px;
  border-radius:14px;

  /* klare Basis */
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.03);

  color:var(--text);
  font-size:.9rem;
  font-weight:600;

  transition:.18s ease;
  backdrop-filter: blur(6px);
}


/* Icon */
.contact-link .icon{
  width:22px;
  height:22px;
  border-radius:6px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.75rem;
  font-weight:700;
}

/* === LINKEDIN === */
.contact-link.linkedin{
  background:linear-gradient(
    135deg,
    rgba(10,102,194,.25),
    rgba(10,102,194,.05)
  );
  border-color:rgba(10,102,194,.5);
}

.contact-link.linkedin .icon{
  background:rgba(10,102,194,.9);
  color:#fff;
}

/* === XING === */
.contact-link.xing{
  background:linear-gradient(
    135deg,
    rgba(0,153,102,.25),
    rgba(0,153,102,.05)
  );
  border-color:rgba(0,153,102,.5);
}

.contact-link.xing .icon{
  background:rgba(0,153,102,.9);
  color:#fff;
}

/* === Hover === */
.contact-link:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(0,0,0,.25);
}

/* === Mobile === */
@media (max-width:600px){
  .contact-links{
    flex-direction:column;
  }

  .contact-link{
    width:100%;
    justify-content:center;
  }
}